FROM CACHE - jp_header

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

ashimorimeron
Shopify Partner
9 0 0

 

<style>
  .featured-blog__date {
    {% if section.settings.blog_show_excerpt %}
      padding-bottom: 17px;
    {% endif %}
  }
</style>

<div class="featured-blog featured-blog--{{ section.id }}" data-section-id="{{ section.id }}">

  {%- 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 %}
    <h2 class="small--text-center">{{ section.settings.title | escape }}</h2>
  {% 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 -%}

      <div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ section.settings.grid_style }}">
        <div class="card-list__column grid__item {% if blog.articles.size == 1 %}card-list__column--center{% endif %} {{ gridClasses }}">
          {% for article in blog.articles %}
            {% include 'article-card', article: article, grid_style: section.settings.grid_style %}
          {% endfor %}
        </div>
      </div>

   <!---->
    <div class="grid grid--uniform">
      {% for article in blog.articles limit: section.settings.post_limit %}
        <div class="grid__item {{ width }} slide-up-animation animated">
          <div class="featured-blog__post">

            {% if section.settings.blog_show_image %}
              {% unless article.image == blank %}
                <a class="article__featured-link" href="{{ article.url }}">
                  <noscript>
                    {{ article.image | img_url: '1024x1024' | img_tag: article.title | escape }}
                  </noscript>
                  <div class="article__featured-image-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
                    {% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="article__featured-image lazyload"
                      src="{{ article.image | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[310, 360, 480, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ article.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ article.title | escape }}">
                  </div>
                </a>
              {% endunless %}
            {% endif %}

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

          </div>
        </div>

        {% if section.settings.post_limit == 1 and section.settings.blog_show_image %}
          <div class="grid__item {{ width }} slide-up-animation animated">
            <div class="featured-blog__post">
               {% include 'featured-blog', article: article %}
            </div>
          </div>
        {% endif %}

      {% endfor %}
    </div>

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

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

  {% if section.settings.show_view_all %}
    <div class="section-header text-center">
      <a href="{{ blog.url }}" class="btn">
        {{ 'blogs.article.view_all' | t }}
      </a>
    </div>
  {% endif %}

</div>

 

 

↑<featured-blog.liquid>

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

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

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

 

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

 

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

0件の返信0