28106 sujets

CSS et mise en forme, CSS3

Bonjour à tou-te-s,

J'ai un lien vers une photo grand taille placé sur une thumbnail de cette photo.
Je souhaite, dans le cadre de la création d'une feuille de style print, que l'attribut src de la thumbnail soit remplacé par l'attribut href du lien (puisque c'est le chemin vers l'image en grand).

Et tout ça, en css Smiley lol

Any ideas ?

Merci Smiley cligne
Modérateur
Ola,

a écrit :
l'attribut src de la thumbnail soit remplacé par l'attribut href du lien

A partir du moment ou tu veux taper sur le DOM le CSS c'est pas le bon outil...

Le mieux que j'ai trouvé c'est ça : https://css-tricks.com/replace-the-image-in-an-img-with-css/
Pousser l'image existante et mettre une nouvelle taille et une nouvelle image en background-image. Mais pas sur du comportement avec le print.

Sinon il doit y avoir un truc a faire avec la balise <picture> et les <media> je pense : https://www.w3schools.com/TAGS/tag_picture.asp mais c'est dans le HTML pas dans le CSS...
Merci pour ta réponse _laurent.

Le remplacement d'image que tu proposes me parait bien mais le souci que je rencontre, c'est que l'image qui doit être remplacée n'est pas systématiquement la même, avec le même nom. Il s'agit des thumbnails des galeries photo de Wordpress.
Dans (presque) chaque article, il y a une galerie différente, avec des noms d'images différents.
Donc, il faut que le code css me permette de ne pas tenir compte du nom.
Pour le moment, j'ai pu faire en sorte d'identifier ces images de la manière suivante :
img[src$="-150x150.jpg"] {}

Mais, je ne sais pas comment dire en css que pour les images que je cible, il faudrait retirer la partie "-150x150".
Ou bien, sachant que le chemin de l'image que je souhaite afficher pour l'impression est indiqué dans le lien appliqué sur la thumbnail, que je puisse remplacer la source de l'image ou le mettre en background (comme tu le suggères) par le href du lien.
<a href="http://xxx.xxx.xx/wp-content/uploads/2019/05/01.jpg" rel="lightbox[6871]"><img width="150" height="150" src="http://xxx.xxx.xx/wp-content/uploads/2019/05/01-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-2-6893" srcset="http://xxx.xxx.xx/wp-content/uploads/2019/05/01-150x150.jpg 150w,  http://xxx.xxx.xx/wp-content/uploads/2019/05/01-100x100.jpg  100w" sizes="(max-width: 150px) 100vw, 150px"></a>

Il y a bien l'utilisation de cet attribut :
content: " (" attr(href) ")";

Mais, vu que ça concerne le lien, je n'arrive pas à l'appliquer sur le src de l'image...
Modifié par Oneday34 (12 Sep 2019 - 09:08)
Modérateur
Oneday34 a écrit :
Mais, je ne sais pas comment dire en css que pour les images que je cible, il faudrait retirer la partie "-150x150".

En CSS on ne peut pas modifier le DOM.

Oneday34 a écrit :
Ou bien, sachant que le chemin de l'image que je souhaite afficher pour l'impression est indiqué dans le lien appliqué sur la thumbnail, que je puisse remplacer la source de l'image ou le mettre en background (comme tu le suggères) par le href du lien.
[...]
[code=css]content: " (" attr(href) ")";

Ça aurait été une bonne idée malheureusement on ne peut pas réutiliser un string issue de attr() comme une url pour un background par exemple...

Mais du coup tu ne peut ni modifier le html, ni mettre du Js plutôt ?
Zut...
Js, je ne suis pas compétent... Smiley sweatdrop
Oui, je peux modifier le html mais ça me faisait soit modifier un module (ce que je ne préfèrerai pas pour profiter des mises à jour sans soucis) soit reprendre tous les articles concernés.

Bon, je vais y réfléchir.
Merci pour ton aide en tout cas.
Modifié par Oneday34 (12 Sep 2019 - 11:33)
Modérateur
Apres en JS c'est pas grand chose c'est juste modifier un peu le DOM pour faciliter la gestion en CSS mais bon.

Après peut être que quelqu'un d'autre ici pourra trouver un hack en full CSS mais moi perso je ne vois pas comment faire ça Smiley ohwell

Bonne continuation et sinon hésites pas a faire un autre sujet Js pour voir comment on peut régler ça...