knallimall.org knallimall.org

User Tools

Site Tools

typo3_cropping_tool

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
typo3_cropping_tool [2018/10/18 11:57] – admintypo3_cropping_tool [2018/10/18 14:12] – admin
Line 1: Line 1:
 ====== TYPO3 Cropping Tool ====== ====== TYPO3 Cropping Tool ======
  
 +This Tutorial 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> <code php>
Line 6: Line 47:
     'desktop' => [     'desktop' => [
         'title' => 'Desktop',         'title' => 'Desktop',
 +        'focusArea' => [
 +            'x' => 1 / 3,
 +            'y' => 1 / 3,
 +            'width' => 1 / 3,
 +            'height' => 1 / 3,
 +        ],
         'coverAreas' => [         'coverAreas' => [
             [             [
Line 40: Line 87:
 ]; ];
 </code> </code>
 +
typo3_cropping_tool.txt · Last modified: 2018/10/18 15:15 by admin

Page Tools