Twig in SEO Storm - How to set featured image as an OG:image?

According to https://github.com/initbiz/seostorm-plugin/issues/42 and a few other issues posted to the SEO Storm's support page we've decided to describe more verbally how Twig in SEO Storm works.

If you're not familiar with Twig syntax you should probably get used to it and look here (https://docs.octobercms.com/2.x/cms/themes.html#twig-markup-section) for more information.

As you probably know, October CMS lets pages, layouts and components to inject variables to be accessible in the page's markup. Thanks to that frontend developers can use the variables using the Twig syntax without worries about the backend. For example, blogPost component from RainLab.Blog is injecting a post variable to the page making it possible to use something like this in the markup: {{ post.title }} which will display the title of the post here. In the SEO Storm's dynamic fields you can use the same syntax as you would use it on the page.

Sitemap parameters are a completely different pair of shoes then the SEO parameters – setting them on the Sitemap tab won't change a thing in the fields on the other tabs.

SEO Storm automatically integrates with RainLab.Blog plugin, so you have the ability to set the parameters right after installing SEO Storm:

seostorm.png

The screenshot above shows the view of managing post in the backend. It's still not everything you have to do to use the title of the post as a title of the page. If you want to use this parameter, you have to define it on the post.htm page like this:

seostorm2.png

See how powerful it is – you can build any custom logic that you want that includes Twig syntax as well as typical strings: {{ 'index'|page }}, {{ model.meta_title ?: 'Default title'}} {{ post.title }} | inIT.biz October CMS software house

Setting the post's featured_image as OG:image

Let's say that you want to make the first featured image of the post to be used as an OG:image. As you see in the plugin's documentation (https://octobercms.com/plugin/initbiz-seostorm#documentation) under "Dynamic meta tags", the OG:image is listed as a dynamic field. Which means, you can use Twig syntax in the backend for it.

In the easiest form, let's assume that all the posts have at least one featured_image set. In this case we could use {{ post.featured_images[0].path }}:

seostorm3.png

Let's extend this a little bit. Because of the fact that featured_images are fileuploads, we are free to manipulate the image. For example, it's very easy to ask SEO Storm to use a square thumbnail of the featured image for our OG:image with the size of 100px x 100px:

{{ post.featured_images[0].getThumb(100,100,'crop') }}

In the dynamic fields we can set basically everything we want, including conditionals. Let's extend our example even more. What if we don't have any featured image uploaded for the post and still we want to use one that is default for the posts? It's easy!

{{ (post.featured_images[0]) ? post.featured_images[0].getThumb(100,100,'crop') : 'assets/img/post-og.jpg'|theme }}

Which literally means: if there is any featured image set, make a square thumb of it with the size of 100px x 100px but if there's no such image, use the one stored in /themes/.../assets/img/post-og.jpg.

Setting other dynamic fields

It doesn't really matter if we're talking about the OG:image field, or any other dynamic field. All of them can be handled in the same way. We can use basically every variable accessible on the page and build the dynamic field's value using it. In case of problems, remember to ensure that all the variables have to be visible within the page. If it's a typo, twig will omit the expression.

Your details

Let's talk...

inIT has been consistently providing a discreet and professional development service for October CMS users since 2015. We have successfully played major and minor development roles in over 100 October based projects supporting and partnering with clients around the world.

Why not make us a part of your next October development crew.

inIT.biz is a trading name of inIT.biz sp. z o.o., a company registered in Poland (REGON: 367829790, VAT: 8661738221)