Display Image from blog post with excerpt and read more link

readme.md

Go into blog.liquid and use the code above to replace the code below:

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

{{ article.content | strip_html | truncatewords: 100 }}

{% endif %}

{{ 'blogs.article.read_more' | t }} →

blog.liquid

{% comment %}
  Let's extract an image from article.excerpt_or_content.
  We will replace the image suffix with _1024x1024.
  The image will point to the article page.
{% endcomment %}

{% assign article_has_image = false %}
{% assign content = article.excerpt_or_content %}

{% assign img_tag = '<' | append: 'img' %}
{% if content contains img_tag %}
  {% assign src = content | split: 'src="' %}
  {% assign src = src[1] | split: '"' | first %}
  {% if src %}
    {% assign article_has_image = true %}
    {% assign image_src = src | replace: '_small.', '_1024x1024.' | replace: '_compact.', '_1024x1024.' | replace: '_medium.', '_1024x1024.' | replace: '_large.', '_1024x1024.' | replace: '_grande.', '_1024x1024.' %}
  {% endif %}
{% endif %}

{% if article_has_image %}
<p>
  <a href="{{ article.url }}">
    <img src="{{ image_src }}" alt="{{ article.title | escape }}" />
  </a>
</p>
{% endif %}

<p>{{ content | strip_html | truncatewords: 50 }}</p>

<p><a href="{{ article.url }}">Read more →</a></p>