Add crop variants for content slider images

This commit is contained in:
Björn Fromme
2018-09-24 14:58:40 +02:00
parent 67c8d839fd
commit 8099436bb0
6 changed files with 138 additions and 8 deletions
@@ -332,7 +332,7 @@ return [
], ],
'images' => [ 'images' => [
'exclude' => 0, 'exclude' => 0,
'label' => 'LLL:EXT:ep_products/Resources/Private/Language/locallang.xlf:tx_epproducts_domain_model_city.images', 'label' => 'Galeriebilder',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig( 'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'images', 'images',
[ [
@@ -347,6 +347,32 @@ return [
--palette--;;filePalette', --palette--;;filePalette',
], ],
], ],
'columns' => [
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'title' => 'Preview',
'allowedAspectRatios' => [
'preview' => [
'title' => 'Standard',
'value' => 1.8,
],
],
],
'zoom' => [
'title' => 'Zoom',
'allowedAspectRatios' => [
'free' => [
'title' => 'frei',
'value' => 'NaN',
],
],
],
],
],
],
],
], ],
'maxitems' => 10 'maxitems' => 10
], ],
@@ -329,7 +329,7 @@ return [
], ],
'images' => [ 'images' => [
'exclude' => 0, 'exclude' => 0,
'label' => 'LLL:EXT:ep_products/Resources/Private/Language/locallang.xlf:tx_epproducts_domain_model_country.images', 'label' => 'Galeriebilder',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig( 'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'images', 'images',
[ [
@@ -344,6 +344,32 @@ return [
--palette--;;filePalette', --palette--;;filePalette',
], ],
], ],
'columns' => [
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'title' => 'Preview',
'allowedAspectRatios' => [
'preview' => [
'title' => 'Standard',
'value' => 1.8,
],
],
],
'zoom' => [
'title' => 'Zoom',
'allowedAspectRatios' => [
'free' => [
'title' => 'frei',
'value' => 'NaN',
],
],
],
],
],
],
],
], ],
'maxitems' => 10 'maxitems' => 10
], ],
@@ -348,7 +348,7 @@ return [
], ],
'images' => [ 'images' => [
'exclude' => 0, 'exclude' => 0,
'label' => 'Bilder', 'label' => 'Galeriebilder',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig( 'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'images', 'images',
[ [
@@ -363,6 +363,32 @@ return [
--palette--;;filePalette', --palette--;;filePalette',
], ],
], ],
'columns' => [
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'title' => 'Preview',
'allowedAspectRatios' => [
'preview' => [
'title' => 'Standard',
'value' => 1.8,
],
],
],
'zoom' => [
'title' => 'Zoom',
'allowedAspectRatios' => [
'free' => [
'title' => 'frei',
'value' => 'NaN',
],
],
],
],
],
],
],
], ],
'maxitems' => 10 'maxitems' => 10
], ],
@@ -449,7 +449,7 @@ return [
], ],
'images' => [ 'images' => [
'exclude' => 0, 'exclude' => 0,
'label' => 'LLL:EXT:ep_products/Resources/Private/Language/locallang.xlf:tx_epproducts_domain_model_product.images', 'label' => 'Galeriebilder',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig( 'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'images', 'images',
[ [
@@ -464,6 +464,32 @@ return [
--palette--;;filePalette', --palette--;;filePalette',
], ],
], ],
'columns' => [
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'title' => 'Preview',
'allowedAspectRatios' => [
'preview' => [
'title' => 'Standard',
'value' => 1.8,
],
],
],
'zoom' => [
'title' => 'Zoom',
'allowedAspectRatios' => [
'free' => [
'title' => 'frei',
'value' => 'NaN',
],
],
],
],
],
],
],
], ],
'maxitems' => 10 'maxitems' => 10
], ],
@@ -416,6 +416,32 @@ return [
--palette--;;filePalette', --palette--;;filePalette',
], ],
], ],
'columns' => [
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'title' => 'Preview',
'allowedAspectRatios' => [
'preview' => [
'title' => 'Standard',
'value' => 1.8,
],
],
],
'zoom' => [
'title' => 'Zoom',
'allowedAspectRatios' => [
'free' => [
'title' => 'frei',
'value' => 'NaN',
],
],
],
],
],
],
],
], ],
'maxitems' => 10 'maxitems' => 10
], ],
@@ -20,7 +20,7 @@
<div class="slider__thumbs hidden-sm hidden-xs"> <div class="slider__thumbs hidden-sm hidden-xs">
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5"> <f:if condition="{iteration.cycle} <= 5">
<a href="{f:uri.image(image: image, maxWidth: '2560')}" <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-fancybox="gallery-{id}" class="slider__thumb"> data-fancybox="gallery-{id}" class="slider__thumb">
<f:image image="{image}" width="150" height="85c+100" class="img-responsive" <f:image image="{image}" width="150" height="85c+100" class="img-responsive"
alt="{image.alternative}" title="{image.title}"/> alt="{image.alternative}" title="{image.title}"/>
@@ -36,14 +36,14 @@
<f:if condition="{images -> f:count()} == 1"> <f:if condition="{images -> f:count()} == 1">
<f:then> <f:then>
<f:alias map="{image: images.0}"> <f:alias map="{image: images.0}">
<a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, maxWidth: '2560')}" <a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
title="{image.title}">1</a> title="{image.title}">1</a>
</f:alias> </f:alias>
</f:then> </f:then>
<f:else> <f:else>
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} > 5"> <f:if condition="{iteration.cycle} > 5">
<a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, maxWidth: '2560')}" <a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
title="{image.title}">{iteration.index}</a> title="{image.title}">{iteration.index}</a>
</f:if> </f:if>
</f:for> </f:for>
@@ -52,7 +52,7 @@
</f:then> </f:then>
<f:else> <f:else>
<f:for each="{images}" as="image"> <f:for each="{images}" as="image">
<a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, maxWidth: '2560')}" <a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
title="{image.title}">{iteration.index}</a> title="{image.title}">{iteration.index}</a>
</f:for> </f:for>
</f:else> </f:else>