FROM CACHE - jp_header

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

ashimorimeron
Shopify Partner
9 0 0

<featured-blog.liquid>

<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>




{% 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>

 

 

無料テーマsimpleのファイルを上記の様に編集し、

記事にサムネイル画像が表示される様にしようとしたのですが、

添付写真のように縦に表示されてしまします。

 

スクリーンショット 2021-10-06 18.44.48.png

 

また、カスタマイズ画面で表示数を設定しても、反映されなくなってしまい…。

 

liquidについてはかなり手探りで、分からなくなってしまいました。

 

どなたか修正箇所や、このコードを書けばいい等ございましたらお教えいただけますと幸いです。

0件の返信0