Skip to content

Commit

Permalink
[!!!][TASK] change how fullWidthImage img is rendered (#201)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pixelmatseriks @MattiasNilsson
pixelmatseriks authored and MattiasNilsson committed May 10, 2017
1 parent bec9812 commit d1f953c
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 32 deletions.
3 changes: 1 addition & 2 deletions Configuration/ContentElements/FullWidthImage.setupts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ tt_content {
830 < lib.contentElement.dataProcessing.830
}
settings {
defaultWidth = 1920c
defaultHeight = 400c
defaultWidth = 2560
}
}
}
25 changes: 25 additions & 0 deletions Configuration/FlexForms/flexform_fullWidthImage.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<T3DataStructure>
<meta>
<langDisable>1</langDisable>
</meta>
<sheets>
<sDEF>
<ROOT>
<TCEforms>
<sheetTitle>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:fullWidthImage.flexform.sheetGeneral</sheetTitle>
</TCEforms>
<type>array</type>
<el>
<includeDoubleDensityImages>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:fullWidthImage.flexform.includeDoubleDensityImages</label>
<config>
<type>check</type>
</config>
</TCEforms>
</includeDoubleDensityImages>
</el>
</ROOT>
</sDEF>
</sheets>
</T3DataStructure>
71 changes: 70 additions & 1 deletion Configuration/TCA/Overrides/tt_content.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -570,7 +570,7 @@
header;' . $frontendLanguageFilePrefix . 'header.ALT.div_formlabel,
--div--;' . $contentElementLanguageFilePrefix . 'fullWidthImage.tabs.image,image,
--palette--;' . $contentElementLanguageFilePrefix . 'tt_content.palette.imageSize;imageSize,
--linebreak--,pi_flexform;' . $contentElementLanguageFilePrefix . 'tt_content.tabs.settings,
--div--;' . $frontendLanguageFilePrefix . 'tabs.appearance,
--palette--;' . $frontendLanguageFilePrefix . 'palette.frames;frames,
Expand All @@ -586,7 +586,76 @@
'
];

$GLOBALS['TCA']['tt_content']['types']['fullWidthImage']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config'] = [
'cropVariants' => [
'default' => [
'title' => $contentElementLanguageFilePrefix . 'imageManipulation.default',
'selectedRatio' => 'NaN',
'allowedAspectRatios' => [
'8:1' => [
'title' => '8:1', 'value' => 8 / 1
],
'5:1' => [
'title' => '5:1', 'value' => 5 / 1
],
'16:9' => [
'title' => '16:9', 'value' => 16 / 9
],
'4:3' => [
'title' => '4:3', 'value' => 4 / 3
],
'NaN' => [
'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free', 'value' => 0.0
],
],
],
'medium' => [
'title' => $contentElementLanguageFilePrefix . 'imageManipulation.medium',
'selectedRatio' => 'NaN',
'allowedAspectRatios' => [
'8:1' => [
'title' => '8:1', 'value' => 8 / 1
],
'5:1' => [
'title' => '5:1', 'value' => 5 / 1
],
'16:9' => [
'title' => '16:9', 'value' => 16 / 9
],
'4:3' => [
'title' => '4:3', 'value' => 4 / 3
],
'NaN' => [
'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free', 'value' => 0.0
],
],
],
'small' => [
'title' => $contentElementLanguageFilePrefix . 'imageManipulation.small',
'selectedRatio' => 'NaN',
'allowedAspectRatios' => [
'8:1' => [
'title' => '8:1', 'value' => 8 / 1
],
'5:1' => [
'title' => '5:1', 'value' => 5 / 1
],
'16:9' => [
'title' => '16:9', 'value' => 16 / 9
],
'4:3' => [
'title' => '4:3', 'value' => 4 / 3
],
'NaN' => [
'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free', 'value' => 0.0
],
],
],
],
];

// fullWidthImage flexform
$GLOBALS['TCA']['tt_content']['columns']['pi_flexform']['config']['ds']['*,fullWidthImage'] = $flexformPath . 'flexform_fullWidthImage.xml';
// ======================= fullWidthImage [end] ==========================================


