[BUGFIX] Pass the shorts variable

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>

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>