Introducing the New Dynamic Posts Loop Sections in LiveCanvas

Today, we’re excited to unveil a major update: a complete refactoring of the entire LiveCanvas Dynamic Posts Loop sections library.

From now on, all the sections under the “Dynamic Posts Loop” category have been rebuilt entirely using Tangible’s Loops & Logic tags.

This means that the examples we’re about to showcase provide clean, modular starting points that you can easily customize and expand based on your specific needs.

The new Dynamic Posts Loop sections

In this shortvideo, you can see where to access the new sections—specifically under the Dynamic Post Loops category in the LiveCanvas section library.
By scrolling through the list, you’ll find several ready-to-use templates, which you can insert into your layout with a single click.

Simple Posts Loop

The Simple Posts Loop is designed to display a clean and minimal list of posts, perfect for straightforward blog lists or archives. It's optimized for clarity and readability.

Intro + Simple Two Posts Loop

This layout includes an introductory section followed by a loop that presents two posts side by side. Ideal for highlighting featured content.

Intro + Two Columns Posts Loop

A well-structured two-column layout with an introductory header. Perfect for segmenting content while keeping the design clean and organized.

Intro + Three Simple Columns Posts Loop

This template adds a third column to the standard two-column design, making it great for high-density content display while maintaining balance and readability.

Simple Two Columns Posts Loop

The Simple Two Columns Posts Loop is ideal for displaying content in a grid format with two parallel columns, enhancing readability and space optimization.

Two Columns Posts Loop

A classic two-column structure, perfect for listing articles or blog posts in a well-organized, side-by-side format. Ideal for content-heavy pages where readability and structure are key.

Three Columns Posts Loop

The Three Columns Posts Loop showcases posts in a compact grid of three, optimizing space and giving a more magazine-style layout to your pages.

Three-Column Featured Blog Posts Layout

This layout is perfect for featuring blog posts in a structured three-column grid, with emphasis on visual balance and post highlights.

Four-Column Blog Post Grid with Hover Overlay Dark

This four-column grid layout comes with a dark hover overlay effect, adding a sleek and modern touch to your blog or archive pages.

Four-Column Blog Post Grid with Hover Overlay

Similar to the dark overlay version, this layout provides a four-column grid with a light hover effect, optimizing visibility and user interaction.

Accordion Posts Loop 1

This loop displays posts in an accordion style, perfect for compact displays where users can expand to read more without leaving the page.

Accordion Flush Posts Loop

Similar to the Accordion Posts Loop but with a flush, minimalist design, making it perfect for clean and modern layouts.

Timeline

The Timeline layout displays posts in a chronological sequence, ideal for showcasing event histories, project milestones, or storytelling.

Understanding the Tangible Code with pagination

Most of these new sections, compared to the standard loop (eg only with count="x"), include the pagination, a highly useful feature when you want to display only 4 or 5 posts at a time on a page or a homepage, while still allowing the user to browse through all the posts or custom post types that you need to showcase.

This new Loops & Logic syntax within LiveCanvas makes it possible to achieve this seamlessly.

Now let’s take a look at the whole code for this first section, focusing exclusively on the part responsible for generating the loop, while skipping the markup above it.

The whole code:

<tangible class="live-refresh">
		<div class="d-grid d-lg-flex align-items-start">
			<loop class="d-grid gap-3 mw-8 mx-auto" type="post" paged="4" orderby="date" order="desc">
				<div class="col-12 py-5 border-top">
					<div class="row align-items-center">
						<div class="col-lg mb-3 mb-lg-0">
							<if field="image">
								<img loading="lazy" src="{Field image_url size='thumbnail'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="img-fluid" alt="{Field image_alt}">

								<else>
									<img loading="lazy" src="https://placehold.co/150" class="img-fluid" alt="Placeholder">
								</else>
							</if>
						</div>
						<div class="col-lg-9 mb-3 mb-lg-0">
							<div class="mw-4">
								<span class="text-body text-opacity-75 mb-1 d-block">
									<field name="publish_date" date_format="F j, Y">
									</field>
								</span>
								<h3 class="fw-bold">
									<field name="title">
									</field>
								</h3>
							</div>
						</div>
						<div class="col-lg ms-lg-auto">
							<a class="d-inline-flex align-items-center fw-semibold icon-link icon-link-hover" href="{Field url}">
								<span>Read</span>
								<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="bi bi-arrow-right animate-bounce" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
									<path d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z"></path>
								</svg>
							</a>
						</div>
					</div>
				</div>
			</loop>
			<div class="sticky-top flex-shrink-0 top-5">
				<!-- pagination -->
				<paginatebuttons></paginatebuttons>
			</div>
		</div>
	</tangible>

