[TASK] improve thumbnail rendering by using the correct resolution

Classes/Service/VimeoService.php

@@ -233,7 +233,7 @@ class VimeoService implements LoggerAwareInterface {
 	 */
 	public function getVideo(int $videoId): ?array {
 		// use field filtering, to save on quota, see: https://developer.vimeo.com/guidelines/rate-limiting
-		$fieldsToSelect = 'uri,name,description,link,embed,pictures,release_time';
+		$fieldsToSelect = 'uri,name,description,link,embed,pictures,width,height';
 		try {
 			$response = $this->vimeoApiClient->request(self::API_VIDEO . $videoId . '?fields=' . $fieldsToSelect);
 		} catch (VimeoRequestException $e) {

Resources/Private/Templates/Vimeo/Index.html

@@ -133,13 +133,18 @@
 					<img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.name}" loading="lazy"/>
 				</f:then>
 				<f:else>
-					<f:if condition="{feedItem.pictures.sizes}">
-						<f:for each="{feedItem.pictures.sizes}" as="picture" iteration="iterator">
-							<f:if condition="{iterator.isLast}">
-								<img class="sg-video__image" src="{picture.link}" alt="{item.name}" width="{picture.width}" height="{picture.height}" loading="lazy"/>
-							</f:if>
-						</f:for>
+					<f:if condition="{feedItem.pictures.base_link}">
+						<img class="sg-video__image" src="{feedItem.pictures.base_link}_{feedItem.width}x{feedItem.height}?r=pad" alt="{item.name}" width="{feedItem.width}" height="{feedItem.height}" loading="lazy"/>
 					</f:if>
+					<f:comment>
+						<f:if condition="{feedItem.pictures.sizes}">
+							<f:for each="{feedItem.pictures.sizes}" as="picture" iteration="iterator">
+								<f:if condition="{iterator.isLast}">
+									<img class="sg-video__image" src="{picture.link}" alt="{item.name}" width="{picture.width}" height="{picture.height}" loading="lazy"/>
+								</f:if>
+							</f:for>
+						</f:if>
+					</f:comment>
 				</f:else>
 			</f:if>
 		</a>