Skip to content
Snippets Groups Projects
Commit af9f5f4c authored by Michael Kessler's avatar Michael Kessler
Browse files

Merge branch 'feature_vimeoRedesign' into 'master' 

Add new vimeo design

See merge request !2
parents b4cf8ce5 640231e5
No related branches found
No related tags found
1 merge request!2Add new vimeo design
Hide whitespace changes
Inline Side-by-side
Resources/Private/Language/de.locallang.xlf
+ 8
− 0
View file @ af9f5f4c
......@@ -125,6 +125,14 @@
<source><![CDATA[Maximum Amount]]></source>
<target><![CDATA[Maximale Anzahl]]></target>
</trans-unit>
<trans-unit id="frontend.readMore" approved="yes">
<source><![CDATA[Read more]]></source>
<target><![CDATA[Mehr]]></target>
</trans-unit>
<trans-unit id="frontend.readLess" approved="yes">
<source><![CDATA[Read less]]></source>
<target><![CDATA[Weniger]]></target>
</trans-unit>
</body>
</file>
</xliff>
Resources/Private/Language/locallang.xlf
+ 6
− 0
View file @ af9f5f4c
......@@ -83,6 +83,12 @@
<trans-unit id="flexform.thumbnailType.standard">
<source><![CDATA[Standard Resolution]]></source>
</trans-unit>
<trans-unit id="frontend.readMore">
<source><![CDATA[Read more]]></source>
</trans-unit>
<trans-unit id="frontend.readLess">
<source><![CDATA[Read less]]></source>
</trans-unit>
<trans-unit id="settings">
<source><![CDATA[Settings]]></source>
</trans-unit>
......
Resources/Private/Templates/Vimeo/Index.html
+ 161
− 46
View file @ af9f5f4c
{namespace sg=SGalinski\ProjectTheme\ViewHelpers}
<f:layout name="Default"/>
<f:section name="main">
<f:if condition="{showApiResult}">
{response -> f:format.raw()}
</f:if>
<f:variable name="feedCount" value="{response.items -> f:count()}"/>
<f:comment><!--Handle the container classes--></f:comment>
<f:variable name="classes">
<f:if condition="{feedCount} > 4">
<f:then>
sg-video--default
</f:then>
<f:else>
<f:switch expression="{settings.layout}">
<f:case value="rows">
sg-video--rows
</f:case>
<f:case value="playlist">
sg-video--playlist sg-video--{feedCount} row
</f:case>
<f:defaultCase>
sg-video--default
</f:defaultCase>
</f:switch>
</f:else>
</f:if>
</f:variable>
<f:if condition="{error}">
<f:then>
<p>{error}</p>
</f:then>
<f:else>
<f:if condition="{showApiResult}">
<f:debug>{response}</f:debug>
<f:comment><!--Set the layout to single if there is only one item.--></f:comment>
<div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
<f:if condition="{feedCount} < 2">
<f:then>
<f:render section="vimeoItem" arguments="{
feedItem: response.items.0,
titleChars: 200,
descChars: 400
}"/>
</f:then>
<f:else>
<f:if condition="{feedCount} > 4">
<f:then>
<f:render section="list" arguments="{_all}"/>
</f:then>
<f:else>
<f:switch expression="{settings.layout}">
<f:case value="playlist">
<f:render section="list-playlist" arguments="{_all}"/>
</f:case>
<f:defaultCase>
<f:render section="list" arguments="{_all}"/>
</f:defaultCase>
</f:switch>
</f:else>
</f:if>
</f:else>
</f:if>
</div>
</f:else>
</f:if>
</f:section>
<f:section name="list">
<ul class="sg-video__list sg-video__list--{f:if(condition: '{settings.layout} === \'rows\'', then: 'rows', else: 'default')}">
<f:for each="{response.items}" as="feedItem" iteration="feedIterator">
<li class="sg-video__list-item">
<f:render section="vimeoItem" arguments="{
feedItem: feedItem,
titleChars: 300,
descChars: 900,
expand: 1
}"/>
</li>
</f:for>
</ul>
</f:section>
<f:section name="list-playlist">
<f:variable name="highlightClasses">
<f:switch expression="{feedCount}">
<f:case value="3">col-lg-8</f:case>
<f:case value="4">col-lg-6</f:case>
<f:defaultCase>col-md-6</f:defaultCase>
</f:switch>
</f:variable>
<f:variable name="listClasses">
<f:switch expression="{feedCount}">
<f:case value="3">col-lg-4</f:case>
<f:case value="4">col-lg-6</f:case>
<f:defaultCase>col-md-6</f:defaultCase>
</f:switch>
</f:variable>
<div class="sg-video__highlight {highlightClasses}">
<f:render section="vimeoItem" arguments="{
feedItem: response.items.0,
titleChars: 200,
descChars: 300
}"/>
</div>
<ul class="sg-video__list sg-video__list--playlist {listClasses}">
<f:for each="{response.items}" as="feedItem" iteration="feedIterator">
<f:if condition="!{feedIterator.isFirst}">
<li class="sg-video__list-item {f:if(condition: '{feedCount} === 4', then: 'sg-video__list-item--alt')}">
<f:render section="vimeoItem" arguments="{
feedItem: feedItem,
titleChars: 100,
descChars: \"{f:if(condition: '{feedCount} < 3', then: '300', else: '90')}\"}" />
</li>
</f:if>
</f:for>
</ul>
</f:section>
<ul class="sg-vimeo sg-vimeo-default">
<f:for each="{response.items}" as="item" iteration="feedIterator">
<li class="sg-vimeo-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-vimeo-item-single')}">
<a class="sg-vimeo-item sg-card-shadow" href="{item.link}" data-video-id="{item.videoId}" target="_blank"
data-disable-lightbox="{settings.disableLightbox}"
data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:comment>
<!--Use the custom thumbnail (if available).
Use the last picture of the vimeo API response otherwise (the last one,
should always be the one with the highest resolution).-->
</f:comment>
<f:if condition="{item.thumbnail}">
<f:then>
<div class="sg-vimeo-image">
<img src="{item.thumbnail}" alt="{item.name}" loading="lazy"/>
</div>
</f:then>
<f:else>
<f:if condition="{item.pictures.sizes}">
<f:for each="{item.pictures.sizes}" as="picture" iteration="iterator">
<f:if condition="{iterator.isLast}">
<div class="sg-vimeo-image">
<img src="{picture.link}" alt="{item.name}" width="{picture.width}" height="{picture.height}" loading="lazy"/>
</div>
</f:if>
</f:for>
</f:if>
</f:else>
<f:section name="vimeoItem">
<div class="sg-video__item">
<a class="sg-video__image-container sg-vimeo-item" href="{feedItem.link}" target="_blank"
data-disable-lightbox="{settings.disableLightbox}"
data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feedItem.thumbnail}">
<f:then>
<img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.name}" loading="lazy"/>
</f:then>
<f:else>
<f:if condition="{feedItem.pictures.sizes}">
<f:for each="{feedItem.pictures.sizes}" as="picture" iteration="iterator">
<f:if condition="{iterator.isLast}">
<img class="sg-video__image" src="{picture.link}" alt="{item.name}" width="{picture.width}" height="{picture.height}" loading="lazy"/>
</f:if>
<f:if condition="{showTitle} && {item.name}">
<div class="sg-vimeo-title">
<h3 class="h3">{item.name}</h3>
</div>
</f:if>
<f:if condition="{showDescription} && {item.description}">
<div class="sg-vimeo-text">
<f:format.crop maxCharacters="200">{item.description}</f:format.crop>
</div>
</f:if>
</a>
</li>
</f:for>
</ul>
</f:else>
</f:if>
</f:for>
</f:if>
</f:else>
</f:if>
</a>
<f:if condition="{settings.showTitle} || {settings.showDescription}">
<div class="sg-video__bodytext">
<f:if condition="{settings.showTitle} && {feedItem.name}">
<h3 class="h3">
<f:format.crop maxCharacters="{titleChars}"><f:format.htmlentitiesDecode>{feedItem.name}</f:format.htmlentitiesDecode></f:format.crop>
</h3>
</f:if>
<f:if condition="{settings.showDescription} && {feedItem.description}">
<span class="sg-video__description">
<f:format.crop maxCharacters="{descChars}"><f:format.htmlentitiesDecode>{feedItem.description}</f:format.htmlentitiesDecode></f:format.crop>
</span>
</f:if>
<f:if condition="{expand} && {settings.layout} == 'rows'">
<f:render section="readMoreButton" />
</f:if>
</div>
<f:if condition="{expand} && {settings.layout} == 'default'">
<f:render section="readMoreButton" />
</f:if>
</f:if>
</div>
</f:section>
<f:section name="readMoreButton">
<button type="button" class="sg-video__read-more"
data-button-open-text="{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}"
data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'sg_vimeo')}">{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}</button>
</f:section>
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