Support Letterbox transforms. notably for social sharing (but I'd argue should be the defaut mode...)

[bossanova808]

Without a proper support for fit image, it's basically impossible to use existing image content (e.g. a product's master image) in an appropriate way for social shares - i.e. none of the Craft transform modes produce the desired result of an actual image fit.

Craft, since 4.4, offers a new 'Letterbox' transform mode, that is akin to 'fit image' in most image processing programs, i.e. both the height and width are made to fit within the given bounds.

Craft chooses to pad this image it seems, and for reasons I can't really understand, seems to default to padding with black.

I hacked support into facebook-og-image-partial.twig :

    {% set imageCropModes = {
        "crop": "Crop"|t("seomatic"),
        "fit": "Fit"|t("seomatic"),
        "stretch": "Stretch"|t("seomatic"),
        "letterbox": "Letterbox",
    } %}

This improves things a lot, but needs white padding (by default), possible selectable - and isn't quite all the way there, if the preview is accurate:

'Fit' selected:

'Letterbox' selected - I am unsure why this still gets cropped TBH:

It would be really great to have a solve for this issue, it's been bugging me for years now - every time I see a share of one of our things go past and the image is all messed up, it makes an SEO fairy somewhere fall out of the sky, and die.

[terryupton]

This would be a great addition.

[khalwat]

Understand that this is part on SEOmatic's end, and part on the service's end in terms of how it crops things. But I'll see what I can do!

[khalwat]

Can one of you provide me with an actual original image that you feel isn't cropped the way you want it to be?

[khalwat]

I added Letterbox as a transform method in the above commits. If you can provide me with an image that still isn't quite doing what you want it to be doing, I can go from there to try to tweak things.

Craft CMS 3:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-seomatic": "dev-develop as 3.5.6”,

Then do a composer clear-cache && composer update

…..

Craft CMS 4:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-seomatic": "dev-develop-v4 as 4.1.6”,

Then do a composer clear-cache && composer update

…..

Craft CMS 5:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-seomatic": "dev-develop-v5 as 5.1.6”,

Then do a composer clear-cache && composer update

[bossanova808]

Ok so that works in the control panel (i.e. scales them down to a proper 'fit'). They are still black padded which I find bizarre (why not white?? I suppose that's a Craft issue though?)

I don't suppose there is an easier way than manually going through my 30 odd Content SEO sources and changing those manually from Fit -> Letterbox in the CP is there? That be some tedious clicking...!

Hope you're well Andrew! Thanks for digging up this ancient request...

[khalwat]

Yeah I think it's a Craft thing, I'm not sure if there is a way with Craft to specify what that color should be.

You could write a content migration to change all of the values if you wanted to. Or you could click a lot. :)

[bossanova808]

No worries, I'll click away once you release it!