[TASK] Added default cropping ratio for social media images 74/58774/3
authorRichard Haeser <richard@maxserv.com>
Mon, 29 Oct 2018 08:38:41 +0000 (09:38 +0100)
committerBenni Mack <benni@typo3.org>
Mon, 29 Oct 2018 09:50:54 +0000 (10:50 +0100)
Most of the social networks use the 1.91:1 aspect ratio for images that
belong to the page that is shared.

Now og:image and twitter:image will be rendering an image with a 1.91:1
ratio by default.

Resolves: #86419
Releases: master
Change-Id: Icd3588363f64659f66ba25d4f44a57afff5c1fe1
Reviewed-on: https://review.typo3.org/58774
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Riny van Tiggelen <info@online-gamer.nl>
Tested-by: Riny van Tiggelen <info@online-gamer.nl>
Reviewed-by: Susanne Moog <susanne.moog@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
typo3/sysext/core/Documentation/Changelog/9.3/Feature-85147-RenderSEOMetaTagsInFrontend.rst
typo3/sysext/core/Resources/Private/Language/locallang_wizards.xlf
typo3/sysext/seo/Classes/MetaTag/MetaTagGenerator.php
typo3/sysext/seo/Configuration/TCA/Overrides/pages.php

index 56d577e..5ad5477 100644 (file)
@@ -12,6 +12,8 @@ Description
 The SEO meta tags that can be set in the page properties, are now rendered in frontend by default if the system extension
 SEO is installed.
 
+The og:image and twitter:image will be rendered in the 1.91:1 aspect ratio by default. This ratio is used by most of the
+social networks when showing an image of the shared link. You can also choose a free ratio or add ratio's yourself.
 
 Impact
 ======
@@ -20,4 +22,4 @@ No additional configuration is needed to render these meta tags. If you want to
 the page properties, you can use the replace parameter in TypoScript or in the addProperty method of the specific
 MetaTagManager.
 
-.. index:: Frontend, ext:seo
\ No newline at end of file
+.. index:: Frontend, ext:seo
index 874cc69..3b08a9b 100644 (file)
                        <trans-unit id="imwizard.ratio.1_1">
                                <source>1:1</source>
                        </trans-unit>
+                       <trans-unit id="imwizard.ratio.191_1">
+                               <source>19.1:1</source>
+                       </trans-unit>
                        <trans-unit id="imwizard.ratio.free">
                                <source>Free</source>
                        </trans-unit>
                        <trans-unit id="imwizard.crop_variant.default">
                                <source>Default</source>
                        </trans-unit>
+                       <trans-unit id="imwizard.crop_variant.social">
+                               <source>Social media</source>
+                       </trans-unit>
                        <trans-unit id="imwizard.selection">
                                <source>Selected Size</source>
                        </trans-unit>
index a0b4caa..45da817 100644 (file)
@@ -133,7 +133,7 @@ class MetaTagGenerator
         foreach ($fileReferences as $file) {
             $arguments = $file->getProperties();
             $cropVariantCollection = CropVariantCollection::create((string)$arguments['crop']);
-            $cropVariant = $arguments['cropVariant'] ?: 'default';
+            $cropVariant = $arguments['cropVariant'] ?: 'social';
             $cropArea = $cropVariantCollection->getCropArea($cropVariant);
             $crop = $cropArea->makeAbsoluteBasedOnFile($file);
 
index 4d15c9f..278f430 100644 (file)
@@ -1,6 +1,37 @@
 <?php
 defined('TYPO3_MODE') or die();
 
+$openGraphCropConfiguration = [
+    'config' => [
+        'cropVariants' => [
+            'default' => [
+                'disabled' => true,
+            ],
+            'social' => [
+                'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.crop_variant.social',
+                'coverAreas' => [],
+                'cropArea' => [
+                    'x' => '0.0',
+                    'y' => '0.0',
+                    'width' => '1.0',
+                    'height' => '1.0'
+                ],
+                'allowedAspectRatios' => [
+                    '1.91:1' => [
+                        'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.191_1',
+                        'value' => 1.91 / 1
+                    ],
+                    'NaN' => [
+                        'title' => 'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
+                        'value' => 0.0
+                    ],
+                ],
+                'selectedRatio' => '1.91:1',
+            ],
+        ],
+    ],
+];
+
 $tca = [
     'palettes' => [
         'seo' => [
@@ -132,6 +163,9 @@ $tca = [
                                     --palette--;;filePalette'
                             ]
                         ],
+                        'columns' => [
+                            'crop' => $openGraphCropConfiguration
+                        ]
                     ],
                     'behaviour' => [
                         'allowLanguageSynchronization' => true
@@ -181,6 +215,9 @@ $tca = [
                                     --palette--;;filePalette'
                             ]
                         ],
+                        'columns' => [
+                            'crop' => $openGraphCropConfiguration
+                        ]
                     ],
                     'behaviour' => [
                         'allowLanguageSynchronization' => true