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

MODX Cloud NGINX Rule for ssl and www redirect

Replace "domain.com" with your domain. This example uses www as the end point, if you prefer non-www just change the two domain variations around in the first if statement. if ($host = "domain.com") { return 301 $scheme://www.domain.com$request_uri; } if…

PDF From Adobe Illustrator not showing a mask transparency right on macOS Preview or Windows? Here is the fix

So you sent a small preview PDF to the client, it looks great. Then you export the Press Quality version and it looks different, why? Let's dig in.

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.