The loop code and its parameters
Let’s dive into the line responsible for generating the loop and explore the new features introduced for this specific article loop.

<loop class="d-grid gap-3 mw-8 mx-auto"
type="post" 
paged="4"
orderby="date"
order="desc">

As you can see, in this HTML element, the loop opens with some Bootstrap classes that control the behavior of both the div itself and the nested elements (we'll exlain later why).

Next, we have the paged attribute, which handles pagination.
The number 4 dictates how many articles are required to trigger pagination. So, the first page will display 4 articles, the second page another 4, and so on.

Then we have order by, which defines how the posts should be sorted. In this case, it is set to DATE, meaning the posts are ordered by their publication date.

Finally, there is the order attribute, which determines the sorting direction—whether it should be ascending or descending.

At the end of the loop, right after it closes, there’s another div containing a pagination element called paginatebuttons.

<div class="sticky-top flex-shrink-0 top-5">
    <!-- pagination -->
    <paginatebuttons></paginatebuttons>
</div>

This is what makes the pagination appear at the bottom of the articles.

Paged vs only Count in Loops and Logic

It is crucial to understand the implications of using Paged and Count.

In the first case, when using `Paged`, the loop is rendered as a `div`.
This allows you to apply Bootstrap classes directly to control the behavior of its child elements, making it easy to structure and style each item within the loop.

In the second case, when using `Count`, the `div` is **not** rendered.
This means you will need to manually add an extra `div` with the necessary classes or `ID` to structure the looped items properly.

Eg:

Loop with Paged parameter

<loop class="d-grid gap-3 mw-8 mx-auto" type="post" paged="4" orderby="date" order="desc">

Will output ad div

Loop with only Count paramenter

<loop type="post" count="3" orderby="date" order="desc">

in this case the loop will not output as a div.

Key Difference
The key difference between this implementation and the div structures is tha the loop is executed as a div.
This allows the classes to be applied directly within the loop since it is actively running.

On the other hand, if the paged attribute is absent and only the traditional count="xx" parameter with the number of articles is present, the div will not be printed, and we will explore that more in detail later.
If you use only COUNT without PAGED, you’ll be required to add an extra div.

The same loop without pagination

As you can see, in this second case, we moved the Bootstrap classes that were initially inside the loop into a div placed above the loop. Everything will render exactly the same as before, just like in the previous example.

<div class="d-grid gap-3 mw-8 mx-auto">
    <loop type="post" count="4" orderby="date" order="desc">

Here the full code implementation:

<tangible class="live-refresh">
        <div class="d-grid gap-3 mw-8 mx-auto">
        <loop  type="post" count="4" orderby="date" order="desc">
            <div class="col-12 py-5 border-top">
                <div class="row align-items-center">
                    <div class="col-lg mb-3 mb-lg-0">
                        <if field="image">
                            <img loading="lazy" src="{Field image_url size='thumbnail'}" srcset="{Field image_srcset}" sizes="{Field image_sizes}" class="img-fluid" alt="{Field image_alt}">

                            <else>
                                <img loading="lazy" src="https://placehold.co/150" class="img-fluid" alt="Placeholder">
                            </else>
                        </if>
                    </div>
                    <div class="col-lg-9 mb-3 mb-lg-0">
                        <div class="mw-4">
                            <span class="text-body text-opacity-75 mb-1 d-block">
                                <field name="publish_date" date_format="F j, Y">
                                </field>
                            </span>
                            <h3 class="fw-bold">
                                <field name="title">
                                </field>
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg ms-lg-auto">
                        <a class="d-inline-flex align-items-center fw-semibold icon-link icon-link-hover" href="{Field url}">
                            <span>Read</span>
                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="bi bi-arrow-right animate-bounce" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </loop>
        </div>
</tangible>