AJAX Pagination for Posts in Bricks

This Pro tutorial provides the steps to implement Loops & Logic for loading the next set of paginated posts when the pagination numbers are clicked i.e., AJAX pagination in Bricks builder.

We will cover two types of post loops:

1. Bricks template
2. Loops & Logic template

Step 1

Install and activate Loops & Logic.

Step 2

Bricks Template

a) Create a new Bricks Template named say, “Post Loop” of the type “Section” and edit it with Bricks.

Add a Container element.

HTML tag: article

If you would like the last item in the loop (this could be the post categories or a Read more button) to be aligned at the bottom vertically for each post, set Align container to stretch. Otherwise, set it to Start.

Add the post data like featured image, title, excerpt in your desired order. Below is what I added in my test site.

Add an Image element inside the Container.

If “Bricks Large 16×9 (1200×675)” option is not available, you could either use add_image_size() to register it manually or enable “Generate custom image sizes” at Bricks → Settings → General and then select it or select different image size of your choice. You may have to regenerate thumbnails.

Add a Post Title element.

Add an Excerpt element.

Add a Basic Text element. This is for comma-separated linked post categories. Set the text content to:

Categorized under: {post_terms_category}

b) Go to Tangible → Templates.

Add a new Template named say, “AJAX paginated posts”.

Template code:

<div class="posts-grid">
  <Loop type=post count=9 paged=3 orderby=date order=desc>
    <Shortcode bricks_template id="1110" />
  </Loop>
</div>

<PaginateButtons />

Replace 1110 with the ID of your “Post Loop” Bricks Template.

Here we are instructing L & L to get 9 posts set to appear 3 per page i.e., a total of 3 paginated pages in descending order of published date.

Style:

.posts-grid {
  margin-top: 40px;
  margin-bottom: 40px;
}

.posts-grid .tangible-paginator-target {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.tangible-paginator-buttons {
  text-align: center;
}

.tangible-paginator-buttons .tangible-paginator-button {
  padding: 0.5rem 1rem;
}

L & L Template

Here is the manual approach wherein the loop is coded using Loops & Logic.

Go to Tangible → Templates.

Add a new Template named say, “AJAX paginated posts”.

Template code:

<div class="posts-grid">
	<Loop type=post count=9 paged=3 orderby=date order=desc>
		<article class="post-card" aria-label="{Field title}" itemscope itemtype="https://schema.org/CreativeWork">
			<If field="image" exists>
			<header class="post-card__header">
				<a href="{Field url}"><Field image size=bricks_large_16x9 class="post-card__image" /></a>
			</header>
			</If>

			<div class="post-card__title-excerpt">
				<h3 class="post-card__title" itemprop="headline"><a class="post-card__title-link" rel="bookmark" href="{Field url}"><Field title /></a></h3>

				<div class="post-card__content" itemprop="text">
					<Field excerpt auto=true words=30 />
				</div>
			</div>

			<If loop taxonomy=category post=current>
			<footer class="post-card__footer">
				<p class="post-card__meta">
					Categorized under:&nbsp;
					<Taxonomy category>
						<a href="{Field url}"><Term title /></a><If not last>, </If>
					</Taxonomy>
				</p>
			</footer>
			</If>

		</article>
	</Loop>
</div>

<PaginateButtons />

Here we are instructing L & L to get 9 posts set to appear 3 per page i.e., a total of 3 paginated pages in descending order of published date.

Style:

.posts-grid {
  margin-top: 40px;
  margin-bottom: 40px;
}

.posts-grid .tangible-paginator-target {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.post-card {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow:  rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 23, 42, 0.1) 0px 20px 25px -5px, rgba(15, 23, 42, 0.1) 0px 8px 10px -6px;
  border-radius: 6px;
  overflow: hidden;
}

.post-card__title-excerpt {
  padding: 1.5em;
}

.brxe-shortcode .post-card__title-link {
  color: #212121;
}

.post-card__content {
  margin-top: 0.5em;
  margin-bottom: 2em;
}

.post-card__footer {
  margin-top: auto;
  padding: 1.5em;
}

.tangible-paginator-buttons {
  text-align: center;
}

.tangible-paginator-buttons .tangible-paginator-button {
  padding: 0.5rem 1rem;
}

References

https://loop.tangible.one/tags/loop/post

https://loop.tangible.one/tags/shortcode

https://discourse.tangible.one/t/taxonomy-terms-separator/590/2

https://discourse.tangible.one/t/check-if-post-has-a-specific-term/596/3