Dawnテーマ ブログ記事のサムネイルを正方形にしたい

hoosel1328
Tourist
7 0 0

2点のご相談があります。

 

1.トップページのブログ記事セクションで、

サムネイルを正方形で表示したいです。(写真の赤枠部分)

テーマはDawnを使用しています。

 

2.ブログのタイトルを非表示にして、サムネイルをクリックするだけにしたいです。(写真の青枠部分)

どのようにしたらよいでしょうか?

 

宜しくお願い致します。スクリーンショット 2024-01-22 9.59.55.png

Replies 7 (7)

StephensWorld
Shopify Expert
1170 127 293

1:

 

Make all of your blog images the same size before uploading them to Shopify. 

 

2:

 

Go into the "theme editor" and then click into your blog post page. From the left-hand side menu, click into "blog posts". From the right-hand side menu, scroll to the bottom and click into "Custom CSS" and add the following coding (then save changes): 

 

 

 

.card__information {
  display: none;
}

 

 

hide blog post names.png

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

hoosel1328
Tourist
7 0 0

1.

ブログ画像は全て540px:540pxでアップロードしていますが、間違っているでしょうか?


2.

成功しました!ご教示いただきありがとうございます。

 

 

StephensWorld
Shopify Expert
1170 127 293

Yes, having images at 540x540 should work. As long as they're all the same size, then they should appear aligned on the main blog page. 

 

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

hoosel1328
Tourist
7 0 0

ブログページでは正方形で表示されるのですが、
トップページでは正方形で表示されません。
トップページで正方形表示をしたいです。

また、先ほど教えていただいたブログタイトル非表示のコーディングを入力したところ、
クリックをしても反応がなくなってしまいました。
リンクの連携を維持したままタイトルを非表示することは出来るでしょうか?

何度もすいません...

StephensWorld
Shopify Expert
1170 127 293

Re: Image Sizes

 

If you're going to show the 'featured image' on the actual blog posts/articles then you would need to use a different sized image, as the one that shows on the actual posts are not square (they'll be 'landscape' format). In this case, you should try using images that are ~ 1600 x 500 px. This size will work better for showing on the actual posts. They won't be square on the main blog page, but they'll still be uniform in size, as long as the images are all the same size. 

 

Re: Coding

 

Keep the coding added to the "custom css" section that I previously shared with you. 

 

Next, go into your theme's coding (admin > online store > themes > click the "..." dropdown > select "edit code") ... and then find the "article-card.liquid" snippet. 

 

article-card.png

 

Delete all of the coding within that, and then copy-and-paste the following (then save changes):

 

 

{% comment %}
  Renders an article card for a given blog with settings to either show the image or not.

  Accepts:
  - blog: {Object} Blog object
  - article: {Object} Article object
  - media_aspect_ratio: {String} The setting changes the aspect ratio of the article image, if shown
  - media_height: {String} The setting changes the height of the article image. Overrides media_aspect_ratio.
  - show_image: {String} The setting either show the article image or not. If it's not included it will show the image by default
  - show_date: {String} The setting either show the article date or not. If it's not included it will not show the image by default
  - show_author: {String} The setting either show the article author or not. If it's not included it will not show the author by default
  - show_badge: {String} The setting either show the blog badge or not.
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

  Usage:
  {% render 'article-card' blog: blog, article: article, show_image: section.settings.show_image %}
{% endcomment %}

