Featured image OR 1st image in blog post on Blog List Page

Highlighted
Shopify Partner
30 0 3

hello!

I have successfully added my featured image to my blog list/index page using the following code: 

<img src="{{ article.image.src | img_url: 'medium' }}">

However, many of my older blog posts don't have a featured image. Can someone advise me if there is code I can add that will include the first image of the post IF there is no featured image?

Thanks!

0 Likes
Shopify Partner
1353 20 187

Hi Julia,

You can look into the article content and get an alternative image from there. I remember implementing this and it worked. Look trough the code on this page: https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-access-blog-images-142706. If you're having problems I can look into my old code and give you the exact solution

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Staff
Shopify Staff
379 0 29

Hello Julia, Ben here - your Shopify Guru! 

 Something like this:

{% if article.image.src %}
	<img src="{{ article.image.src | img_url: 'medium' }}">
{% else %}
	{% if article.content contains "<img" %}
   	 {% assign src = article.content | split: 'src="' %}
   	 {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' %}
     <img src="{{ src }}">
    {% endif %}
    
{% endif %}

This will display your featured image if available and if not it will look for the first image in the post and display that. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

1 Like
Shopify Partner
30 0 3

Thank you everyone! Very helpful advice. I was able to get it to work.

One final question- is there a way if there is no featured image or image in the post, to display nothing? Currently it displays a circle with a line through it...

0 Likes
Shopify Partner
1353 20 187

The code given by Ben should handle that:

{% if article.image.src %}

  // set image

{% else %}

  {% if article.content contains "<img" %}
    // set image, if image exists
  {% endif %}

{% endif %}

The image is set only if exists. How did you implement it? The circle with line is shown when there is not image/valid src. 

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Partner
30 0 3

Oh you're right Mircea. I had originally used some code from the link you posted, so it was a little different. I was missing

  {% if article.content contains "<img" %}

When I use this, based on Ben's code- I can't seem to control the styling of the images. They show up haphazardly in different sizes.

          {% if article.image.src %}
            <img src="{{ article.image.src | img_url: 'medium' }}" style="margin-right: 15px; margin-bottom: 0; float: left;">
          {% else %}
            {% if article.content contains "<img" %}
            {% assign image-size = 'medium' %}
            {% assign src = article.content | split: 'src="' %}
            {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' %}
            
            <img src="{{ src }}" style="margin-right: 15px; float: left;">            
          {% endif %}
          {% endif %}

How I got it to work was by creating this snippet: 

{% assign src = src-from-text | escape %}
{% if src contains '&lt;img' %}
  {% assign src = src | split: 'src=&quot;' %}
  {% assign src = src[1] | split: '&quot;' %}
  {% assign src = src[0] | remove: '//cdn' %}
  {% assign src = src | remove: 'http:http://';; %}
  {% assign src = src | remove: 'https:' %}
  {% unless image-size == empty %}
    {% capture replacement %}_{{image-size}}.{% endcapture %}
    {% assign sizes = 'pico icon thumb small compact medium large grande 1024x1024 2048x2048' | split:' ' %}
    {% for size in sizes %}
      {% capture search %}_{{size}}.{% endcapture %}
      {% assign src = src | replace:search,replacement %}
    {% endfor %}
  {% endunless %}
  {{ src | prepend: 'http://cdn';;}}
{% endif %}
{% assign image-size = '' %}

Then this code on blog.liquid: 

          {% if article.image.size > 0 %}
            <img src="{{ article.image.src | img_url: 'medium' }}" style="margin-right: 15px; margin-bottom: 0; float: left;">
          {% else %}
            {% if article.content contains "<img" %}
            {% assign image-size = 'medium' %}
			<img src="{% include 'src-from-text' with article.content %}" alt="my image" style="margin-right: 15px; margin-bottom: 0; float: left;"/>
          {% endif %}  
          {% endif %}

Now everything works! Thanks for all the help!

0 Likes
Shopify Partner
38 0 0

Benjamin C  

THNX FOR THIS

{% if article.image.src %} <img src="{{ article.image.src | img_url: 'medium' }}"> {% else %} {% if article.content contains "<img" %} {% assign src = article.content | split: 'src="' %} {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' %} <img src="{{ src }}"> {% endif %} {% endif %}

yeah IT WORKS!!!!

 

0 Likes