drupaloid is brought to you by Rudá Maia

Rudá Maia

Generate social media og image using Node Title

08/10/2019 - Writen at drupaloid local Drupal installation.

Every time I think about a cool feature to this blog it automatically turns into a new post. How good is that?
Now, actually, you can use any information from the Site you want in your og:image, let's do this.

First things first. You gotta know that those images should be 1200x630 for high quality output, and, of course, you need a image template to work on top of.
I'm assuming that you already know how to use the Metatag module to configure all the other needed meta tags.

  1. Create a high quality 1600x630 image like this one:
  2. We want to automatically generate this image to say, every new article in our Site. We need this image to be the default image of our field to be, so, set up this image as default image of your field "field_og_image" in your Article content type.
  3. Pick a font you would like to use in this image, I am using Lato from Google Fonts. Download the regular or bold one and put it inside a folder called fonts as follow "sites/default/files/fonts/Lato-Bold.ttf" .
  4. Enable the module Textimage, go to "/admin/config/media/textimage", and configure the path the same way:
  5. We configure the global path just to be sure because We need to configure it later inside the image style config  as well.
  6. Create a new image style under "/admin/config/media/image-styles" called "og:image Article" and let's finally get to work, add a new effect Text overlay.
  7. The configuration possibilities are endless, so, I am going just to leave a couple screenshots on how I did mine:

  8. Now that you have set everything up, it's time for the last touch. Edit your Content Type Article Display, and make sure the format is set to "Textimage":
  9. You can also hide this field in your Form Display as you wont need to change it when adding or editing a new node.

Configure your Metatag module to output the Article Title, the image width, height, and whatever other information you want to cover as meta tags. Don't try to output this image field URL into your og:image yet, I can explain!

Now you should be able to see the generated image in your Article, but, there is a Catch! The Metatag module will not retrieve this image URL as a Token because this image doesn't really exist, it is a default image, remember?

We can do this through customization in the Theme but it I'm going to cover it in another post. Leave a comment if you want me to write this next one asap.

Read more