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

9 Commentaires

  • Ifra Saqlain
    Community Moderator

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

    0
  • 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 https://help.pokitmeter.com/hc/en-us 

    0
  • Matias Fineschi

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

     

    0
  • Amy Gracer
    Community Moderator

    Your link goes to a page not found.

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

    0
  • Matias Fineschi

    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:

     

    0
  • Matias Fineschi

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

     

    0
  • 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!

     

    0
  • 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.

    0
  • Trapta
    Community Moderator

    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

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk