Search code examples
typo3typo3-10.xtypo3-11.x

How to output og:image (sysext:seo) without cropping or processing?


If you store an Open Graph Image in the page properties, it will automatically be cropped to a ratio of 1.91 / 1 and even if you upload an image in exactly these proportions, it will still be reprocessed (and slightly trimmed).

I have already managed to get the cropping tool to accept a free ratio as the default:

/ext/sitepackage/Configuration/TCA/Overrides/pages.php

<?php
defined('TYPO3') or die();

$GLOBALS['TCA']['pages']['columns']['og_image']['config']['overrideChildTca']['columns']['crop']['config'] = [
    'cropVariants' => [
        'social' => [
            'title' => 'Social media',
            'cropArea' => [
                'x' => '0.0',
                'y' => '0.0',
                'width' => '1.0',
                'height' => '1.0'
            ],
           'allowedAspectRatios' => [
                'NaN' => [
                    'title' => 'Free',
                    'value' => 0.0
                ],
            ],
        ],
    ],
];

This creates the following entry in the database (sys_file_reference , column crop):

{"social":{"cropArea":{"x":0,"y":0,"width":1,"height":1},"selectedRatio":"NaN","focusArea":null}}

That looks fine to me.

Still, TYPO3 does not output my already optimized original image (fileadmin/media/1200x630.png) but one generated by the image processor (/fileadmin/processed/7/a/csm_….png , same pixel dimensions as the original). I have also manually removed the crop entry from the database as a test and still the URL of the original image is not output.

How can I prevent this?

Addendum: I created a bug report


Solution

  • The social images (open graph and twitter) are always processed. see https://github.com/TYPO3/typo3/blob/main/typo3/sysext/seo/Classes/MetaTag/MetaTagGenerator.php#L68.

    You can create your own MetaTagManager for og:image, example is here: https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/MetaTagApi/Index.html#creating-your-own-metatagmanager.

    Don't know if that's a good way as there are special rules regarding dimensions of open graph images, see https://simplified.co/blog/design-hacks/open-graph-image-everything-you-need-to-know/