OG Image Branding with phpThumb and MODX

Wave 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.

The Setup

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 .

Installation

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.

Recent Posts

Improving MODX Page Speed for Google

Your website speed is impacting your bottom line , here are a few ways to improve it through browser caching, asynchronous loading of resources and other tips and tricks.

The Status of Liquid Web Cloud Sites Formerly of Rackspace in 2018

We've been a cloudsites customer since our inception, it's had ups and downs, here is what we think about it now.

Photography for the web

Did someone send you this link? First: Know that it is meant only as a guide. It's not that you can't shoot great photos, this is just to help you capture the best photography possible to be used in marketing. Photos…