Expand Down
16 changes: 16 additions & 0 deletions Resources/Private/Language/ContentElements.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,12 @@
<trans-unit id="fullWidthImage.tabs.image">
<source>Image</source>
</trans-unit>
<trans-unit id="fullWidthImage.flexform.sheetGeneral">
<source>Settings</source>
</trans-unit>
<trans-unit id="fullWidthImage.flexform.includeDoubleDensityImages">
<source>Include 2x images in sources</source>
</trans-unit>



Expand Down Expand Up @@ -490,6 +496,16 @@
<trans-unit id="button.blockLevel">
<source>Block level button</source>
</trans-unit>

<trans-unit id="imageManipulation.default">
<source>Default</source>
</trans-unit>
<trans-unit id="imageManipulation.small">
<source>Small devices (up to 767px)</source>
</trans-unit>
<trans-unit id="imageManipulation.medium">
<source>Medium devices (from 768px to 991px)</source>
</trans-unit>
</body>
</file>
</xliff>
46 changes: 17 additions & 29 deletions Resources/Private/Templates/ContentElements/FullWidthImage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,23 @@
<f:if condition="{imageIteration.isFirst}">
<div class="full-width-image">
<div class="full-width-image__wrp">
<img
src="<f:uri.image src="{image.uid}"
width="{f:if(condition: data.imagewidth, then: data.imagewidth, else: settings.defaultWidth)}"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"
treatIdAsReference="1" />"
srcset="
<f:uri.image src="{image.uid}" treatIdAsReference="1" width="320c"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"/> 320w,

<f:uri.image src="{image.uid}" treatIdAsReference="1" width="640c"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"/> 640w ,

<f:uri.image src="{image.uid}" treatIdAsReference="1" width="768c"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"/> 768w ,

<f:uri.image src="{image.uid}" treatIdAsReference="1" width="1080c"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"/> 1080w ,

<f:uri.image src="{image.uid}" treatIdAsReference="1" width="1280c"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"/> 1280w ,

<f:uri.image src="{image.uid}" treatIdAsReference="1" width="1440c"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"/> 1440w ,

<f:uri.image src="{image.uid}" treatIdAsReference="1" width="1920c"
height="{f:if(condition: data.imageheight, then: data.imageheight, else: settings.defaultHeight)}"/> 1920w"
sizes="100vw"
class="img-responsive full-width-image__img"
alt="{image.alternative}" >
<picture>
<source srcset="{f:uri.image(image: image, maxWidth: settings.defaultWidth, cropVariant: 'default')}" media="(min-width: 1200px)">
<f:if condition="{settings.includeDoubleDensityImages}">
<f:then>
<source srcset="{f:uri.image(image: image, maxWidth: '1200', cropVariant: 'default')}, {f:uri.image(image: image, maxWidth: '2400', cropVariant: 'default')} 2x" media="(min-width: 992px)">
<source srcset="{f:uri.image(image: image, maxWidth: '992', cropVariant: 'medium')}, {f:uri.image(image: image, maxWidth: '1984', cropVariant: 'medium')} 2x" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, maxWidth: '768', cropVariant: 'small')}, {f:uri.image(image: image, maxWidth: '1536', cropVariant: 'small')} 2x" media="(max-width: 767px)">
</f:then>
<f:else>
<source srcset="{f:uri.image(image: image, maxWidth: '1200', cropVariant: 'default')}" media="(min-width: 992px)">
<source srcset="{f:uri.image(image: image, maxWidth: '992', cropVariant: 'medium')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, maxWidth: '768', cropVariant: 'small')}" media="(max-width: 767px)">
</f:else>
</f:if>
<!--- Fallback -->
<f:image class="img-responsive full-width-image__img" image="{image}" maxWidth="{settings.defaultWidth}" longdesc="{image.description}" cropVariant="default" />
</picture>
</div>
</div>
</f:if>
Expand Down

0 comments on commit d1f953c

Please sign in to comment.