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



  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

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

  • Matias Fineschi

    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 

  • Matias Fineschi

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


  • Amy Gracer
    Community Moderator

    Your link goes to a page not found.

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

  • Matias Fineschi

    Hi there, 

    This link should work 

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

    Something like this:


  • Matias Fineschi

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


  • Amy Gracer
    Community Moderator

    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!


  • Nicole Gogel

    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.

  • Trapta Singh
    Community Moderator

    Hi @...,

    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}}">

    {{#if internal}}
    <svg xmlns="" 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"/>
    <div class="promoted-article-content">{{excerpt body characters=100}}</div>
    <div class="promoted-article-body" style="display: none;">{{body}}</div>
    var elem = document.getElementsByClassName("promoted-article-body");
    for (var i = 0; i < elem.length; i++) {
    var imgTag = elem[i].getElementsByTagName('img');
    if (imgTag.length) {

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



Please sign in to leave a comment.

Powered by Zendesk