Can I add a thumbnail to the articles and article previews?

You want to show the article thumbnail on which template as a preview? Can you explain more about it?

Currently, on our guide, there are no thumbnails on the articles. I would like these to show when in a list. Especially on the promoted articles on the home page. This is a link to our guide https://help.pokitmeter.com/hc/en-us 

Hi there just commenting again to see where you were at with this?

Your link goes to a page not found.

Can you share an example of what you are looking for?

Hi there, 

This link should work https://help.pokitmeter.com/hc/en-us 

I would like the articles on the guide to have thumbnails that can be self populated on the promoted articles page. 

Something like this:

HI just commenting again to see where we were at with this?

Hi Matias,

Personally, I do not know of a way to self populate thumbnail images. It would be pretty cool though, so I'm following in case someone else does!

I'm curious about this functionality too. Nothing fancy, just thumbnails.

As a side note, it was a bit frustrating to see this thread go from asking about adding thumbnails to a  back and forth that the OP had to follow up on a few times only to get a shrug as a response.

Hi @Nicole Gogel,

I tried playing around with promoted articles a bit and come up with this rough code. This code will basically show any first image from your article content as the thumbnail for the article.

Try giving it a shot and let me know how it goes for you.

{{#if promoted_articles}}
      <section class="articles">
        <h2>{{t 'promoted_articles'}}</h2>
        <ul class="article-list promoted-articles">
          {{#each promoted_articles}}
            <li class="promoted-articles-item">
                <a href="{{url}}">
                  {{title}}

                  {{#if internal}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
                      <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                      <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
                    </svg>
                  {{/if}}
                </a>
                <div class="promoted-article-content">{{excerpt body characters=100}}</div>
                <div class="promoted-article-body" style="display: none;">{{body}}</div>
            </li>
          {{/each}}
          <script>
            var elem = document.getElementsByClassName("promoted-article-body");
            for (var i = 0; i < elem.length; i++) {
              var imgTag = elem[i].getElementsByTagName('img');
              if (imgTag.length) {
                elem[i].parentElement.prepend(imgTag[0]); 
              }
            }
          </script>
        </ul>
      </section>
    {{/if}}

You can see the working example here. I hope the above solution will make the thread a bit less frustrating ;)

Thanks