While I was updating my site stacksweavers.com, I was using the Facebook Sharing Debugger to test how my stack Cloudflare Dev Tools would share on Facebook. This is what I saw..
Why did I get this cropped image? Well its because I was using the %blogImage()% macro in my SEO settings for the image field. The issue is however, I want to have a properly formatted image to use in this spot, but my blog image (icon) is not formatted to the right aspect ratio (1200 x 630 in case you are wondering), but I don't have any image that is useful from my blog image or gallery.
Now I could update my logo for this stack to be those dimensions, but I would rather have something custom for sharing on social media.
Since all those images are useless what are my options?
Option 1 - The simple way
I could easily hard code an image for use on all the blog posts for sharing on Facebook/social media.
Pros - It is the same image for all stacks (blog posts) I make in the future - yay
Cons - It is the same image for all stacks (blog posts) I make in the future - but ewww
Option 2 - Dynamic Image from Depot
Since the %blogImage()% won't be useful for use in the Facebook/social media share image, and neither is any of the gallery images, we can use TCMS Depot to load an image for us.
How do we do this?
First we create a depot and add it to our admin area. Now understand that the cms id of the depot will show in your image url, so use something that would help with your SEO. In my case, it would be the word stacksbecause my products will be a stack.
After publishing my admin page, we now have the depot, and it's time to upload our new social share image. However, before you upload, to make the magic of macros work, we need to make sure the image is named the same as our blog permalink. My blog permalink for my stack on https://stacksweaver.com/stacks/cloudflare-dev-tools is cloudflare-dev-tools so I have named my image cloudflare-dev-tools.png
After uploading my image to the depot, you can hover the image on your depot and get the link.
Now that we have the link from depot, its time to convert it to a macro enhanced link for use in SEO Helper.
You will see here that we leveraged the %blogPermalink()% macro to fill in the name of the depot image in the link %base_url%cms-data/depot/stacks/%blogPermalink()%.png. This has made this link dynamic because the blog permalink will be filled in with my product name.
In the future, when I create a new stack (blog post), all I have to do is make sure that the blog permalink is used in the name of the png image that I upload to the depot.
Now that I have the converted dynamic link, I can inject this on my blog post page in all the image fields in SEO Helper. This will then look for the image in the depot named with the blog permalink.
After publishing, I test again on Facebook's Sharing Debugger, and I now have a properly formatted social media share image.
I hope this helps you come up with interesting ways to use blog macros. If you ever need help just reach out here on the forum and someone will get you rolling.
If you don't have SEO Helper you really need to check it out. It will make your SEO goals easier to achieve, especially if you use TCMS.