Liquid、JavaScriptなどに関する質問
<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行目を追加)、
一覧がグリッド形式を選んでも縦に並んでしまいます。
これを元のように横並びにするには、どのようにコードを書き換えれば良いでしょうか?
どなたかお教えいただけますと幸いです。
YouTubeは世界で2番目にアクセス数の多いウェブサイトであり、80カ国語、100カ国以上からのアクセスがあります。米国では、1日で10億時間以上のコンテンツが視聴されているそう...
By rinaflora Jun 4, 2023ゴムの街とも呼ばれる久留米の老舗工場で作成されたスニーカーを販売しているPERSICAストア。Shopifyを選ぶ理由と商品への思い。
By Mirai May 29, 2023EコマースのEメールマーケティングは適切なタイミングで、適切にパーソナライズされたメッセージを顧客に届ける方法であり、厳しさを増すインターネットの規制を受ける必要もありません。こ...
By Nanami May 21, 2023