Skip to content

Commit

Permalink
[FEATURE] Hero Image, add option for vertical alignment (#194)
Browse files Browse the repository at this point in the history 
* [FEATURE] Hero Image, add option for vertical alignment

* [FIX] fix template
  • Loading branch information
@myroslav321 @dmh
myroslav321 authored and dmh committed May 5, 2017
1 parent 33389a6 commit 4ce7556
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 29 deletions.
16 changes: 12 additions & 4 deletions Configuration/ContentElements/HeroImage.pagets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,19 @@ mod.wizards.newContentElement.wizardItems.contentElements {
}


TCEFORM.tt_content.pi_flexform.heroImage.sDEF.contentPosition {
TCEFORM.tt_content.pi_flexform.heroImage.sDEF.horizontalAlignment {
addItems {
0 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.contentPosition_left
1 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.contentPosition_center
2 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.contentPosition_right
0 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.horizontalAlignment_left
1 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.horizontalAlignment_center
2 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.horizontalAlignment_right
}
}

TCEFORM.tt_content.pi_flexform.heroImage.sDEF.verticalAlignment {
addItems {
0 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.verticalAlignment_top
1 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.verticalAlignment_middle
2 = LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.verticalAlignment_bottom
}
}

Expand Down
18 changes: 15 additions & 3 deletions Configuration/FlexForms/flexform_heroImage.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,29 @@
</TCEforms>
</linkAsBtn>

<contentPosition>
<horizontalAlignment>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.contentPosition</label>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.horizontalAlignment</label>
<config>
<type>select</type>
<items>

</items>
</config>
</TCEforms>
</contentPosition>
</horizontalAlignment>

<verticalAlignment>
<TCEforms>
<label>LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:heroImage.flexform.verticalAlignment</label>
<config>
<type>select</type>
<items>

</items>
</config>
</TCEforms>
</verticalAlignment>

<animationStyle>
<TCEforms>
Expand Down
30 changes: 21 additions & 9 deletions Resources/Private/Language/ContentElements.xlf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,21 +279,33 @@
<trans-unit id="heroImage.flexform.elementHeight">
<source>Set height of element</source>
</trans-unit>
<trans-unit id="heroImage.flexform.contentPosition">
<source>Set Content position</source>
</trans-unit>
<trans-unit id="heroImage.flexform.animationStyle">
<source>Set Animation Style</source>
</trans-unit>
<trans-unit id="heroImage.flexform.contentPosition_left">
<trans-unit id="heroImage.flexform.horizontalAlignment">
<source>Horizontal alignment</source>
</trans-unit>
<trans-unit id="heroImage.flexform.verticalAlignment">
<source>Vertical alignment</source>
</trans-unit>
<trans-unit id="heroImage.flexform.horizontalAlignment_left">
<source>Left align</source>
</trans-unit>
<trans-unit id="heroImage.flexform.contentPosition_center">
<trans-unit id="heroImage.flexform.horizontalAlignment_center">
<source>Center align</source>
</trans-unit>
<trans-unit id="heroImage.flexform.contentPosition_right">
<trans-unit id="heroImage.flexform.horizontalAlignment_right">
<source>Right align</source>
</trans-unit>
<trans-unit id="heroImage.flexform.verticalAlignment_top">
<source>Top</source>
</trans-unit>
<trans-unit id="heroImage.flexform.verticalAlignment_middle">
<source>Middle</source>
</trans-unit>
<trans-unit id="heroImage.flexform.verticalAlignment_bottom">
<source>Bottom</source>
</trans-unit>
<trans-unit id="heroImage.flexform.animationStyle">
<source>Set Animation Style</source>
</trans-unit>
<trans-unit id="heroImage.flexform.animationStyle_disable">
<source>Disable</source>
</trans-unit>
Expand Down
6 changes: 3 additions & 3 deletions Resources/Private/Templates/ContentElements/HeroImage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<f:section name="Main">
<!-- theme_t3kit: Templates/ContentElements/HeroImage.html [begin] -->
<f:if condition="{image}">
<div class="hero-image js__hero-image" style="background-image:url('{f:uri.image(image: image.0, maxWidth:'{f:if(condition: data.imagewidth, then: data.imagewidth, else: settings.maxWidth)}')}'); min-height: {settings.elementHeight}px">
<div class="hero-image__caption-wrp {f:if(condition: '{settings.contentPosition} == 0', then: '_left-align')}{f:if(condition: '{settings.contentPosition} == 1', then: '_center-align')}{f:if(condition: '{settings.contentPosition} == 2', then: '_right-align')}">
<div class="hero-image__caption {f:if(condition: '{settings.animationStyle} == 0', then: '', else: '_caption-animated-{settings.animationStyle}')}">
<div class="hero-image js__hero-image" style="background-image:url('{f:uri.image(image: image.0, maxWidth:'{f:if(condition: data.imagewidth, then: data.imagewidth, else: settings.maxWidth)}')}');">
<div class="hero-image__caption-wrp {f:if(condition: '{settings.horizontalAlignment} == 0', then: '_left-align')}{f:if(condition: '{settings.horizontalAlignment} == 1', then: '_center-align')}{f:if(condition: '{settings.horizontalAlignment} == 2', then: '_right-align')}" style="height: {settings.elementHeight}px">
<div class="hero-image__caption {f:if(condition: '{settings.animationStyle} == 0', then: '', else: '_caption-animated-{settings.animationStyle}')} {f:if(condition: '{settings.verticalAlignment} == 0', then: '_top')}{f:if(condition: '{settings.verticalAlignment} == 2', then: '_bottom')}">
<f:if condition="{data.header}">
<h2 class="hero-image__caption-header">{data.header}</h2>
</f:if>
Expand Down
25 changes: 15 additions & 10 deletions felayout_t3kit/dev/styles/main/contentElements/heroImage.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,36 @@
background-size: cover;
background-repeat: no-repeat;
width: 100%;
position: relative;
// max-width: 1920px;
}

.hero-image__caption-wrp._left-align {
text-align: left;
.hero-image__caption-wrp {
display: flex;
align-items: center;
justify-content: center;
}

.hero-image__caption-wrp._left-align .hero-image__caption {
float: left;
margin-right: auto;
text-align: left;
}

.hero-image__caption-wrp._center-align {
.hero-image__caption-wrp._center-align .hero-image__caption {
text-align: center;
}

.hero-image__caption-wrp._center-align .hero-image__caption {
margin: auto;
.hero-image__caption-wrp._right-align .hero-image__caption {
margin-left: auto;
text-align: right;
}

.hero-image__caption-wrp._right-align {
text-align: right;
.hero-image__caption._top {
align-self: flex-start;
}

.hero-image__caption-wrp._right-align .hero-image__caption {
float: right;
.hero-image__caption._bottom {
align-self: flex-end;
}

.hero-image__caption {
Expand Down

0 comments on commit 4ce7556

Please sign in to comment.