{%- if article and article != empty -%}
  {%- liquid
    assign ratio = 1
    if media_aspect_ratio != null
      assign ratio = media_aspect_ratio
    endif
  -%}
  <div class="article-card-wrapper card-wrapper underline-links-hover">
    {% comment %} <article aria-labelledby="Article-{{ article.id }}"> {% endcomment %}
    <div
      class="
        card article-card
        card--{{ settings.blog_card_style }}
        {% if media_height and media_height != 'adapt' %} article-card__image--{{ media_height }}{% endif %}
        {% if article.image and show_image %} card--media{% else %} card--text{% endif %}
        {% if settings.blog_card_style == 'card' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}
        {% if settings.blog_card_style == 'card' and media_height == nil and article.image == empty or show_image == false %} ratio{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner {% if settings.blog_card_style == 'standard' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}{% if article.image and show_image or settings.blog_card_style == 'standard' %} ratio{% endif %}"
        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
      >
        {%- if show_image == true and article.image -%}
          <a href="{{ article.url }}"
          <div class="article-card__image-wrapper card__media">
            <div
              class="article-card__image media media--hover-effect"
              {% if section.settings.media_height == 'adapt' %}
                style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
              {% endif %}
            >
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                srcset="
                  {%- if article.image.src.width >= 165 -%}{{ article.image.src | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if article.image.src.width >= 360 -%}{{ article.image.src | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if article.image.src.width >= 533 -%}{{ article.image.src | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%}
                  {%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%}
                  {{ article.image.src | image_url }} {{ article.image.src.width }}w
                "
                src="{{ article.image.src | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                alt="{{ article.image.src.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ article.image.width }}"
                height="{{ article.image.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
            </div>
          </div>
          </a>
        {%- endif -%}
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading{% if show_excerpt %} h2{% endif %}">
              <a href="{{ article.url }}" class="full-unstyled-link">
                {{ article.title | truncate: 50 | escape }}
              </a>
            </h3>
            <div class="article-card__info caption-with-letter-spacing h5">
              {%- if show_date -%}
                <span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
              {%- endif -%}
              {%- if show_author -%}
                <span>{{ article.author }}</span>
              {%- endif -%}
            </div>
            {%- if show_excerpt -%}
              {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
                <p class="article-card__excerpt rte-width">
                  {%- if article.excerpt.size > 0 -%}
                    {{ article.excerpt | strip_html | truncatewords: 30 }}
                  {%- else -%}
                    {{ article.content | strip_html | truncatewords: 30 }}
                  {%- endif -%}
                </p>
              {%- endif -%}
              <div class="article-card__footer">
                {%- if article.comments_count > 0 and blog.comments_enabled? -%}
                  <span>{{ 'blogs.article.comments' | t: count: article.comments_count }}</span>
                {%- endif -%}
              </div>
            {%- endif -%}
          </div>
          {%- if show_badge -%}
            <div class="card__badge {{ settings.badge_position }}">
              <span class="badge color-{{ settings.color_schemes | first }}">{{ 'blogs.article.blog' | t }}</span>
            </div>
          {%- endif -%}
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading{% if show_excerpt %} h2{% endif %}">
            <a href="{{ article.url }}" class="full-unstyled-link">
              {{ article.title | truncate: 50 | escape }}
            </a>
          </h3>
          <div class="article-card__info caption-with-letter-spacing h5">
            {%- if show_date -%}
              <span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
            {%- endif -%}
            {%- if show_author -%}
              <span>{{ article.author }}</span>
            {%- endif -%}
          </div>
          {%- if show_excerpt -%}
            {%- if article.excerpt.size > 0 or article.content.size > 0 -%}
              <p class="article-card__excerpt rte-width">
                {%- if article.excerpt.size > 0 -%}
                  {{ article.excerpt | strip_html | truncatewords: 30 }}
                {%- else -%}
                  {{ article.content | strip_html | truncatewords: 30 }}
                {%- endif -%}
              </p>
            {%- endif -%}
            <div class="article-card__footer">
              {%- if article.comments_count > 0 and blog.comments_enabled? -%}
                <span>{{ 'blogs.article.comments' | t: count: article.comments_count }}</span>
              {%- endif -%}
            </div>
          {%- endif -%}
        </div>
        {%- if show_badge -%}
          <div class="card__badge {{ settings.badge_position }}">
            <span class="badge color-{{ settings.color_schemes | first }}">{{ 'blogs.article.blog' | t }}</span>
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
{%- endif -%}

 

 

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

hoosel1328
Tourist
7 0 0

ご返答いただきありがとうございます。

どうしても2記事目、3記事目のサムネイルが小さくなってしまうようです。

原因が分からずで申し訳ありません。

StephensWorld
Shopify Expert
1170 127 293

You'll want to make sure that all of the 'featured images' for the blogs are using the exact same sized image. 

 

So if you use an image that's 1600 x 500 px for the first blog post, then you'll want to make sure the images for the other 2 blog posts are using the same sized image -- that way, they will all look aligned and standardized. 

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca