Popular posts always with thumbnails.

Since it is one of the most useful things You can use, the Popular Posts gadget provides You a great opportunity to be creative in composing a way it will be presented to Your Guests. It can take various forms, up to Your imagination - here are few examples I chose:

In theory it's good to have articles' thumbnails, titles and excerpts to tailor some good composition out of these - but not always You have the certainty that each post will be equipped with images (on the base of which thumbnails are created). So in case there is no image in the post - Your carefully designed composition would be disturbed. Fortunately there are several workarounds to give you the certainty mentioned above :) . Which one You'll choose depends on which technology You feel most comfortable working with. You also need to have an image which You will use as a default thumbnail (in case of articles with no images). The default thumbnail should be the same size (width & height) as current thumbnails used in Popular Posts gadget. Let's see:

 

I. CSS-based.
Short outline: find out which Popular Posts' element encloses single thumbnails and then ascribe a background to it.

 

II. jQuery-based.
Short outline: detect the Popular Post item without an image and then append a default thumbnail to it.

 

III. Blogger template only.
Short outline: put a default image to Popular Posts in case there is no image in the particular article.

 

As a curiosity: if You're all right with all of these approaches You would consider which one is the best (or is there any significant difference at all?) I'd say that editing the template itself would work the best because:

1. The template's native syntax is rendered in the very first place (before jQuery and CSS commands) - so it should work smoother.
2. In terms of semantics I think the Popular Posts gadget mechanics would be the most appropriate one (and also superior in comparison with CSS) - to handle 'no images inside the post' condition.

 

Let's have a closer look on how all those methods work:

 

I. CSS-based.
Suppose You already use the Popular Posts gadget (including posts' thumbnails) on Your site. It would be also very useful If You already know CSS - if not yet, then give this instruction a chance, fingers crossed :) !

1. In Chrome right click one of the Popular Posts' thumbnail and choose "Inspect".
2. A new window should emerge. It is generally filled with code - note that one particular part is highlighted. It should be part beginning with "<img".
3. Right above this part You should see a line beginning with "<a href" - and then above this one You should see a line beginning with "<div class="name">.
4. Copy the class name - it could be "item-thumbnail" or something else.
5. Log in into Your Blogger dashboard, go to the "Layout" section (on the left), then find and click a link called "Theme Designer" (within the sentence "Add, remove, edit gadgets on your blog. Click and drag to rearrange gadgets. To change columns and widths, use the Theme Designer.").
6. In Theme Designer choose "Advanced" (on the left), then scroll the list to the bottom and click "Add CSS".
7. Paste the following code into the field. If it's not empty, then paste it into the very end of its content - after that just click "Apply to Blog" (on the top right).

#PopularPosts1 .item-thumbnail
{
Your CSS commands;
}

/* (remember what is the class name in Your case - and if differs - replace "item-thumbnail" with it) */

- or, if there wasn't a line beginning with "<div" (see the steps 3 to 5 in the instruction above), but a sole "<span":

#PopularPosts1 span
{
Your CSS commands;
}

You'll probably use commands like:

/* here You define Your default thumbnail's location: */

background-image: url(http://PathToTheDefaultThumbnailImage.jpg);

/* here You can refine background's position; values are example; the first value is the horizontal position and the second value is the vertical - note that You can use negative numbers: */

background-position: -11px 36px;

/* there is no need to repeat the default thumbnail image within a single item, so: */

background-repeat: no-repeat;

A curiosity for Code-Lovers :)
It's probable that soon with CSS we will be able to use so-called "The Relational Pseudo-class :has()" - sounds familiar :) ? So far in order to benefit from this awesome thing I needed to use jQuery. To have it inside the very CSS... it would be wonderful :) .

 

II. jQuery-based.
I recommend this method only in case You don't feel comfortable enough to edit the actual template itself.

In this case using jQuery You have much more flexibility than with a CSS only. But You need to do a careful "back-engineering" - having a closer look on how exactly the Popular Posts gadget is composed in Your site's case - being more precise: You need to know what "box" (HTML element) is meant to contain a post's thumbnail - and what is placed just next to it (all those informations will serve You as reference points to compose proper jQuery code). To find this out we'll use Chrome DevTools:

1. In Chrome right click one of the Popular Posts' thumbnail and choose "Inspect".
2. A new window should emerge. It is generally filled with code - note that one particular part is highlighted. It should be part beginning with "<img".
3. Right above this part You should see a line beginning with "<a href" - and then above this one You should see a line beginning with "<div class="name">. Note that name (it could be, for example, "item-thumbnail").
4. You've probably noticed that those lines of code are hierarchical in nature. Go one more step further, finding out what is above the div which name You've just noted. In My case there is a div with class named "item-content".
5. Note that this div may contain several others. Find out what div is placed right next to the "item-thumbnail" mentioned before. In My case it's a div with a class named "item-title".

Now You have everything You need to construct properly tailored jQuery code. First let's summarize what emerges out of our examination:

1. There is "a parent box" (div) called "item-content" (in My case).
2. This parent box contains smaller boxes, i.a. "item-thumbnail" (for posts' thumbnails).
3. A thumbnail box is followed by the "item-title" box (for posts' titles).

Now, imagine that one particular post displayed in Popular Posts gadget does not have a thumbnail. In this case the first element inside a parent box "item-content" will be the "item-title". If a post has a thumbnail, the first element here should be the "item-thumbnail".

What You need to do is simply to fill the gap - by inserting missing "item-thumbnail" elements (divs) right in place where they usually are used to be. Thinking in terms of jQuery You need to write code which detects a parent element without an image (thumbnail) - and puts a default image right in place. Following our example the code could be like this:

$('#PopularPosts1 .item-content').not(":has(img)").each(function() {
$( ".item-title", this ).before( "<div class='item-thumbnail'><img src='http://thePathtoYourDefaultThumbnailImage.jpg' /></div>" );
});

In other words: if item-content has no images - then put a traditional "image box" (item-thumbnail' containing Your default thumbnail image) right before item-title.

Now last thing You need is to place that code into a HTML/JavaScript gadget in which You're collecting all jQuery instructions. See how to create it here.

 

III. Blogger template only.
Last but not least - the easiest way of all (provided You are fine with Blogger template editing). This method consists on "teaching the Popular Posts gadget" what to do if there is no thumbnail attached to the article.

1. Log in into Your Blogger dashboard and enter the Theme section (on the left).
2. Click "Edit HTML" button under Your layout preview ("Live on Blog").
3. Click anywhere in the big field filled with code, choose CTRL+A from the keyboard, then CTRL+C.
4. Open the notepad or another text editor You use and paste the code there (CTRL+V).
5. Find the code making up the Popular Posts gadget - an easy way could be by find command (usually CTRL+F) and search for a phrase "PopularPosts1".

This gadget can be composed in a variety of ways (it depends on the template You chose for Your site) - so unfortunately there is no guarantee for an universal method, but if You are all right with template editing, then I think You will managed this well :) .

1. Find an img tag - it should be enclosed somewhere between lines beginning with "<b:if..." and "</b:if>". In My case it looks like this:

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

2. Now past this code just next to the above one:

<b:else/>
<img src='http://thePathToYourDefaultThumbnailImage.png' />

3. Select and copy all the code (CTRL+A, CTRL+C) - go back to the web-browser window and replace the current content of the template editing field with the new one (CTRL+A, then Delete, then CTRL+V).
4. Confirm by clicking "Save theme" button.