How to put popular posts links in images?

Hi @giorgos93,

What exactly do you mean with “popular posts links to be in posts thumbnails”?

What is I mean is: I want thumbnails to be clickable. And if someone clicks it, then it redirects to a popular post:

https://c.radikal.ru/c40/2105/9c/929db5903d0c.jpg

Right now I have non-clickable thumbnails and from the right I have a clickable text

I hope I explained it well at this time ??

• This reply was modified 3 years, 6 months ago by George.

Ah, that’s easy enough!

To have the thumbnails be clickable:

1. Go to WP Dashboard > Appearance > Widgets, then click on your Popular Posts widget to access its options.
2. Scroll all the way down to the HTML Markup settings section.
3. Under Post HTML Markup: change {thumb_img} to {thumb} and save changes.

To have links open in a new tab:

1. Go to WP Dashboard > Settings > WordPress Popular Posts > Tools.
2. Scroll down to the Miscellaneous section, then set Open links in: to New tab/window.
3. Click on the Apply button below to save changes.

If you have a caching plugin installed on your site also remember to clear its cache for these changes to take effect.

If you have any other questions don’t hesitate to ask.

Hi, I love your plugin!

Thank you, by the way! Glad you like it!

Thank you very much! It worked!

Oh, and there is one more thing that I want to ask you about:

I want to change opacity of thumbnails when I am hovering them. I already have the code and I tried to put it straight in Cards Compact theme’s css and it worked. But it also changed text opacity in hover.

So is it possible to put css only for images in hover?

Yes, it’s possible. Have a look at this example:

.wpp-cards-compact li .wpp-thumbnail {
    overflow: hidden;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    opacity: 0.5; /* Adjust the initial opacity here */
    margin-right: 1em;
    font-size: 0.8em;
    line-height: 1;
    background: #f0f0f0;
    border: none;
}

.wpp-cards-compact li .wpp-thumbnail:hover {
    opacity: 1; /* Adjust the final opacity here */
}

Important: make sure you don’t change the stylesheet included with the plugin. Otherwise you’ll lose your modifications the next time the plugin gets updated as the update will overwrite all files.

If you want to make style modifications to any of the WPP themes then please follow these instructions instead: Styling the List – Themes.