How to place feature image below excerpt on article template in debut theme?

Salutations.

I am in another deep pickle. Currently, I manually insert the feature image onto the article. I do not want to do that anymore. Is it possible that the feature image appears right below the excerpt? Image below for more context.

The goal is to make my articles look similar to Medium :slightly_smiling_face:

@schoe3 Hello you need to update the blog-template.liquid from sections can you paste the code here?

Thank you for the quick response Kazi.

This is my first time pasting the code. I am more of a screenshot type of person.

I tried it. But it looked really messy.

What’s the best way of pasting the code, Kazi?

copy all code inside file and paste here as like doc file you do.

oh. like a google doc? Isn’t that weird?

What doc file are you referring to? Apologies for my inconvenience, Kazi.

go to sections > blog-template.liquid and select all codes (ctrl+a) copy and paste here its simple as copy paste we do.

{{ article.title }}

{% if article.excerpt.size > 0 %}

{{article.excerpt}}

{% endif %}

{% comment %}
{% if section.settings.blog_show_author %}
{{ ‘blogs.article.by_author’ | t: author: article.author }}
{% endif %}
{% endcomment %}

{% comment %}
img code extracted from blog-template. however, it doesn’t fit well. width needs to be wider. just added this kazi.
{% endcomment %}
{% if article.image %}
{% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% include ‘image-style’, image: article.image, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}

{{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
{% endif %}

{% if section.settings.blog_show_date %}

{{ article.published_at | time_tag: format: ‘date’ }}

{% endif %}

{{ article.content }}
{% if blog.next_article != nil %} {% endif %}

{% if blog.previous_article != nil %}

{% endif %}

{% if section.settings.show_share_buttons %}
{% include ‘social-sharing’, share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}

{% schema %}
{
“name”: {
“cs”: “Příspěvky”,
“da”: “Opslag”,
“de”: “Posts”,
“en”: “Posts”,
“es”: “Publicaciones”,
“fi”: “Julkaisut”,
“fr”: “Articles”,
“it”: “Articoli”,
“ja”: “投稿”,
“ko”: “게시물”,
“nb”: “Innlegg”,
“nl”: “Berichten”,
“pl”: “Posty”,
“pt-BR”: “Posts”,
“pt-PT”: “Publicações”,
“sv”: “Inlägg”,
“th”: “โพสต์”,
“tr”: “Gönderiler”,
“vi”: “Bài viết”,
“zh-CN”: “文章”,
“zh-TW”: “貼文”
},
“settings”: [
{
“type”: “checkbox”,
“id”: “blog_show_author”,
“label”: {
“cs”: “Zobrazit autora”,
“da”: “Vis forfatter”,
“de”: “Autor anzeigen”,
“en”: “Show author”,
“es”: “Mostrar autor”,
“fi”: “Näytä tekijä”,
“fr”: “Afficher l’auteur”,
“it”: “Mostra autore”,
“ja”: “執筆者を表示する”,
“ko”: “작성자 표시”,
“nb”: “Vis forfatter”,
“nl”: “Auteur weergeven”,
“pl”: “Pokaż autora”,
“pt-BR”: “Mostrar autor”,
“pt-PT”: “Mostrar autor”,
“sv”: “Visa författare”,
“th”: “แสดงผู้เขียน”,
“tr”: “Yazarı göster”,
“vi”: “Hiển thị tác giả”,
“zh-CN”: “显示作者”,
“zh-TW”: “顯示作者”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “blog_show_date”,
“label”: {
“cs”: “Zobrazit datum”,
“da”: “Vis dato”,
“de”: “Datum anzeigen”,
“en”: “Show date”,
“es”: “Mostrar fecha”,
“fi”: “Näytä päivämäärä”,
“fr”: “Afficher la date”,
“it”: “Mostra data”,
“ja”: “日付を表示する”,
“ko”: “날짜 표시”,
“nb”: “Vis dato”,
“nl”: “Datum weergeven”,
“pl”: “Pokaż datę”,
“pt-BR”: “Mostrar data”,
“pt-PT”: “Mostrar data”,
“sv”: “Visa datum”,
“th”: “แสดงวันที่”,
“tr”: “Tarihi göster”,
“vi”: “Hiển thị ngày”,
“zh-CN”: “显示日期”,
“zh-TW”: “顯示日期”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: {
“cs”: “Zobrazit tlačítka pro sdílení na sociálních sítích”,
“da”: “Vis knapper til deling på sociale medier”,
“de”: “Buttons für Social Media anzeigen”,
“en”: “Show social sharing buttons”,
“es”: “Mostrar botones para compartir en redes sociales”,
“fi”: “Näytä sosiaalisen median jakamispainikkeet”,
“fr”: “Afficher les boutons de partage sur les médias sociaux”,
“it”: “Mostra i pulsanti per la condivisione sui social”,
“ja”: “ソーシャルメディアでの共有ボタンを表示する”,
“ko”: “소셜 공유 버튼 표시”,
“nb”: “Vis knapper for deling på sosiale medier”,
“nl”: “Knoppen voor sociaal delen weergeven”,
“pl”: “Pokaż przyciski udostępniania w mediach społecznościowych”,
“pt-BR”: “Mostrar botões de compartilhamento em redes sociais”,
“pt-PT”: “Mostrar botões de partilha nas redes sociais”,
“sv”: “Visa knappar för delning i sociala medier”,
“th”: “แสดงปุ่มสำหรับแชร์ลงโซเชียล”,
“tr”: “Sosyal medya paylaşım düğmelerini göster”,
“vi”: “Hiển thị nút chia sẻ qua mạng xã hội”,
“zh-CN”: “显示社交分享按钮”,
“zh-TW”: “顯示社群分享按鈕”
},
“default”: true
}
]
}
{% endschema %}

can you share the blog link ?

of course

https://pholder.xyz/blogs/reflections/a-confession-an-unhealthy-relationship-with-social-media-growth-expectations

note: I know it’s a terrible practice to make changes live.

I see that you have the featured image below excerpt.

Yeah. In another thread, I was trying to figure out how to get the image in the writing to appear better without the blurs. Someone explained to me that the blurry image is caused by using a small image style. When I should be using the large image style, I copied the img code from blog-template. This made sense to me because I wanted to have the consistency of the image from blog-template to article template.

However, now, I have a whole different problem. The image doesn’t fit the width of the writing. Sorry for misleading you. Maybe I got involved with too many threads at the same time, Kazi. However, I did learn that you can paste the code directly on to the discussions.

You seems have some css on that liquid you can update them to

#ArticleImage-139835769082 {
max-width: 100%;
max-height: 100%;
}

#ArticleImageWrapper-139835769082 {
max-width: 100%;
}

or put them in assets > theme.css

Wouldn’t it make sense to have the CSS in a class?

There is ID/Class you can try the css.

Hi Kazi,

I tried out the code. Placed it inside my theme.css file and saved. However, the image width hasn’t changed in my article-template section of debut theme.

Replace the css with this updated css

#ArticleImage-139835769082 {
max-width: 100% !important;
max-height: 100% !important;
}

#ArticleImageWrapper-139835769082 {
max-width: 100% !important;
}

I see this css will appy for single article you need replace the css with this for all articles

#shopify-section-article-template .article__grid-image-wrapper {
max-width: 100% !important;
}

#shopify-section-article-template .article__grid-image {
max-width: 100% !important;
max-height: 100% !important;
}

Oh, thanks for following up. describing the class works for all the article images :slightly_smiling_face:

I replaced the # code with the class code.

What does the !important do? I don’t I’ve seen that before