Add image overlay to featured image?

The simplest way, if you don’t have too many products , is for you to create two images, ones for WP featured image and the other for social media with the the overlay.

The you need to code it so the social media pics up the alternate image.

e.g. for facebook

og:image:width
og:image:height
og:image:alt
og:image:type

for twitter

meta name=”twitter:image”

The more complex way would be to dynamically generate the overlay image and then store it and then specify the social meta tags.

How you would do that may be made easier if your original images are defined SVG as SVG is a markup so generation is simplified ( but not simple )
alternatively you could render html and then use an html to img library

https://github.com/topics/html-to-image

Extremely helpful reply @alanfuller thank you.

Yes, there are a lot of posts each day, so the first option you suggest, of creating 2 different images, would become a little overwhelming.

And I’m not sure I would be able to convert all images to svgs — the majority of them are jpgs and I would then have to find some automated way of doing that.

Is there any way that images could be converted to svgs within the WP ecosystem?
(Again, via a plugin or addon script)

I’m not sure if, in your last paragraph, you are saying that using svgs vs html-to-img are the only remaining alternatives?

Could html-to-img be done within a WP site? (I know a couple of services that provide that via Zapier (etc) on a monthly sub)

Thanks again for your very helpful response, it’s quite surprised me!

Just to note, this is the ‘developing forum’ rather than ‘what plugin forum’ which is the ‘fixing wordpress forum’ so the people who frequent here will give more technical solutions rather than plugin answers.

In terms of other options it would also be technically possible to code the overlay combined image using pdf and then converting the pdf to a jpg.

None of these ( that I am suggesting ) are simple integration tasks but what I would class as heavy duty custom coding.

Thanks again @alanfuller

Yes, when I write ‘plugin’ I’m actually meaning ‘custom-built plugin’ and I’m not thinking there might already be one I can get hold of off-the-shelf.

And, yes, I assumed that any potential solution would require some deep custom coding, but thanks for the clarification.

To be honest, I wasnt’ even sure if this would be possible, within a site, without going to a 3rd party SAAS or running a separate installation to do this. But maybe that’s what you mean too.

I guess it wouldn’t matter, though, either way. I have a decent (dedicated) server so I could probably host a solution either within the site installation or as a separate thing.

Thanks again for your help — it’s given me a lot of food for thought.

If you know any other libraries or resources I could check out, I’d appreciate that too — but you’ve already given me a lot more useful feedback than I expected. So thanks again.

EDIT: The 3rd party solution I referred to was bannerbear ( https://www bannerbear com ), which is kind of what got me thinking this way. Although their sub is a bit pricey for me and I would have to create automations to send to it, then import from it, which would themselves be quite extensive, so doing it inhouse seems like a better approach, if it’s possible.

• This reply was modified 2 years, 10 months ago by phil2016.

Yes I think you could do it yourself on server without going to a third party.

Although if there is a good third party with an API that is economic that might be a better way ( as in cleaner / more cost effective / less maintenance ), then can set a background job to make the calls and ‘media sideload’ the generated images.

I just sent a contact through your site, as there doesn’t seem to be a DM function here.

Just looked at that service and it seems pretty neat and has ondemand image generation by url, all you would need them is the code to generate the correct open graph meta for social media.

Integrating that service is definitely do able with a lot smaller amount of custom code.

Yes, but for my usage I would need the ‘Scale’ package, which is $149 per month and therefore way outside my price range, sadyly.

That is your decision, I can’t even start to estimate the development cost of your on server solution, but once you have estimated the cost of development and maintenance at least you have a comparison.

But at a guess if $149 / month is outside your price range I suspect a custom solution would be too.

However that is not really WordPress support so I’ll leave that thought there.