無料テーマSimpleで、動的セクションのブログ記事にサムネイルを表示させたい

Topic summary

目的: 無料テーマSimpleの動的セクションで、ブログ記事にサムネイル画像を表示したい。

変更内容: featured-blog.liquidを編集し、35〜53行目を追加。article.imageの取得・表示条件を組み込み、article-card/featured-blogのインクルードで一覧を出力。

現象: 一覧の表示形式をグリッドにしても、記事が縦方向に積み重なり、横並びのグリッドが崩れる。

提供情報: 編集後のコードが提示され、assign/captureによるクラス設定、2つのforループ、post_limitやgrid_styleの利用などが含まれる。Liquid(Shopifyのテンプレート言語)での構成が中心。

問い: 元のように横並びのグリッドへ戻すために、どのようなコード修正が必要か。

状況: 具体的な解決策はまだ示されておらず、回答を募集中。コードスニペットが理解の要。

Summarized with AI on March 1. AI used: gpt-5.

  {%- assign blog = blogs[section.settings.blog] -%}

  {%  case section.settings.post_limit %}
    {% when 3 %}
      {%- assign width = 'medium-up--one-third small--one-whole' -%}
    {% when 2 %}
      {%- assign width = 'medium-up--one-half small--one-whole' -%}
    {% when 1 %}
      {% if section.settings.blog_show_image %}
        {%- assign width = 'medium-up--one-half small--one-whole' -%}
      {% else %}
        {%- assign width = 'one-whole' -%}
      {% endif %}
    {% else %}
      {%- assign width = 'medium-up--one-third small--one-whole' -%}
  {% endcase %}

  {% if section.settings.title != blank %}
    ## {{ section.settings.title | escape }}
  {% endif %}
  

  {% unless blog.articles_count == 0 %}
  

      {%- assign desktopColumns = section.settings.articles -%}
      {%- assign mobileColumns = '1' -%}

      {%- capture gridClasses -%}
        {% if desktopColumns == '3' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
        {% if mobileColumns == '2' %}small--one-half {% endif %}
      {%- endcapture -%}

      
        

          {% for article in blog.articles %}
            {% include 'article-card', article: article, grid_style: section.settings.grid_style %}
          {% endfor %}
        

      

   
    
      {% for article in blog.articles limit: section.settings.post_limit %}
        

          

            {% if section.settings.blog_show_image %}
              {% unless article.image == blank %}
                
                  
                  
                    {% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    
                  

                
              {% endunless %}
            {% endif %}

            {% unless section.settings.post_limit == 1 and section.settings.blog_show_image %}
              {% include 'featured-blog', article: article %}
            {% endunless %}

          

        

        {% if section.settings.post_limit == 1 and section.settings.blog_show_image %}
          
            

               {% include 'featured-blog', article: article %}
            

          

        {% endif %}

      {% endfor %}
    

  {% else %}
    {% include 'onboarding-featured-blog' %}
  {% endunless %}

  {% if blog == empty %}
    {% include 'onboarding-featured-blog' %}
  {% endif %}

  {% if section.settings.show_view_all %}
    
      
        {{ 'blogs.article.view_all' | t }}
      
    

  {% endif %}

↑<featured-blog.liquid>

ブログ記事を表示するセクションに、サムネイル画像も一緒に表示されるよう、

ファイルを上記のように書き換えたのですが(35〜53行目を追加)、

一覧がグリッド形式を選んでも縦に並んでしまいます。

これを元のように横並びにするには、どのようにコードを書き換えれば良いでしょうか?

どなたかお教えいただけますと幸いです。