Canvas Docs

Post Types

Post Types

Canvas supports multiple blog post formats. Every format uses the same .entry / .grid-inner wrapper; only the contents of .entry-image change. This lets you mix a standard image post, a video post, a gallery, a quote, and a link in the same #posts grid. All markup below is taken from blog-full-width.html.

Standard (Image)

The default format. A single featured image inside .entry-image, linked to the lightbox.

<div class="entry col-12">
    <div class="grid-inner">
        <div class="entry-image">
            <a href="images/blog/full/17.jpg" data-lightbox="image"><img src="images/blog/standard/17.jpg" alt="Standard Post with Image"></a>
        </div>
        <div class="entry-title">
            <h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
        </div>
        <div class="entry-meta">
            <ul>
                <li><i class="uil uil-schedule"></i> 10th February 2021</li>
                <li><a href="#"><i class="uil uil-user"></i> admin</a></li>
                <li><a href="#"><i class="uil uil-camera"></i></a></li>
            </ul>
        </div>
        <div class="entry-content">
            <p>Photography tutorials, design inspiration, and creative how-tos come together in this featured post.</p>
            <a href="blog-single.html" class="more-link">Read More</a>
        </div>
    </div>
</div>

Video

Drop an <iframe> (YouTube or Vimeo) directly inside .entry-image. Canvas keeps it responsive.

<div class="entry-image">
    <iframe src="https://player.vimeo.com/video/87701971" width="500" height="281" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

The post-format icon in .entry-meta for video posts is uil uil-film.

Gallery (Slider)

Use the .fslider FlexSlider inside .entry-image for a swipeable gallery. Each .slide links to the lightbox gallery group.

<div class="entry-image">
    <div class="fslider" data-arrows="false" data-lightbox="gallery">
        <div class="flexslider">
            <div class="slider-wrap">
                <div class="slide"><a href="images/blog/full/10.jpg" data-lightbox="gallery-item"><img src="images/blog/standard/10.jpg" alt="Standard Post with Gallery"></a></div>
                <div class="slide"><a href="images/blog/full/20.jpg" data-lightbox="gallery-item"><img src="images/blog/standard/20.jpg" alt="Standard Post with Gallery"></a></div>
                <div class="slide"><a href="images/blog/full/21.jpg" data-lightbox="gallery-item"><img src="images/blog/standard/21.jpg" alt="Standard Post with Gallery"></a></div>
            </div>
        </div>
    </div>
</div>

Gallery (Masonry Thumbs)

A grid gallery uses .masonry-thumbs. The data-big="3" attribute enlarges every 3rd thumbnail, and row-cols-6 sets six columns.

<div class="entry-image">
    <div class="masonry-thumbs grid-container row row-cols-6" data-big="3" data-lightbox="gallery">
        <a class="grid-item" href="images/blog/full/2.jpg" data-lightbox="gallery-item"><img src="images/blog/small/2.jpg" alt="Blog post gallery thumbnail 1"></a>
        <a class="grid-item" href="images/blog/full/3.jpg" data-lightbox="gallery-item"><img src="images/blog/small/3.jpg" alt="Blog post gallery thumbnail 2"></a>
        <a class="grid-item" href="images/blog/full/6-1.jpg" data-lightbox="gallery-item"><img src="images/blog/small/6-1.jpg" alt="Blog post gallery thumbnail 3"></a>
    </div>
</div>

The gallery post-format icon is uil uil-images.

Quote

A quote post drops a <blockquote> into .entry-image and omits .entry-title and .entry-content entirely. Only .entry-image and .entry-meta are used.

<div class="entry col-12">
    <div class="grid-inner">
        <div class="entry-image">
            <blockquote>
                <p>"When you are courting a nice girl an hour seems like a second. When you sit on a red-hot cinder a second seems like an hour. That's relativity."</p>
                <footer>Albert Einstein</footer>
            </blockquote>
        </div>
        <div class="entry-meta">
            <ul>
                <li><i class="uil uil-schedule"></i> 3rd March 2021</li>
                <li><a href="#"><i class="uil uil-user"></i> admin</a></li>
                <li><a href="#"><i class="bi-quote"></i></a></li>
            </ul>
        </div>
    </div>
</div>

Link

A link post uses an .entry-link anchor inside .entry-image. The link text is the title and the <span> holds the URL. Like the quote format, it skips .entry-title and .entry-content.

<div class="entry col-12">
    <div class="grid-inner">
        <div class="entry-image">
            <a href="https://themeforest.net" class="entry-link" target="_blank">
                Themeforest.net
                <span>- https://themeforest.net</span>
            </a>
        </div>
        <div class="entry-meta">
            <ul>
                <li><i class="uil uil-schedule"></i> 17th March 2021</li>
                <li><a href="#"><i class="uil uil-user"></i> admin</a></li>
                <li><a href="#"><i class="uil uil-link"></i></a></li>
            </ul>
        </div>
    </div>
</div>

Options

Each post format has a matching icon convention in the last .entry-meta list item:

  • Standard image: uil uil-camera
  • Video: uil uil-film
  • Gallery slider / masonry: uil uil-images
  • Quote: bi-quote
  • Link: uil uil-link

Tips

  • Quote and link posts intentionally have no .entry-title or .entry-content; the format itself is the content.
  • For the gallery slider, data-arrows="false" hides FlexSlider navigation arrows so the images read as a clean strip.
  • Mixing formats in one #posts grid is fully supported; the .grid-inner wrapper keeps card heights consistent.
  • Video iframes are made responsive automatically by the Canvas resize-videos module, so you do not need a fixed aspect wrapper.
Was this page helpful?