data-path image

[mat321$]

Hello,
"
Une petite question, quand j'insère une image avec l'éditeur de joomla il rajoute : data-path="local-images:/activitees/Viapelvoux/viapelvouxbandeau1.jpg"

Je me demandait juste à quoi sert le "data-path" sans ca marche bien aussi d'aillerus c'est ce que je faisait quand je code directement mais j'aimerais bien connaitre l'utilité du data-path !!

Le code complet :

<img src="images/activitees/Viapelvoux/viapelvouxbandeau1.jpg" decoding="async" loading="lazy" width="1920" height="1080" alt="Pont de singe VIA ferrata Pelvoux" data-path="local-images:/activitees/Viapelvoux/viapelvouxbandeau1.jpg"/>

Merci de votre aide

[daneel]

Bonsoir mat321$ ,

Il faut savoir que les attributs data- permettent de stocker des données supplémentaires qui peuvent être utilisées par des scripts JavaScript pour manipuler l'élément ou pour d'autres traitements. Ils rendent le code plus lisible et maintenable en séparant les données de la logique de présentation et sont ignorés par les navigateurs, ce qui signifie qu'ils n'affectent pas le rendu de la page. Cela les rend utiles pour stocker des métadonnées sans risque de conflit avec les attributs HTML standards.

On a le cas par exemple lors de l'activation du chargement différé natif (lazyload), l'attribut src du code html est vide (donc pas d'image chargée). Lorsque l'image défile dans la zone d'affichage, l'url de l'image est copiée de data-path vers src, l'image est donc affichée après le chargement de page et uniquement à l'action du scroll.

L'autre utilisation est l'indication de la source externe ( on a désormais des plugins tiers pour connecter la gestion des medias à différents cloud comme dropbox, onedrive, unsplash, pexels, etc. voir : https://joomla.digital-peak.com/products/dpmedia ou amazon s3 : https://extensions.joomla.org/extens...s3-filesystem/ ).

[mat321$]

Hello,

Merci pour ces infos !!

D'ailleurs, je ne trouve pas le plugin lazy load sur joomla 5, il a disparu ou a été renommé ?

Merci

Bonne journée

[lefabdu51]

bonjour, deux liens en rapport avec ta question:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

Et la un exemple d accès aux données en javascript et en css

https://developer.mozilla.org/fr/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes