How to show 'showItemThumbnail' in the widget Feed of Blogger?

user_10841721 0
Viewed 472

I am looking for an image that accompanies the titles of the publication in the widget Feed, in Blogger. It does not appear among the options of the widget, but I saw that there is a property that allows it (showItemThumbnail, with the true and false values). I added it, but I can not see anything. Any suggestions, or if it can be done with javascript? I want to show the contents by "tags", with their image and title. I leave the code and an image of what I'm looking. Thank you very much!

 <b:widget id='Feed1' locked='false' title='' type='Feed'>
<b:widget-settings>
  <b:widget-setting name='feedUrl'>https://werplantillas.blogspot.com/feeds/posts/default</b:widget-setting>
  <b:widget-setting name='openLinksInNewWindow'>true</b:widget-setting>
  <b:widget-setting name='numItemsShow'>3</b:widget-setting>
  <b:widget-setting name='showItemDate'>false</b:widget-setting>
  <b:widget-setting name='showItemAuthor'>false</b:widget-setting>
<b:widget-setting name='showItemThumbnail'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
  <span style='filter: alpha(25); opacity: 0.25;'>
    <a expr:href='data:feedUrl'><data:loadingMsg/></a>
  </span>
</div>
<b:include name='quickedit'/>

I look for these two styles.

Style 1

Style 2

blogger css html javascript
1 Answers

Blogger feed widget doesn't support Thumbnails but you can tweak your own widget using JavaScript and Blogger json feed as the following

<div id="container"></div>

<script>
//<![CDATA[
function getPosts(json) {
 var posts = "";
 for (var i = 0; i < json.feed.entry.length; i++) {
  var title = json.feed.entry[i].title.$t;
  var url = json.feed.entry[i].link.pop().href;
  var thumbnail = json.feed.entry[i].media$thumbnail.url;
  posts += "<div><a href='" + url + "'><img src='" + thumbnail + "'>" + title + "</a></div>";
 }
 document.getElementById('container').innerHTML = posts;
}
//]]>
</script>

<script src="https://werplantillas.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=getPosts&amp;max-results=5"></script>

To set number of posts change max-result parameter.

To show posts by label (tags) use this url https://werplantillas.blogspot.com/feeds/posts/default/-/LabelName?alt=json-in-script&amp;callback=getPosts&amp;max-results=5

Admin1
Related