Differences

This shows you the differences between two versions of the page.

--- typo3_cropping_tool [2018/10/18 09:57] – admin
+++ typo3_cropping_tool [2018/10/18 13:15] (current) – admin
@@ Line 1: / Line 1: @@
 ====== TYPO3 Cropping Tool ======
+This covers:
+  * Cropping images for each breakpoint
+  * Cover area for each breakpoint
+  * Focus area/point for each breakpoint
+{{ :typo3:typo3-cropping.mp4?width=1000 |}}
+===== Simple cropping =====
+Override TCA using ''$GLOBALS['TCA']['pages']['types']['1']['columnsOverrides']['media']['config']['overrideChildTca']'' which will change croppig for page type value *1* ''media'' field
+To change cropping do the following:
+<code>
+$GLOBALS['TCA']['pages']['types']['1']['columnsOverrides']['media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [
+    'desktop' => [
+        'title' => 'Desktop',
+        'allowedAspectRatios' => [
+            '21 : 1' => [
+                'title' => '2,1 : 1',
+                'value' => 16/9,
+            ]
+        ]
+    ],
+    'mobile' => [
+        'title' => 'Mobile',
+        'allowedAspectRatios' => [
+            '21 : 1' => [
+                'title' => '4 : 3',
+                'value' => 4/3,
+            ]
+        ]
+    ],
+    .... and so on ...
+];
+</code>
+Complete example with ''coverAreas'' (possible to set multiple) and ''focusArea'' (only one possible) :
 <code php>
@@ Line 6: / Line 47: @@
     'desktop' => [
         'title' => 'Desktop',
+        'focusArea' => [
+            'x' => 1 / 3,
+            'y' => 1 / 3,
+            'width' => 1 / 3,
+            'height' => 1 / 3,
+        ],
         'coverAreas' => [
             [
@@ Line 40: / Line 87: @@
 ];
 </code>

Differences

Page Tools