-
Kevin von Spiczak authoredKevin von Spiczak authored
Index.html 1.96 KiB
<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>