Shopify themes, liquid, logos, and UX
Hi,
We need to stop the article image from appearing in blog posts, any help is welcome.
Dawn Theme
Μια ενημέρωση για τον COVID-19 – JACQUES HERMES
article-card.liquid liquid right now
{% 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 != nil
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 -%}
<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>
{%- 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-background-1">{{ '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 -%}
{% comment %}{%- if show_author -%}
<span>{{ article.author }}</span>
{%- endif -%}{% endcomment %}
</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-background-1">{{ 'blogs.article.blog' | t }}</span>
</div>
{%- endif -%}
</div>
</div>
</div>
{%- endif -%}
Solved! Go to the solution
This is an accepted solution.
For anyone being interested in solving a similar problem watching this;
we found a way to make the featured image disappear from the blog post page in the dawn theme. All you have to do is go to online store>edit code>Templates>article.json and find the block order.
It should be something like this;
"block_order": [
"featured_image",
"title",
"share",
"content"
]
you have to delete the "featured_image" from there and it will disappear from the blog post page. We hope this helped.
Thank you for your time,
Jacques Hermes team
This is an accepted solution.
For anyone being interested in solving a similar problem watching this;
we found a way to make the featured image disappear from the blog post page in the dawn theme. All you have to do is go to online store>edit code>Templates>article.json and find the block order.
It should be something like this;
"block_order": [
"featured_image",
"title",
"share",
"content"
]
you have to delete the "featured_image" from there and it will disappear from the blog post page. We hope this helped.
Thank you for your time,
Jacques Hermes team
User | RANK |
---|---|
61 | |
56 | |
47 | |
42 | |
40 |
Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023With 2-Factor Authentication being required to use Shopify Payments, we’re here to help yo...
By Imogen Apr 26, 2023