J3soon J3soon - 1 month ago 13
HTML Question

Blogger show external image thumbnail in popular posts

There is a

Popular Post Widget
provided by Blogger, which can find the popular posts' first image and show it on the sidebar of your blog.

But it can only find images which are directly uploaded to Blogger, it doesn't work on external image links. I'm wondering if there's a way to read the external image by editing its code, maybe in javascript I think...

The default generated code:

<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>


Since there are so many
b:if
and
data:
in the code, I'm not sure if I can treat it as a normal
html
file or not.

Answer

I made a widget below, which can show popular posts' thumbnail by external images. Copy all the code and add it as a widget fixes the problem.

It gets the first image in the posts, both internal images and external images worked well.

Code: GitHub

Comments