diff --git a/Resources/Private/Templates/Bootstrap5/Youtube/Index.html b/Resources/Private/Templates/Bootstrap5/Youtube/Index.html index 27ad4460605d72e77d1f0adbfcc5c715b6e03bed..55af174341088e404d2c5b9fcd7bccd01b555396 100644 --- a/Resources/Private/Templates/Bootstrap5/Youtube/Index.html +++ b/Resources/Private/Templates/Bootstrap5/Youtube/Index.html @@ -174,7 +174,7 @@ <div class="sg-video__item {itemClasses}"> <f:if condition="{feedItem.thumbnail}"> - <a class="sg-video-item overflow-hidden text-light sg-video__link position-relative {f:if(condition: '!{hasText} || {isRowsLayout}', then: 'rounded')} {f:if(condition: '{isRowsLayout}', then: 'col-12 col-sm-3 shadow', else: 'card-img-top')}" href="{feedItemUrl}" data-disable-lightbox="{settings.disableLightbox}" target="_blank" data-disable-lightbox-mobile="{settings.disableLightboxMobile}" data-additional-url-parameters="{urlParameters}" data-video-type="youtube"> + <a class="sg-video-item overflow-hidden text-light sg-video__link position-relative {f:if(condition: '!{hasText} || {isRowsLayout}', then: 'rounded')} {f:if(condition: '{isRowsLayout}', then: 'col-12 col-sm-3 shadow', else: 'card-img-top')}" href="{feedItemUrl}" data-disable-lightbox="{settings.disableLightbox}" target="_blank" data-disable-lightbox-mobile="{settings.disableLightboxMobile}" data-additional-url-parameters="{urlParameters}" data-video-type="youtube" data-is-shorts="{settings.isShorts}"> <div class="sg-video__svg position-absolute top-50p start-50p translate-middle z-1"> <span class="sg-video__svg-inner d-flex shadow text-bg-black bg-opacity-50 rounded-circle justify-content-center p-2"> <vi:renderSvg color="currentColor" name="solid-play" width="24" height="24"></vi:renderSvg> @@ -184,10 +184,10 @@ <div class="overflow-hidden"> <f:if condition="{feedItem.thumbnailImageObject}"> <f:then> - <vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" /> + <vi:picture class="sg-video__image object-fit-cover h-100 w-100{f:if(condition: '{settings.isShorts}', then: ' sg-video__image--shorts')}" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" /> </f:then> <f:else> - <vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" /> + <vi:picture class="sg-video__image object-fit-cover h-100 w-100{f:if(condition: '{settings.isShorts}', then: ' sg-video__image--shorts')}" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" /> </f:else> </f:if> </div> diff --git a/Resources/Private/Templates/Youtube/Index.html b/Resources/Private/Templates/Youtube/Index.html index 1e162c787b26af1c6f616b80e3438c783a1d0925..7b4bdd84b078e00975ada6ba93edfc286efda7cf 100644 --- a/Resources/Private/Templates/Youtube/Index.html +++ b/Resources/Private/Templates/Youtube/Index.html @@ -148,15 +148,17 @@ <f:variable name="urlParameters">{f:if(condition: '{settings.urlParameters}', then: '{settings.urlParameters}', else: '{settings.globalUrlParameters}')}</f:variable> <f:variable name="feedItemUrl"><yt:urlWithQueryParameters url="{feedItem.url}" parameters="{urlParameters}" /></f:variable> <div class="sg-video__item"> + <f:debug>{settings}</f:debug> <f:if condition="{feedItem.thumbnail}"> <a class="sg-video__image-container sg-video-item" href="{feedItemUrl}" data-disable-lightbox="{settings.disableLightbox}" target="_blank" data-disable-lightbox-mobile="{settings.disableLightboxMobile}" data-additional-url-parameters="{urlParameters}" - data-video-type="youtube"> + data-video-type="youtube" + data-is-shorts="{settings.isShorts}"> <span> <yt:renderSvg color="currentColor" name="solid-play"></yt:renderSvg> - <img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.title}"/> + <img class="sg-video__image{f:if(condition: '{settings.isShorts}', then: ' sg-video__image--shorts')}" src="{feedItem.thumbnail}" alt="{feedItem.title}"/> </span> </a>