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

Next revision		Previous revision
typo3_cropping_tool [2018/10/18 09:03] – created admintypo3_cropping_tool [2018/10/18 13:15] (current) – admin
Line 1: Line 1:
 ====== TYPO3 Cropping Tool ====== ====== 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>
 +$GLOBALS['TCA']['pages']['types']['1']['columnsOverrides']['media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [
 +    'desktop' => [
 +        'title' => 'Desktop',
 +        'focusArea' => [
 +            'x' => 1 / 3,
 +            'y' => 1 / 3,
 +            'width' => 1 / 3,
 +            'height' => 1 / 3,
 +        ],
 +        'coverAreas' => [
 +            [
 +                'x' => 0,
 +                'y' => 0.7,
 +                'width' => 0.4,
 +                'height' => 0.3,
 +            ]
 +        ],
 +        'allowedAspectRatios' => [
 +            '21 : 1' => [
 +                'title' => '2,1 : 1',
 +                'value' => 16/9,
 +            ]
 +        ]
 +    ],
 +    'mobile' => [
 +        'title' => 'mobile',
 +        'coverAreas' => [
 +            [
 +                'x' => 0.6,
 +                'y' => 0,
 +                'width' => 0.4,
 +                'height' => 0.3,
 +            ]
 +        ],
 +        'allowedAspectRatios' => [
 +            '21 : 1' => [
 +                'title' => '2,1 : 1',
 +                'value' => 16/9,
 +            ]
 +        ]
 +    ],
 +];
 +</code>
  
typo3_cropping_tool.1539853394.txt.gz · Last modified: 2018/10/18 09:03 by admin

Page Tools