We considered watermarking the images we shared on our agency website to make them more fancy. When a user shares a post on Facebook, now the image has a small watermark in the top right corner. In our case, it’s the agency logo. How did we do that? It sounds simple, but you need some stuff to complete it.

First, you need to install two plugins for this solution. These two are indispensable for Craft CMS. 

• SEOmatic
• Imager

A third plugin is not essential but is nice to have. You can copy and paste fields and stuff like that from one Craft CMS site to another.

• The Architect

OK, now that you’ve installed the plugins, we‘ve got to start creating some fields that we need. I pasted the architect's exported code here. You can simply paste it into your site with some modifications (naming…), or you can create these fields on your own, as you like. All the paths and naming things are for my installation here. Please check and modify.

The Fields

Global: Logo
This is the logo field where we store the logo that we put later in the layer above the image. 

Single: Image Entry

This is the field that is included in each entry. Maybe you know it from WordPress as the Post Thumbnail. It's nearly the same. An image that describes the entry. 

Now that we have the fields and globals created, you have to assign the Single Image Entry to all the Posts where you need custom share images. Let's take a look at the code…

The Coding Part

First, we check if the Single Image Entry, the default SEO image, and the Global Logo are all defined and filled. If that's the case, we proceed.

Next, we query the Global Logo and set the width and height of the image, and get the URL of this one to save it into the watermarkImage variable. The image creation is made with imager.

The next step is to check the Single Image Entry to see if it's filled, and when this is true, we save it to the image variable. If not, we save the default Seo Image to the image variable. Now, we set this image's width and height, the jpeg quality, and the cropping position. This is also made with imager. Now, we store the URL for this image in our imageEntry variable.

The next step is to merge the two images. Nothing special here. Again, we use an imager to do that. We set our image size and use the watermark function to position our logo above the image. In our case, at the top right corner with a 30px margin to the edges. We also save this URL to a variable:  shareIamge.

The last part checks if the shareImage variable is filled out, and if it's true, we overwrite some of the Seomatic Data. In our case, the og:image, the seoImage, and the twitter image. That's it!

If you did everything right your output is an Image like this:

The Final Code

This code has to be included before you trigger "Seomatic". That's important!

Maybe someone has another (better) approach for this kind of „problem“. Drop me a line. I’m interested in other solutions.