Have you ever wanted to add some consistent branding to your OG (Open Graph) images? We'll show you how we did it using phpthumb and MODX.
Facebook has said in the past to use 1200x630 or 1200x1200 for image sizes. It appears now they recommend a 1:1 square image, but the other aspect ratio still works, this method can work for either.
Test your current website with the Facebook Open Graph Debugger
The process here is pretty simple. We use phpthumb to do simple compositing of a transparent PNG over your normal OG image.
Things you'll need
You'll notice on our overlay PNG we used a white logo with a drop shadow, this is so it would always be readable, no matter what it was on top of. You'll want to make sure to test it against different backgrounds.
Overlay Layout - Use an image editor like Photoshop to experiment with logo positions. If you want a square OG image you'll want to use a square overlay as well.
PhpThumb can do quite a lot more than just simple compositing. See the full documentation for more.
With all of our sites we setup a TV (Template Variable) for Resource Images, it's kind of a catch-all image that represents the resource (MODX term for page, post or node).
We name our core-resource-image .
We uploaded out OG overlay to /assets/images/, you'll see that path in the phpthumb filter below.
In the code block below you'll notice we're using a conditional output filter as well. If your TV name is different, you'll want to update both instances of the TV name.
Note: We had to turn phpthumbof.use_resizer off to get compositing working right.
[[*core-resource-image:notempty=` <meta property="og:image" content="[[++site_url]][[*core-resource-image:pthumb=`h=630&w=1200&zc=1&fltr=over|/assets/images/og-image-overlay.png`]]"></li> `]]
What's Next ?
We're thinking about a way to do article titles in the overlay as well. So far we haven't been able to come up with a way to do it in a way we like. PhpThumb does support text overlay, but not in the way we want yet.
We hope this helps you in some way.