diff --git a/Resources/Private/Templates/Youtube/Index.html b/Resources/Private/Templates/Youtube/Index.html index 0355ad6ef82af3b596db9fdc7b52f28c18705331..9cba7b51c16bc7884c926a6cf265b3cb74aa2cb6 100644 --- a/Resources/Private/Templates/Youtube/Index.html +++ b/Resources/Private/Templates/Youtube/Index.html @@ -1,3 +1,5 @@ +{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: 'project_theme')}" + data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'project_theme')}">{f:translate(key: 'frontend.readMore', extensionName: 'project_theme')}</button> </f:section>