icons on the post thumbnails

  • Resolved reti

    (@reti)


    6 years, 5 months ago

    Hi,

    Does anyone know any clever way of sticking icons to the post thumbnails? I have different types of posts on my blog (article, audio, photo, video, gallery, etc.) and would like to mark them with icons. I installed the “Custom Post Type UI” plugin and created various taxonomies, i.a. “Post type”, which contains e.g. books. I would like each post thumbnail with post type = “Book” to have by me selected icon. How to do it easiest?

    Regards,
    Reti

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    6 years, 5 months ago

    I have to believe some custom CSS and conditional output would be best for you.

    Borrowing heavily from googled images here.

    Markup:

    <div id="one">
  <div class="icon icon-foo"></div>
  <img src="http://i.ytimg.com/vi/kxMbTwEJbDU/hqdefault.jpg" />
  </div>
 
</div>
<div id="two">
  <div class="icon icon-bar"></div>
  <img src="http://i.ytimg.com/vi/kxMbTwEJbDU/hqdefault.jpg" />
</div>

    Styles

    .icon-foo {
  background: url('http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/256/Cute-Ball-Go-icon.png') 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  height: 150px;
  width:150px;
}

.icon-bar {
  background: url('https://image.flaticon.com/icons/svg/579/579787.svg') 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  height: 150px;
  width:150px;
}

    Overall preview:

    https://cloudup.com/cuqjSmdjvnX

    The suffix for the .icon- classes could be which post type it is, and with each version intended defined in your css, it would conditionally match up like needed.

    Thread Starter reti

    (@reti)

    6 years, 5 months ago

    Thank you. It’s very interesting solution.

    • This reply was modified 6 years, 5 months ago by reti.
    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    6 years, 5 months ago

    @reti just an idea of how you could potentially go about this, it’s by no means the *only* way to achieve this. See what you come up with and get creative.

    Thread Starter reti

    (@reti)

    6 years, 5 months ago

    This could be helpfull too: https://www.wpbeginner.com/plugins/how-to-add-thumbnails-for-youtube-videos-in-wordpress/

    • This reply was modified 6 years, 5 months ago by reti.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘icons on the post thumbnails’ is closed to new replies.