Skip to content
GitLab
Commit a8b579d4 authored by Harry Glatz's avatar Harry Glatz
Browse files

[TASK] Add new Ratios for slider with new IMG-SRC-Set

parent 5aabaa03
Hide whitespace changes
Inline Side-by-side
Configuration/TCA/tx_slider_item.php
View file @ a8b579d4
......@@ -46,9 +46,66 @@ return [
--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.access,
--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.visibility;visibility,
--palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.access;access,
'
],
],
',
'columnsOverrides' => [
'media' => array(
'config' => [
'maxitems' => '1',
'overrideChildTca' => [
'columns'=> [
'crop' => [
'config' => [
'cropVariants' => [
'default' => [
'disabled' => true,
],
'desktopslider' => [
'title' => 'Desktop',
'allowedAspectRatios' => [
'1700:500' => [
'title' => '1700:500',
'value' => 1700 / 500
],
],
'selectedRatio' => '1700:500',
],
'tablet' => [
'disabled' => true,
],
'tabletslider' => [
'title' => 'Tablet',
'allowedAspectRatios' => [
'1200:500' => [
'title' => '1200:500',
'value' => 1200 / 500
],
],
'selectedRatio' => '1700:500',
],
'mobile' => [
'disabled' => true,
],
'mobileslider' => [
'title' => 'Mobile',
'allowedAspectRatios' => [
'4:3' => [
'title' => '4:3',
'value' => 4 / 3
],
],
'selectedRatio' => '1700:500',
],
],
],
],
],
],
],
),
],
],
],
'palettes' => [
'1' => [
'showitem' => ''
......@@ -214,31 +271,43 @@ return [
'config' => $GLOBALS['TCA']['tt_content']['columns']['header_link']['config'],
],
'media' => [
'exclude' => 0,
'label' => 'Background Image',
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
'media',
[
'appearance' => [
'createNewRelationLinkTitle' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference'
],
'exclude' => 1,
'label' => $GLOBALS['TCA']['pages']['columns']['media']['label'],
'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig('media', [
'foreign_types' => [
'0' => [
'showitem' => '
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,
--palette--;;filePalette'
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;basicoverlayPalette,
--palette--;;filePalette'
],
\TYPO3\CMS\Core\Resource\File::FILETYPE_TEXT => [
'showitem' => '
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;basicoverlayPalette,
--palette--;;filePalette'
],
\TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
'showitem' => '
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,
--palette--;;filePalette'
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,
--palette--;;filePalette'
],
],
'minitems' => 1,
'maxitems' => 1,
],
$GLOBALS['TYPO3_CONF_VARS']['SYS']['mediafile_ext']
),
\TYPO3\CMS\Core\Resource\File::FILETYPE_AUDIO => [
'showitem' => '
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.audioOverlayPalette;audioOverlayPalette,
--palette--;;filePalette'
],
\TYPO3\CMS\Core\Resource\File::FILETYPE_VIDEO => [
'showitem' => '
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.videoOverlayPalette;videoOverlayPalette,
--palette--;;filePalette'
],
\TYPO3\CMS\Core\Resource\File::FILETYPE_APPLICATION => [
'showitem' => '
--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;basicoverlayPalette,
--palette--;;filePalette'
]
]
]
)
],
],
];
Resources/Private/Partials/ContentElements/Media/Rendering/PictureSrcsetCols.html
View file @ a8b579d4
......@@ -90,3 +90,22 @@
</picture>
</f:section>
</html>
<f:section name="ImageRender">
<f:if condition="{file}">
<picture>
<f:for each="{breakpoints}" as="breakpoint" iteration="i_breakpoints">
<f:if condition="{i_breakpoints.isLast}">
<f:else>
<source srcset="{f:uri.image(image: file, maxWidth: breakpoint.maxWidth, cropVariant: breakpoint.cropVariant)}" media="({breakpoint.media}: {breakpoint.size}px)">
</f:else>
<f:then>
<source srcset="{f:uri.image(image: file, maxWidth: breakpoint.maxWidth, cropVariant: breakpoint.cropVariant)}" media="({breakpoint.media}: {breakpoint.size}px)">
<img class="img-fluid" src="{f:uri.image(image: file, maxWidth: breakpoint.maxWidth, cropVariant: breakpoint.cropVariant)}" alt="{file.alternative}" title="{file.title}">
</f:then>
</f:if>
</f:for>
</picture>
</f:if>
</f:section>
Resources/Private/Templates/ContentElements/Slider.html
View file @ a8b579d4
<div xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:f="http://xsd.helhum.io/ns/typo3/cms-fluid/master/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="ContentElements/CustomDefault" />
<f:section name="Main">
<div class="landing-slider-wrapper">
<div class="landing-slick-slider js__landing-slick-slider">
<f:for each="{slides}" as="slide" iteration="i">
<div class="slider-element slider-element-{i.cycle}">
<f:for each="{slide.media}" as="image">
<f:variable name="breakpoints" value="{
0:{media:'max-width', size:375, maxWidth:375, cropVariant:'mobileslider'},
1:{media:'max-width', size:480, maxWidth:480, cropVariant:'mobileslider'},
2:{media:'max-width', size:767, maxWidth:767, cropVariant:'tabletslider'},
3:{media:'max-width', size:991, maxWidth:991, cropVariant:'tabletslider'},
4:{media:'max-width', size:1199, maxWidth:1199, cropVariant:'desktopslider'},
5:{media:'min-width', size:1200, maxWidth:1920, cropVariant:'desktopslider'}
}"/>
<f:render partial="ContentElements/Media/Rendering/PictureSrcsetCols" section="ImageRender" arguments="{file:image, breakpoints:breakpoints}" />
</f:for>
<f:comment>
<f:if condition="{SliderItems.data.showcontent} != 0">
<div class="p-3 slider-element-cta-container{f:if(condition: '{SliderItems.data.showcontent} == 1', then: ' ')}{f:if(condition: '{SliderItems.data.showcontent} == 2', then: ' _background')}">
<f:if condition="{SliderItems.data.header}">
<f:if condition="{slides -> f:count()} > 1">
<f:then>
<h3 class="my-0">{SliderItems.data.header}</h3>
</f:then>
<f:else>
<h1 class="my-0">{SliderItems.data.header}</h1>
</f:else>
</f:if>
</f:if>
<f:if condition="{SliderItems.data.subheader}">
<p>{SliderItems.data.subheader}</p>
</f:if>
<f:if condition="{SliderItems.data.buttonlink}">
<div class="button-container">
<f:link.typolink class="btn btn-primary" parameter="{SliderItems.data.buttonlink}">
<f:if condition="{SliderItems.data.buttonlable}" then="{SliderItems.data.buttonlable}" else="Default Text?" />
</f:link.typolink>
</div>
</f:if>
</div>
</f:if>
</f:comment>
</div>
</f:for>
</div>
</div>
</f:section>
<f:section name="Main">
<f:section name="MainBackup">
<div class="landing-slider-wrapper">
<div class="landing-slick-slider js__landing-slick-slider">
<f:for each="{slides}" as="SliderItems" iteration="i">
<div class="slider-element slider-element-{i.cycle}" style="background-image: url({f:uri.image(image:SliderItems.media.0, maxWidth: 1980)})">
<f:if condition="{SliderItems.data.showcontent} != 0">
<div class="p-3 slider-element-cta-container{f:if(condition: '{SliderItems.data.showcontent} == 1', then: ' ')}{f:if(condition: '{SliderItems.data.showcontent} == 2', then: ' _background')}">
<f:if condition="{SliderItems.data.header}">
<f:if condition="{slides -> f:count()} > 1">
<f:then>
<h3 class="my-0">{SliderItems.data.header}</h3>
</f:then>
<f:else>
<h1 class="my-0">{SliderItems.data.header}</h1>
</f:else>
</f:if>
</f:if>
<f:if condition="{SliderItems.data.subheader}">
<p>{SliderItems.data.subheader}</p>
<f:if condition="{SliderItems.data.header}">
<f:if condition="{slides -> f:count()} > 1">
<f:then>
<h3 class="my-0">{SliderItems.data.header}</h3>
</f:then>
<f:else>
<h1 class="my-0">{SliderItems.data.header}</h1>
</f:else>
</f:if>
</f:if>
<f:if condition="{SliderItems.data.subheader}">
<p>{SliderItems.data.subheader}</p>
</f:if>
<f:if condition="{SliderItems.data.buttonlink}">
<div class="button-container">
<f:link.typolink class="btn btn-primary" parameter="{SliderItems.data.buttonlink}">
......@@ -36,7 +83,7 @@
</div>
<f:if condition="{data.tx_slider_disable_control}">
<f:else>
<div class="container second-slider-container">
<div class="container second-slider-container">
<div class="landing-slick-slider-nav js__landing-slick-slider-nav d-none d-lg-block">
<f:for each="{slides}" as="SliderItems">
<div>
......@@ -54,4 +101,7 @@
</f:if>
</div>
</f:section>
</div>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment