Change the blog to 3 - 4 grid column

Change the blog to 3 - 4 grid column

In main-blog.liquid, change the entire code to the followings:

  1. <script
  2.   src="{{ 'blog-posts-list.js' | asset_url }}"
  3.   type="module"
  4.   fetchpriority="low"
  5. ></script>

  7. {% liquid
  8.   if section.settings.background_color != blank
  9.     render 'contrast-override', background_color: section.settings.background_color, section_id: section.id
  10.   endif
  11. %}

  13. <blog-posts-list section-id="{{ section.id }}">
  14.   <div
  15.     class="section-background{% if section.settings.background_color != blank %} color-custom-{{ section.id }}{% endif %}"
  16.   ></div>
  17.   <div
  18.     class="
  19.       section
  20.       {% if section.settings.background_color != blank %}color-custom-{{ section.id }}{% endif %}
  21.       blog-posts
  22.       spacing-style
  23.       size-style
  24.     "
  25.     data-testid="blog-posts"
  26.     style="{% render 'spacing-style', settings: section.settings %}"
  27.   >
  28.     {% content_for 'blocks' %}

  30.     <div
  31.       ref="grid"
  32.       class="blog-posts-container"
  33.       style="--desktop-columns: {{ section.settings.columns }};"
  34.     >
  35.       {% liquid
  36.         assign image_index = 0

  38.         # The first two images reach the initial mobile viewport; later images use native lazy-loading.
  39.         assign eager_image_count = 2

  41.         # These sizes mirror --narrow-page-width in theme-styles-variables.liquid,
  42.         # --page-margin in base.css, and --columns-gap below.
  43.         # Desktop content uses a 40px page margin on each side, with 36px column gaps.
  44.         # Desktop: 3 or 4 columns (setting). Tablet (750px-1023px): 3 columns. Mobile: 1 column.
  45.         if section.settings.columns == '4'
  46.           assign image_sizes = '(min-width: 1520px) 333px, (min-width: 1024px) calc(25vw - 47px), (min-width: 750px) calc(33.33vw - 51px), calc(100vw - 32px)'
  47.         else
  48.           assign image_sizes = '(min-width: 1520px) 456px, (min-width: 750px) calc(33.33vw - 51px), calc(100vw - 32px)'
  49.         endif
  50.       %}
  51.       {% for article in blog.articles %}
  52.         {% liquid
  53.           assign scale = 0.6
  54.           assign is_horizontal = false

  56.           assign image_loading = 'lazy'
  57.           assign image_fetch_priority = 'auto'
  58.           if article.image
  59.             assign image_index = image_index | plus: 1

  61.             if image_index <= eager_image_count
  62.               assign image_loading = 'eager'
  63.             endif

  65.             if image_index == 1
  66.               assign image_fetch_priority = 'high'
  67.             endif
  68.           endif
  69.         %}
  70.         {% # Keep the mobile breakpoint in the style block below in sync with the responsive image sizes above. %}
  71.         {% style %}
  72.           [data-blog-index="{{ section.id }}-{{ forloop.index }}"] {
  73.             --blog-post-card-scale: {{ scale }};
  74.           }

  76.           @media screen and (max-width: 749px) {
  77.             [data-blog-index="{{ section.id }}-{{ forloop.index }}"] {
  78.               --blog-post-card-scale: 0.5;
  79.             }
  80.           }
  81.         {% endstyle %}
  82.         <div
  83.           class="blog-post-item"
  84.           data-testid="blog-post-item"
  85.           data-blog-index="{{ section.id }}-{{ forloop.index }}"
  86.         >
  87.           {% content_for 'block',
  88.             id: 'static-blog-post-card',
  89.             type: '_blog-post-card',
  90.             article: article,
  91.             image_sizes: image_sizes,
  92.             image_loading: image_loading,
  93.             image_fetch_priority: image_fetch_priority,
  94.             is_horizontal: is_horizontal
  95.           %}
  96.         </div>
  97.       {% endfor %}
  98.     </div>
  99.   </div>
  100. </blog-posts-list>

  102. {% stylesheet %}
  103.   /**
  104.    * Blog posts page layout
  105.    */
  106.   .blog-posts {
  107.     --page-content-width: var(--narrow-page-width);
  108.     --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));

  110.     /* Keep the responsive image sizes above in sync with this gap. */
  111.     --columns-gap: 36px;
  112.     --rows-gap: 36px;
  113.   }

  115.   /**
  116.    * Grid: 3 or 4 columns on desktop (section setting), 3 on tablet, 1 on mobile.
  117.    */
  118.   .blog-posts-container {
  119.     display: grid;
  120.     grid-template-columns: repeat(var(--desktop-columns, 3), 1fr);
  121.     gap: 1rem;
  122.     width: 100%;
  123.     column-gap: var(--columns-gap);
  124.     row-gap: var(--rows-gap);
  125.   }

  127.   /* Tablet: always 3 columns */
  128.   @media screen and (max-width: 1023px) {
  129.     .blog-posts-container {
  130.       grid-template-columns: repeat(3, 1fr);
  131.     }
  132.   }

  134.   /* Mobile: 1 column */
  135.   @media screen and (max-width: 749px) {
  136.     .blog-posts-container {
  137.       grid-template-columns: 1fr;
  138.     }
  139.   }

  141.   .blog-post-item {
  142.     grid-column: auto;
  143.     background-color: var(--color-background);
  144.   }

  146.   /**
  147.    * When there's no image, the blog post item has a border.
  148.    */
  149.   .blog-post-item {
  150.     border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
  151.     padding: 0 1rem 1rem;
  152.   }

  154.   .blog-post-item:has(.blog-post-card__image-container) {
  155.     border: none;
  156.     padding: 0;
  157.   }

  159.   /**
  160.    * Square featured images at every screen size.
  161.    */
  162.   .blog-post-item .blog-post-card__image-container {
  163.     aspect-ratio: 1 / 1 !important;
  164.     overflow: hidden;
  165.   }

  167.   .blog-post-item .blog-post-card__image-container img {
  168.     width: 100%;
  169.     height: 100% !important;
  170.     aspect-ratio: 1 / 1 !important;
  171.     object-fit: cover;
  172.   }
  173. {% endstylesheet %}

  175. {% schema %}
  176. {
  177.   "name": "t:names.blog_posts",
  178.   "blocks": [
  179.     {
  180.       "type": "@theme"
  181.     },
  182.     {
  183.       "type": "@app"
  184.     },
  185.     {
  186.       "type": "text"
  187.     },
  188.     {
  189.       "type": "icon"
  190.     },
  191.     {
  192.       "type": "image"
  193.     },
  194.     {
  195.       "type": "button"
  196.     },
  197.     {
  198.       "type": "video"
  199.     },
  200.     {
  201.       "type": "group"
  202.     },
  203.     {
  204.       "type": "spacer"
  205.     },
  206.     {
  207.       "type": "_divider"
  208.     }
  209.   ],
  210.   "disabled_on": {
  211.     "groups": ["header"]
  212.   },
  213.   "settings": [
  214.     {
  215.       "type": "select",
  216.       "id": "columns",
  217.       "label": "Columns (desktop)",
  218.       "options": [
  219.         { "value": "3", "label": "3 columns" },
  220.         { "value": "4", "label": "4 columns" }
  221.       ],
  222.       "default": "3"
  223.     },
  224.     {
  225.       "type": "color",
  226.       "id": "background_color",
  227.       "label": "t:settings.background_color",
  228.       "placeholder": "t:settings.default"
  229.     },
  230.     {
  231.       "type": "header",
  232.       "content": "t:content.padding"
  233.     },
  234.     {
  235.       "type": "range",
  236.       "id": "padding-block-start",
  237.       "label": "t:settings.top",
  238.       "min": 0,
  239.       "max": 100,
  240.       "step": 1,
  241.       "unit": "px",
  242.       "default": 0
  243.     },
  244.     {
  245.       "type": "range",
  246.       "id": "padding-block-end",
  247.       "label": "t:settings.bottom",
  248.       "min": 0,
  249.       "max": 100,
  250.       "step": 1,
  251.       "unit": "px",
  252.       "default": 0
  253.     }
  254.   ]
  255. }
  256. {% endschema %}