[Support request] How to create an Image overlay

[Bradley]

Hello,

I would like to create an overlay in the upper left hand corner of each post’s featured image thumbnail in the blog of a site. I don’t want it to render on full post pages. Is there an easy way to do this?

[Tom]

Any examples of what you’re trying to accomplish exactly?

[Bradley]

Sure, pretty simple I think it’s the red boxes in the upper left hand corner of the thumbnails on this site. You have seen it before: http://http://www.omgubuntu.co.uk/ .

Brad

[Tom]

Placing the box there could be quite simple using pseudo selectors, but including the category name is actually quite difficult.

What are you hoping to add inside the box?

[Bradley]

I just want the name of the category that the post is associated with. I should say primary category.

This guy explains a little about it but I don’t grok the part where is using setting the image to full size than resetting the image size to the one he wants in his media folder. It defeats the whole css of the site.

http://wplift.com/ He’s creating an overlay with author title etc and overlaying it onto his thumbs. I just want primary category in a small orange rectabgle in the upper left like omgubumtu has in thiers.

Here is where he explains how he is doing it… http://wplift.com/how-add-text-featured-images-different-scenarios I am just not getting it. Seems complicated. WordPress was made for things like this……

[Tom]

The trouble with this is you would need to insert the category name into the container with the image itself.

In order to do that, you would need to overwrite the post image function, or I would need to add a hook into the image container (might be a good idea anyways).

I know this type of thing is possible with my WP Show Posts plugin: https://wordpress.org/support/topic/placing-post_tag-on-the-top-of-image/

I’ll look into adding a hook inside the post image container as well in GP.

[Bradley]

Cool I think this show post plugin is exactly what I have been looking for as I want a little more control by using a static page instead of the actual blog on http://planetproxmox.com not much content yet. I also would like to move the logo to the left. I am sure you have done that a thousand times….

Brad

[Bradley]

Will that plugin work with elementor columns and rows?

[Tom]

Absolutely it will 🙂

[Zach]

+1 for a hook in GP so it would be easier to modify the featured image function in the blog. Or it would make a great GP Premium feature in the customizer (would take some reorganizing of the featured image and content sections of the customizer, but it would be sooooo convenient)

[Leo]

Are you looking for ways to have the post title on the featured images?

If the new page header addon can do just that 🙂

Check it out here: https://vimeo.com/223381628

In should be released in the next couple days but if you want to test it out then you can become a beta tester: https://docs.generatepress.com/article/beta-testing/

[Zach]

That looks amazing for Page Headers. Looking forward to the release.

My goal is just to put title, etc. over the featured image on the blog list (and archives), not the header. I display as a 3-column grid and it would look so nice to have text overlays instead of that info being before/after the image.

[Tom]

Tough question! Can you show me what you have so far?

[Zach]

I haven’t started hacking yet, but will update when I have something. I’m using this as a guide:
https://wplift.com/how-add-text-featured-images-different-scenarios

[Author]

Posts