THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Je cherche à optimiser les images d'un carousel en homepage en utlisant la balise <picture> qui permet de définir plusieurs images en fonction de la largeur de l'écran.

Je coince sur la méthode à mettre en oeuvre notamment pour :
1/ uploader un image optimisée pour chaque écran (desktop, tablette, mobile)
2/ obtenir les url des dites images pour alimenter la baliise <picture>

<picture>
    <source srcset="" media="(min-width: 1170px)">
    <source srcset="" media="(min-width: 720px)">
    <source srcset="" media="(min-width: 320px)">
    <img srcset="">
</picture>

Si quelqu'un a une idée brillante, je suis tout ouïe.

Offline


Salut NOG,

Je ne vois pas trop de solution mis à part coder un module qui te permet d'uploade 3 images pour chaque "image"...

Si tu passes par les boucles Thelia avec différents width/height en paramètres ça ne te convient pas ?


Aide les autres, ils t'aideront en retour.

Offline


Via les boucles je suis contraint d'utiliser la même image. Idéalement je souhaite utiliser des images ayant une composition spécifique en fonction de la largeur de l'écran.

Offline


Tu pourrais utiliser le module Tags pour identifier les images à utiliser dans les diverses résolutions (ex. large, medium, small), avec par sécurité, une image par défaut si le tag n'est pas défini.

Exemple à tester et sophistiquer si besoin :

{function srcset productId=0 tag=""}{strip}
   {loop type="image" name="img" product=$productId limit=1 tag=$tag ...}{$IMAGE_URL}{/loop}
   {elseloop rel="img"}
       {loop type="image" name="fallback" product=$productId  limit=1 ...}{$IMAGE_URL}{/loop}
   {/elseloop}
{/strip}{/function}

<picture>
    <source srcset="{srcset productId=$ID tag='large'}" media="(min-width: 1170px)">
    <source srcset="{srcset productId=$ID tag='medium'}" media="(min-width: 720px)">
    <source srcset="{srcset productId=$ID tag='small'}" media="(min-width: 320px)">
    <img srcset="">
</picture>

OpenStudio Toulouse