Index.html

<f:layout name="Default"/>

<f:section name="main">
	<f:if condition="{error}">
		<f:then>
			<p>{error}</p>
		</f:then>
		<f:else>
			<f:if condition="{showApiResult}">
				<f:debug>{response}</f:debug>
			</f:if>

			<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}" loading="lazy"/>
												</div>
											</f:if>
										</f:for>
									</f:if>
								</f:else>
							</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:section>