Skip to content
Snippets Groups Projects

[TASK] Restructure index fluid template

Merged [TASK] Restructure index fluid template
feature_youtubeRedesign into master
Merged Michael Kessler requested to merge feature_youtubeRedesign into master
Viewing commit 1996974b
Prev
Show latest version
3 files
+ 16
− 2
Compare changes
  • Side-by-side
  • Inline
Files
3
Resources/Private/Templates/Youtube/Index.html
+ 144
− 107
{namespace sg=SGalinski\ProjectTheme\ViewHelpers}
<f:layout name="Default"/>
<f:section name="main">
@@ -5,117 +7,152 @@
{debugOutput -> f:format.raw()}
</f:if>
<f:if condition="{response.kind} == 'youtube#playlistItemListResponse' && {feed -> f:count() > 0}">
<f:then>
<div class="sg-youtube-playlist">
<f:if condition="{feed -> f:count()} === 1">
<f:variable name="feedCount" value="{feed -> 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>
{sg:structuredVideoData(videoArray: '{feed}', arrayType: 'youtube')}
<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="youtubeItem" arguments="{
feedItem: feed.0,
titleChars: 1000,
descChars: 1000
}"/>
</f:then>
<f:else>
<f:if condition="{feedCount} > 4">
<f:then>
<ul class="sg-youtube">
<li class="sg-youtube-item-container sg-youtube-item-single">
<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feed.0.thumbnail}">
<div class="sg-youtube-image">
<img src="{feed.0.thumbnail}" alt="{feed.0.title}" loading="lazy" />
</div>
</f:if>
<f:if condition="{feed.0.title}">
<div class="sg-youtube-title">
<h3 class="h3">
<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
</h3>
</div>
</f:if>
<f:if condition="{showDescription} && {feed.0.description}">
<div class="sg-youtube-text">
<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
</div>
</f:if>
</a>
</li>
</ul>
<f:render section="list" arguments="{_all}"/>
</f:then>
<f:else>
<div class="sg-youtube">
<div class="sg-youtube-item-container">
<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feed.0.thumbnail}">
<div class="sg-youtube-image">
<img src="{feed.0.thumbnail}" alt="{feed.0.title}" loading="lazy" />
</div>
</f:if>
<f:if condition="{showTitle} && {feed.0.title}">
<div class="sg-youtube-title">
<h3 class="h3">
<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
</h3>
</div>
</f:if>
<f:if condition="{showDescription} && {feed.0.description}">
<div class="sg-youtube-text">
<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
</div>
</f:if>
</a>
</div>
</div>
<ul class="sg-youtube">
<f:for each="{feed}" as="feedItem" iteration="feedIterator">
<f:if condition="!{feedIterator.isFirst}">
<li class="sg-youtube-item-container sg-youtube-item-list">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feedItem.thumbnail}">
<div class="sg-youtube-image">
<picture>
<source media="(max-width: 600px)"
srcset="{f:uri.image(src: '{feedItem.thumbnail}', width: '600c')}">
<source media="(max-width: 992px)"
srcset="{f:uri.image(src: '{feedItem.thumbnail}', width: '992c')}">
<f:image src="{feedItem.thumbnail}" alt="{feedItem.title}" class="sg-video__image" width="1140" loading="lazy"/>
</picture>
</div>
</f:if>
<f:if condition="{showTitle} && {feedItem.title}">
<div class="sg-youtube-title">
<h3 class="h3">
<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
</h3>
</div>
</f:if>
</a>
</li>
</f:if>
</f:for>
</ul>
<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: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="{feed}" as="feedItem" iteration="feedIterator">
<li class="sg-video__list-item">
<f:render section="youtubeItem" arguments="{
feed: feed,
feedItem: feedItem,
titleChars: 500,
descChars: 1000,
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="youtubeItem" arguments="{
feedItem: feed.0,
titleChars: 200,
descChars: 320
}"/>
</div>
<ul class="sg-video__list sg-video__list--playlist {listClasses}">
<f:for each="{feed}" 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="youtubeItem" arguments="{
feed: feed,
feedItem: feedItem,
titleChars: 100,
descChars: \" {f:if(condition: '{feedCount} < 3', then: '300', else: '90')}\"}" />
</li>
</f:if>
</f:for>
</ul>
</f:section>
<f:section name="youtubeItem">
<div class="sg-video__item">
<f:if condition="{feedItem.thumbnail}">
<a class="sg-video__image-container sg-youtube-item" href="{feedItem.url}"
data-disable-lightbox="{settings.disableLightbox}" target="_blank"
data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
</a>
</f:if>
<f:if condition="{settings.showTitle} || {settings.showDescription}">
<div class="sg-video__bodytext">
<f:if condition="{settings.showTitle} && {feedItem.title}">
<h3 class="h3">
<f:format.crop maxCharacters="{titleChars}"><f:format.htmlentitiesDecode>{feedItem.title}</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:then>
<f:else>
<ul class="sg-youtube sg-youtube-default">
<f:for each="{feed}" as="feedItem" iteration="feedIterator">
<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
<f:if condition="{feedItem.thumbnail}">
<div class="sg-youtube-image">
<img src="{feedItem.thumbnail}" alt="{feedItem.title}" loading="lazy"/>
</div>
</f:if>
<f:if condition="{showTitle} && {feedItem.title}">
<div class="sg-youtube-title">
<h3 class="h3">
<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
</h3>
</div>
</f:if>
<f:if condition="{showDescription} && {feedItem.description}">
<div class="sg-youtube-text">
<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop></f:format.htmlentitiesDecode>
</div>
</f:if>
</a>
</li>
</f:for>
</ul>
</f:else>
</f:if>
<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_youtube')}"
data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'sg_youtube')}">{f:translate(key: 'frontend.readMore', extensionName: 'sg_youtube')}</button>
</f:section>