Span is not showing up in order while creating a blog article layout.

MJ9094
New Member
2 0 0

I am working on creating a layout and I am 95% done with it. But a span is not showing where its supposed to. I am new to shopify and this is my first layout. Any guidance would be appreciated.

Here is the article.liquid file:

<div>
  {% if article.content contains '+++DETAILS+++' %}
  {% assign content = article.content | split: '+++DETAILS+++' | first %}
  {% assign details = article.content | split: '+++DETAILS+++' | last %}
  {% assign thedeets = details | split: '+++COLLECTION+++' | first %}
  {% assign collectionurl = details | split: '+++COLLECTION+++' | last | strip_html | strip %}
  {% else %}
  {% assign content = article.content %}
  {% endif %}
  
  <section>
    {% 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 class="img-responsive" src="{{src}}" />
    {% else %}
    {% endif %}
  
  
   {% assign images = '' %}
   {% assign tags = article.content | split: '<p>' %}
    {% for t in tags %}
      {% if t contains "<img" %}
      {% assign images = images | append: t %}
      {% endif %}
    {% endfor %}
  
   {% assign images = images | split: "</p>" %}
   <div id="article-text">
    <h3>{{ article.published_at | date: '%m.%d.%y' }}</h3>
    <h1 class="page-title">{{ article.title }}</h1>
   </div>
  
   <div>
    {% assign imgcount = 1 %}
    {% assign sectioncount = 1 %}
    {% assign tags = article.content | split: '<p>' %}
     {% for t in tags %}
        {{t}}
      {% if t contains "<span" %}
       {{t}} 
      {% elsif t contains "<img" %}
       {% assign srcimg = t | split: 'src="' %}
       {% assign srcimg = srcimg[1] | split: '"' | first | replace: '//cdn', 'http://cdn';; | replace: 'http:http://';;, 'http://';; | remove: 'https:' %}
       {% if srcimg != src %}
          <section class="card-grid-section section-{{sectioncount}}">
            <a class="card-grid-two-image">
              <div>
                <picture id="card-one-two-grid-section-{{sectioncount}}">
                  {{images[imgcount]}}
                </picture>
              </div>
            </a>
            <a class="card-grid-two-image">
              <div>
                <picture id="card-two-two-grid-section-{{sectioncount}}">
                  {% assign imgcount = imgcount | plus: 1 %}
                  {{images[imgcount]}}
                </picture>
              </div>
            </a>
         </section>
        {% assign sectioncount = sectioncount | plus: 1 %}
        {% assign imgcount = imgcount | plus: 1 %}
       {% endif %}
      {% else %}
      {% endif %}  
     {% endfor %}
  </div>
  </section>
  
  <script>

     $(document).ready(function($) {});

  </script>


This is what the layout is supposed to look like:
Screen Shot 2021-10-19 at 2.24.32 PM.png

 

This is what the layout looks like: if you see here, the span is being rendered after the second 2 card grid. But that is supposed to show up before it.

Screen Shot 2021-10-19 at 2.28.56 PM.png

 

Replies 0 (0)