Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: accessibility and performance improvement
All checks were successful
Build / build (push) Successful in 4m17s
Details
Build / deploy-stage (push) Successful in 3m23s
Details
Build / switch-stage (push) Successful in 2m31s
Details

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-24 12:52:20 +02:00
parent edc2cf7634
commit 3fddfdff67
3 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
View File

@@ -25,7 +25,33 @@
<div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
<f:if condition="{card.images}">
<f:then>
<f:image image="{card.images.0}" alt="{card.images.0.alternative}" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" />
<picture class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
<!-- WEBP source -->
<source
type="image/webp"
srcset="
{f:uri.image(image:card.images.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
{f:uri.image(image:card.images.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
{f:uri.image(image:card.images.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
sizes="(max-width: 767px) 90vw,
{f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
<!-- Fallback source -->
<source
srcset="
{f:uri.image(image:card.images.0, width:'320c', cropVariant:'default')} 320w,
{f:uri.image(image:card.images.0, width:'400c', cropVariant:'default')} 768w,
{f:uri.image(image:card.images.0, width:'538c', cropVariant:'default')} 1024w"
sizes="(max-width: 767px) 90vw,
{f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
<f:image
image="{card.images.0}"
treatIdAsReference="1"
cropVariant="default"
width="538c"
alt="{card.images.0.alternative}"
class="w-full h-full object-cover"
/>
</picture>
</f:then>
<f:else>
<div class="w-full h-full bg-gray-300 flex items-center justify-center">