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.

Categories

Recent Posts

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…

Caller – "Hi I'd like to help you update your Google listing"

Heard this before? Yeah me too. at least once a month a nice friendly voice claiming to be from Google calls me wanting help me update my Google listing.

MODx Plugin for Resource Redirecting

We had a client want to have two methods of accessing a page. The normal long URL was fine, but they also wanted a very short one to use over the phone or in text.