First Link in Blog/Article Messes Up Formatting, Links Random Text Back to Itself in Debut Theme

Solved
MITACJ
Tourist
5 0 1

Hi folks!

I'm running into a problem with the Shopify blog in the Debut theme. We enter in clean text for the blog, but consistently the first link messes up the formatting in the article, and there is a large swath of text that is linked back to the article itself. Whatever code is doing this is NOT in the code view in the blog, and not in the code when I "View Source" of the page.

Example: https://meninthearena.org/blogs/equipping-blog-posts/survival-gear-7-tools-needed-for-the-fatherhood...

Is this something in the liquid somewhere that is causing this?

{% include 'gravityadmin' %}
<div style="display: none !important;  visibility: hidden !important;" class="cmspro-section" id="cmspro-d38ad2c3"></div>
<div class="section-header text-center">
  <h1 class="article__title" id="title-0">{{ article.title }}</h1>
  {% if section.settings.blog_show_author %}
    <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
  {% endif %}

  {% if section.settings.blog_show_date %}
    <span class="article__date">
      {{ article.published_at | time_tag: format: 'date' }}
    </span>
  {% endif %}
</div>
<a href="{{ article.url }}" class="article__link">
            {% if article.image %}
              {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
              {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

              {% include 'image-style', image: article.image, height: 600, wrapper_id: img_wrapper_id, img_id: img_id %}
              <div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
                <div class="article__grid-image-container" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;" data-image-loading-animation>
                  <img id="{{ img_id }}"
                      class="article__grid-image lazyload"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ article.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="">
                </div>
              </div>
              <noscript>
                <div class="article__grid-image-wrapper">
                  {{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
                </div>
              </noscript>
            {% endif %}
<div class="rte">
  {{ article.content }}
</div>

{% if section.settings.show_share_buttons %}
  {% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}



{% schema %}
{
  "name": {
    "cs": "Příspěvky",
    "da": "Opslag",
    "de": "Posts",
    "en": "Posts",
    "es": "Publicaciones",
    "fi": "Julkaisut",
    "fr": "Articles",
    "it": "Articoli",
    "ja": "投稿",
    "ko": "게시물",
    "nb": "Innlegg",
    "nl": "Berichten",
    "pl": "Posty",
    "pt-BR": "Posts",
    "pt-PT": "Publicações",
    "sv": "Inlägg",
    "th": "โพสต์",
    "tr": "Gönderiler",
    "vi": "Bài viết",
    "zh-CN": "文章",
    "zh-TW": "貼文"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "blog_show_author",
      "label": {
        "cs": "Zobrazit autora",
        "da": "Vis forfatter",
        "de": "Autor anzeigen",
        "en": "Show author",
        "es": "Mostrar autor",
        "fi": "Näytä tekijä",
        "fr": "Afficher l'auteur",
        "it": "Mostra autore",
        "ja": "執筆者を表示する",
        "ko": "작성자 표시",
        "nb": "Vis forfatter",
        "nl": "Auteur weergeven",
        "pl": "Pokaż autora",
        "pt-BR": "Exibir autor",
        "pt-PT": "Mostrar autor",
        "sv": "Visa författare",
        "th": "แสดงผู้เขียน",
        "tr": "Yazarı göster",
        "vi": "Hiển thị tác giả",
        "zh-CN": "显示作者",
        "zh-TW": "顯示作者"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "blog_show_date",
      "label": {
        "cs": "Zobrazit datum",
        "da": "Vis dato",
        "de": "Datum anzeigen",
        "en": "Show date",
        "es": "Mostrar fecha",
        "fi": "Näytä päivämäärä",
        "fr": "Afficher la date",
        "it": "Mostra data",
        "ja": "日付を表示する",
        "ko": "날짜 표시",
        "nb": "Vis dato",
        "nl": "Datum weergeven",
        "pl": "Pokaż datę",
        "pt-BR": "Exibir data",
        "pt-PT": "Mostrar data",
        "sv": "Visa datum",
        "th": "แสดงวันที่",
        "tr": "Tarihi göster",
        "vi": "Hiển thị ngày",
        "zh-CN": "显示日期",
        "zh-TW": "顯示日期"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": {
        "cs": "Zobrazit tlačítka pro sdílení na sociálních sítích",
        "da": "Vis knapper til deling på sociale medier",
        "de": "Buttons für Social Media anzeigen",
        "en": "Show social sharing buttons",
        "es": "Mostrar botones para compartir en redes sociales",
        "fi": "Näytä sosiaalisen median jakamispainikkeet",
        "fr": "Afficher les boutons de partage sur les médias sociaux",
        "it": "Mostra i pulsanti per la condivisione sui social",
        "ja": "ソーシャルメディアでの共有ボタンを表示する",
        "ko": "소셜 공유 버튼 표시",
        "nb": "Vis knapper for deling på sosiale medier",
        "nl": "Knoppen voor sociaal delen weergeven",
        "pl": "Pokaż przyciski udostępniania w mediach społecznościowych",
        "pt-BR": "Exibir botões de compartilhamento em redes sociais",
        "pt-PT": "Mostrar botões de partilha nas redes sociais",
        "sv": "Visa knappar för delning i sociala medier",
        "th": "แสดงปุ่มสำหรับแชร์ลงโซเชียล",
        "tr": "Sosyal medya paylaşım düğmelerini göster",
        "vi": "Hiển thị nút chia sẻ qua mạng xã hội",
        "zh-CN": "显示社交分享按钮",
        "zh-TW": "顯示社群分享按鈕"
      },
      "default": true
    }
  ]
}
{% endschema %}


Thank you! 

0 Likes
NerdCurator
Shopify Partner
239 48 75

@MITACJ I would like to see the HTML that you have added in the blog content too. 

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
MITACJ
Tourist
5 0 1
<h3>Wyoming Nights</h3>
<p>Arena Men,</p>
<p>In my daily devotional,<a href="https://meninthearena.org/pages/the-field-guide-a-bathroom-book-for-men"> The Field Guide: A Bathroom Book for Men</a>, “Wyoming Nights” recounts a dangerous night of suffering hypothermia while hunting the high country of Wyoming and needing my body to survive the night. It is an embarrassing—yet memorable—event. Read about it my short story, <a href="https://meninthearena.org/blogs/equipping-blog-posts/california-rodeo-in-wyoming" target="_blank" rel="noopener noreferrer">“California Rodeo in Wyoming</a>.”</p>
<p>From that memorable night in 2001, I learned to carry the proper survival gear needed for every contingency. So often we pack our fears, filling our lives with worthless items, to the neglect of those necessary to be the best father to our children.</p>
<h3>Survival Gear 101</h3>
<p>Kent Evans joined us for the second time on the <a href="https://fz68srtsafgampsx-53140390059.shopifypreview.com/pages/podcast" target="_blank" rel="noopener noreferrer">Men in the Arena Podcast.</a> Ken is the president and founder of <a href="https://manhoodjourney.org/" target="_blank" rel="noopener noreferrer">Manhood Journey</a> whose mission is to provide tools and resources for dads.</p>
<p>In his booklet, <a href="https://manhoodjourney.org/survival-gear/" target="_blank" rel="noopener noreferrer"><em>Survival Gear: 7 Must Have Tools Every Man Needs for His Journey </em></a>Kent wrote, <strong>“</strong>As fathers, we need to know where we <strong>are</strong>, where we are <strong>going,</strong> and then, we need <strong>the tools</strong> and resources to survive the journey. What’s more, we’re taking a family along with us. And, beyond that, we might be mentoring other dads, helping them on their journey.”</p>
<p>Here are the seven tools Kent recommends for Christian men.</p>
<h3>Tool #1: True North</h3>
<p>Kent writes, “If you’re headed down the path of being a Godly dad, you won’t get too far without something guiding your direction. You’re gonna need a true north. Trusting God is the first tool you need in your pack.”</p>
<p>Without a fixed navigational point, you will veer off course. Even one degree over time, leaves you lost and off course. You say you are a “Christian.”</p>
<p>Good.</p>
<p>Are you an active follower of Jesus? Where is he leading you? Grade yourself A-F.</p>
<h3>Tool #2: Know the Bible</h3>
<p>A man once told me, “Jim, my wife is in Bible Study Fellowship. How can I ever know the Bible better than her??</p>
<p>My answer: “You’re man. You need to know the Bible better than anyone in your family.</p>
<p>If you don’t like reading it, listen to it. There are no excuses.</p>
<h3>Tool #3: Pray, Hear, and Listen Often</h3>
<p>Shanna will sometimes say out of frustration, “I know you heard me, but were you <strong>listening</strong>?”</p>
<p>Did you know there was a difference!</p>
<p>Did you also know that Ecclesiastes 5:2 says, <em>“</em><em>Do not be quick with your mouth or impulsive in thought to bring up a matter in the presence of God. For God is in heaven and you are on the earth; therefore let your words be few.”</em></p>
<p>Praying should be one part talking and two parts listening.  What is God saying to you?</p>
<h3>Tool #4: Lock Shields</h3>
<p>Who has your back? Who can you call at 2:00 am in a crisis? We were made to lock shields for a band of brothers.</p>
<p>Who are yours? Do you lack a man who has your back? I have several and my life is <strong>much richer</strong> for it.</p>
<h3>Tool #5: Serve others</h3>
<p>Ephesians 2:10 says,<strong><em><sup> “</sup></em></strong><em>For we are His workmanship, created in Christ Jesus for good works, which God prepared beforehand so that we would <strong>walk</strong> in them.”            </em></p>
<p>When we serve out of duty, we’re doing it begrudgingly. We do it because we have to. When we’re serving from a place of devotion, we’re serving because we care about the other person. We do it because we choose to. When we serve from a heart of delight, we’re looking forward to serving. We do it because we get too.</p>
<p>We are saved to serve. God created us for display on the arena floor, not the anonymous bleachers.</p>
<h3>Tool #6: Steward Your Life</h3>
<p>The Godly dad understands everything he has is not his own. His money, time, family, possessions, influence are all gifts that must be stewarded well.</p>
<p>Spend your life well. Leave nothing on the arena of life.</p>
<p>The greatest tragedy is when a man breathes his last and departs the great arena called life with fight left in him.</p>
<p>You have one life to live. Spend it wisely.</p>
<h3>Tool #7: Bring Them with You</h3>
<p>Your legacy is in those rooms next to you. It is your sons and daughters. It is your grandchildren. Do not leave them behind.</p>
<p>Strategically and spiritually disciple your children beyond deferring your leadership to your pastor and local church.</p>
<p>Why?</p>
<p>Because you are better than that. </p>
<h2>Boots on the Ground</h2>
<p>Take the time to listen to <a href="https://meninthearena.org/blogs/equipping-blog-posts/survival-gear-7-tools-needed-for-the-fatherhood-adventure" target="_blank" rel="noopener noreferrer">our interview with Kent</a> about being better dads.</p>
<p>Becoming His Best Version,</p>
<p>Jim</p>
<ul>
<li><strong>Subscribe</strong> to the Men in the Arena Podcast and <a href="https://podcasts.apple.com/us/podcast/men-in-the-arena-podcast/id1144237071" target="_blank" rel="noopener noreferrer">join </a>men from 122 nations who are becoming their best version.</li>
<li><strong>Engage </strong>on our <a href="https://www.facebook.com/groups/144084032765210" target="_blank" rel="noopener noreferrer">Facebook Forum</a> with 10,000 men in lively conversations about everything related to manhood.</li>
</ul>
0 Likes
MITACJ
Tourist
5 0 1

@NerdCurator Sorry, forgot to tag you. The blog post content is in my other reply. 

0 Likes
Jason
Shopify Expert
10292 145 1946

This is an accepted solution.

You're not closing the anchor tag (so it's missing the closing </a> tag) that surrounds the blog image.

I would expect to see something more like this:

 

<a href="{{ article.url }}" class="article__link">
      {% if article.image %}
            ... existing code, truncated for smaller forum post size.
      {% endif %}
</a>

<div class="rte">
      {{ article.content }}
</div>

 

Though I would also prob move the anchor to within that conditional statement so you don't end up with an empty link in the times that you don't have an image. eg.

{% if article.image %}
    <a href="{{ article.url }}" class="article__link">
            ... existing code, truncated for smaller forum post size.
    </a>
{% endif %}

<div class="rte">
      {{ article.content }}
</div>

 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
MITACJ
Tourist
5 0 1

THAT DID IT! Sharp eyes! Thanks so much for your help. That has been driving me bonkers!!