Re: [Adaptive Images] Utilisation de data-src-mobile
jeanmarie <[email protected]>
| Newsgroups | gmane.comp.web.spip.devel |
|---|---|
| Message-ID | <[email protected]> |
Salut,
merci pour tes retours.
Dans l'idée, c'est la piste Alsacreation oui, c'est d'ailleurs ce que
fait nativement le plugin (enfin, avec picture, source et size).
Mais je ne sais pas si c'est possible de le faire automatiquement dans
un squelette avec une image du contenu éditorial.
Sinon, une piste serait de générer les images en amont et de les
utiliser via des SET/GET...
jeanmarie
Le 29/03/2021 à 15:01, Pierre-Jean CHANCELLIER a écrit :
>
> Sinon, je viens de tomber là-dessus :
> https://css-tricks.com/techniques-for-context-specific-images/
>
> et là-dessus :
> https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
>
>
>
> Le 29/03/2021 à 13:38, jeanmarie a écrit :
>>
>> Salut,
>>
>> je cherche à afficher une image aux proportions différentes selon la
>> largeur de l'écran (= en portrait sur grand écran et en paysage sur
>> smartphone) sans que l'utilisateur·rice n'ait à fournir 2 images.
>>
>> J'ai donc essayé d'utiliser les variantes d’image pour petits écrans
>> avec data-src-mobile mais, de ce que je comprends de la doc, on ne
>> peut pas le faire avec des images issues du contenu (= document lié à
>> un article par exemple), ça doit obligatoirement venir du squelette,
>> c'est bien ça ?
>>
>> J'ai tenté avec ce code (dans une boucle document) :
>>
>> <imgsrc="[(#FICHIER|image_recadre{1:2, -, focus}|extraire_attribut{src})]"
>> data-src-mobile="[(#FICHIER|image_recadre{5:1, -, focus}|extraire_attribut{src})]"alt="Mon
>> image"/>
>>
>> J'ai bien les 2 versions mais je ne trouve pas la syntaxe pour
>> redimensionner l'image (ça m'affiche l'image en taille originale).
>>
>> J'ai également cherché avec ça
>>
>> [(#FICHIER|balise_img|adaptive_images{1024,'(max-width: 768px) 500, (max-width: 900px) 800, 1000px'})]
>>
>> mais là, ce sont les proportions selon la largeur d'écran que je
>> n'arrive pas à gérer.
>>
>> jeanmarie
>>