Broken HTML has been detected in your theme's sections/featured-blog.liquid file.

Broken HTML has been detected in your theme's sections/featured-blog.liquid file.

UNsupplements
Visitor
1 0 0

Hello,

 

Our shopify blog post page is giving the error message:

Broken HTML has been detected in your theme's 
sections/featured-blog.liquid file. Check that there are no missing or extra HTML tags present.

I've looked through the code and don't see any missing </> tags. The first page of our blog post is formatted incorrectly while the subsequent pages are fine. Any suggestions?

{% assign blog = blogs[section.settings.blog] %}
{% capture chevron_right %}<span class="icon-small icon-natcol">{% render 'svg-chevron-right' %}</span>{% endcapture %}
 
<div class="container strongly-spaced-row blog-row" data-section-type="featured-blog">
  {% unless blog.empty? %}
 
    <h1 class="hometitle h4-style align-center"><a href="{{ blog.url }}" data-cc-animate>{{ section.settings.title | escape }}</a></h1>
 
    {% if blog.articles.size == 0 %}
 
      <p class="align-center" data-cc-animate>{{ 'onboarding.blog.empty' | t }}</p>
 
    {% else %}
 
      <div class="article-list article-layout--columns article-layout--one-row">
        {% for article in blog.articles limit: section.settings.post_limit %}
        <div class="article" data-cc-animate data-cc-animate-delay="{{ forloop.index | times: 0.15 }}s">
          <div class="article__inner">
            {% if article.image %}
              <div class="article-image">
                <a href="{{ article.url }}">
                  {%- render 'responsive-image', image: article.image, aspect_ratio: section.settings.crop_ratio, cover: true -%}
                </a>
              </div>
            {% endif %}
 
            <h3><a href="{{ article.url }}">{{ article.title | truncatewords:6 }}</a></h3>
 
            <div class="rte">
              {{ article.content | truncatewords:14 | strip_html }}
            </div>
 
            <div class="meta">
              <span class="iconmeta time">
                {% if section.settings.show_date %}
                  {{ article.published_at | date: format: 'month_date_year' }}
                {% endif %}
                {% if section.settings.show_author %}
                  {% if section.settings.show_date %}&mdash;{% endif %}
                  <span class="author">{{ article.author }}</span>
                {% endif %}
              </span>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    {% endif %}
 
  {% else %}
 
    <h1 class="hometitle h4-style align-center">{{ section.settings.title | escape }}</h1>
 
    <div class="article-list article-layout--columns article-layout--one-row">
      {% for i in (1..section.settings.post_limit) %}
      <div class="article">
        <div class="article__inner">
          <div class="article-image">
            <div class="placeholder-image">{{ 'image' | placeholder_svg_tag }}</div>
          </div>
 
          <h3>{{ 'onboarding.article.title' | t }}</h3>
 
          <div class="rte">
            {{ 'onboarding.article.excerpt' | t }}
          </div>
 
          <div class="meta">
            <span class="iconmeta time">
              {% if section.settings.show_date %}
                {{ 'now' | date: format: 'month_date_year' }}
              {% endif %}
              {% if section.settings.show_author %}
                {% if section.settings.show_date %}&mdash;{% endif %}
                <span class="author">{{ 'onboarding.article.author' | t }}</span>
              {% endif %}
            </span>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
 
  {% endunless %}
</div>
 
 
{% schema %}
  {
    "name": "Blog posts",
    "class": "section-featured-blog",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Blog posts"
      },
      {
        "type": "blog",
        "id": "blog",
        "label": "Blog"
      },
      {
        "type": "range",
        "id": "post_limit",
        "label": "Posts",
        "min": 3,
        "max": 12,
        "step": 3,
        "default": 3
      },
      {
        "type": "checkbox",
        "id": "show_author",
        "label": "Show author",
        "default": true
      },
    {
        "type": "checkbox",
        "id": "show_date",
        "label": "Show date",
        "default": true
      },
      {
        "type": "select",
        "id": "crop_ratio",
        "label": "Image size",
        "options": [
          {
            "value": "",
            "label": "Natural (no crop)"
          },
          {
            "value": "0.67",
            "label": "Portrait (2:3)"
          },
          {
            "value": "1.0",
            "label": "Square (1:1)"
          },
          {
            "value": "1.33",
            "label": "Landscape (4:3)"
          },
          {
            "value": "1.78",
            "label": "Wide (16:9)"
          }
        ],
        "default": "1.78"
      }
    ],
    "presets": [
      {
        "name": "Blog posts",
        "category": "Blog",
        "settings": {
        }
      }
    ]
  }
{% endschema %}
Reply 1 (1)

Moira
Shopify Staff
2084 227 332

Hey @UNsupplements,

 

The code you provided appears to be correct, and I couldn't find any missing or extra HTML tags. However, the issue might be caused by the content within the `{{ article.content }}` variable.

To troubleshoot this issue, you can try the following steps:

 

  1. Check the content of the blog posts that are causing the formatting issue. Make sure there are no broken or unclosed HTML tags within the content itself.
  2. If the issue persists, try removing the `truncatewords:14` filter from `{{ article.content }}` in the code. This will display the full content of the blog post and help determine if the truncation is causing the formatting problem.
  3. If the formatting issue is resolved by removing the `truncatewords:14` filter, you can experiment with different values or remove the filter altogether based on your desired content length.

 

Remember to back up your theme files before making any changes to ensure you can revert to the previous version if needed!

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog