Make Brooklyn Blog Grid With Latest Blog Entry Full Width

Shopify Discussion
1

I found a way to make the Brooklyn Blog Page a grid here:

https://community.shopify.com/c/shopify-design/brooklyn-theme-blog-page-layout/td-p/1092024

It worked great.

What I need now is a way to make the latest blog entry full width at the top of the Blog Page while keeping previous entries below that in the grid format I am using from the link I shared.

The Dawn Theme seems to do what I want out of the box, but this is needed for the Brooklyn Theme.
https://shopify.dev/themes/architecture/templates/blog

Here is an example of what I want to do:

Thanks!

2

I found what may be a solution for me so I am sharing it.

I found you can isolate and display the most recent Blog post article entry with the featured.blog.liquid section.

I placed this tag beneath the closing header tag before opening of the blog-body class div on the blog.liquid template page in the code area:
{% section ‘featured-blog’ %}

Then I went to the Blog Page in the Shopify Customizer and saw the Blog Posts section appear between the Header and Footer left side panel. In the right side panel I removed the default text in the Heading input and left it blank (I don’t need two Blog headings). Then I selected the Blog I am using and reduced the posts to display down to 1.

That left me with the task of not showing the most recent Blog post in the grid.

Here I found a way to remove the most recent Blog post article from the Blog Page grid.

https://stackoverflow.com/questions/45325817/shopify-call-all-articles-in-blog-except-the-first-one

I replaced this tag on the blog.liquid template page:

{% for article in blog.articles%}

with this tag:

{% for article in blog.articles offset: 1 %}

That removed the extra most recent Blog post article entry so it would not show up twice.

Now I am trying to figure out how to limit the display of the featured-blog to the first page of pagination.

3

I found this link with a solution to presenting the first article exclusively on the first page of the blog’s pagination:
https://marilynmorales.com/2021/06/10/highlight-latest-post-with-shopify-pagination/

This is what I used to make the featured-blog only show up on the first page of pagination:

{%- if paginate.current_page == 1 -%}
{% section ‘featured-blog’ %}
{%- endif -%}

Now I am going to try to figure out how to make the number of blog posts 6 within the grid on every page while maintaining the full width featured-blog post on the first page.

4

I decided to ask ChatGPT about how to adjust the pagination and it came back with some code ideas but so far nothing has worked for me. Still thought I should share what code it gave me on the off-chance someone here has abetter idea on how to implement it or maybe tell me what the AI got wrong. Plus I found the documentation on pagination sorely lacking and I did not find anything like the following in any of the documentation I saw.

Here is the 1st code it gave me to display the most recent blog post full width on the first pagination, and then display previous posts in a grid of 3 rows and 3 columns per pagination:

{% paginate blog.articles by 9 %}
{% for article in paginate.collection %}
{% if forloop.first %}

{{ article.title }}

{{ article.excerpt }}

Read more

{% else %} {% if forloop.index0 == 3 or forloop.index0 == 6 %}
{% endif %}

{{ article.title }}

{{ article.excerpt }}

Read more

{% endif %} {% endfor %}
{{ paginate | default_pagination }} {% endpaginate %}

Here is the second code it gave me to check if the current page is the first page, and if so, include articles starting from the second one in the pagination limit. On subsequent pages, the code would include all articles in the pagination limit:

{% if pagination.current_page == 1 %}
{% assign limit = pagination.limit | minus: 1 %}
{% for article in articles limit: limit %}

{% endfor %}
{% else %}
{% for article in articles limit: pagination.limit %}

{% endfor %}
{% endif %}

And here is the third code it gave me as an alternative to the previous one:

{% if paginate.page == 1 %} {% assign articles = articles | slice: 1, limit %} {% else %} {% assign articles = articles | slice: (paginate.page - 1) * limit, limit %} {% endif %}