Split content & looping images in blog article - text content repeats itself

New Member
13 0 0

I have split up the content in my blog article and that seemed fine. I also pull the images from the article so that I can place them in specific areas around that content.

 

But there is a problem with the way I wrote the code below. The article content is attached to last image. How do I ensure only grabbing the image links OR how do I remove all the text content after the last image?

 

Liquid:

{% if article.content != empty %}
<!-- Article Text Capture -->
  {% capture fakeContent %}{{ article.content }}{% endcapture %}
  {% assign splitContent = fakeContent | split: '<!-- split -->'  %}
<!-- End Article Text Capture -->
  <!-- Image Capture -->
  {% assign img_tag = '<img' %}
    {% if fakeContent contains img_tag %}
      {% assign listOfImages = fakeContent | split: 'src="' %}
      {% assign singleImage = listOfImages %}
      {% if listOfImages.last == true %}
          !!! Remove all the content afterwards !!!
      {% endif %}
    {% endif %}
  <!-- End Image Capture -->

{% endif %}

HTML:

<div class="paddings">
  <div class="grid">
    <div class="grid__item">
      <h2>{{ article.title }}</h2>
      <div style="visibility: hidden"> <img src="{{ singleImage[0] }}" /></div>
      <p class="bt_para">{{ splitContent[0] }}</p>
    </div>
  </div>

  <div class="grid">
    <div class="grid__item">
      <div class="background">
        <img src="{{ singleImage[1] }}" class="small--hide" />
        <br/>
      </div>
    </div>
    <div class="grid__item">
      <div>{{ splitContent[1] }}</div>
    </div>
  </div>

  <div class="grid">
    <div class="grid__item">
      <div>{{ splitContent[2] }}</div>
    </div>
    <div class="grid__item">
      <div class="background">
        <img src="{{ singleImage[2] }}" class="small--hide" /> 
        <br/>
      </div>
    </div>

    <div class="grid__item">
      <div>{{ splitContent[3] }}</div>
        <img src="{{ singleImage[3] }}" class="small--hide" /> 
        <!-- This is the last image -->
        <!-- HERE: The article content repeats and ends with "class='small-hide'>" -->
    </div>
  </div>  

Thanks in advance!

0 Likes