Piwigo.org

Katryne · 2026-03-02 15:47:08

Bonjour,

J'utilise avec bonheur le code du plugin extended description pour insérer une photo de mon piwigo dans la description d'une autre.
J'ai aussi créé depuis des lustres une class de css pour encadrer une photo et l'ombrer.
Mais je n'arrive pas à appliquer le css à la photo citée via extended description : cela encadre tout le paragraphe et l'effet css s'étale d'une marge à l'autre au lieu d'encadrer la photo, comme pour un paragraphe qui contiendrait la photo.

Pour montrer ce que je veux obtenir, j'ai mis dans une description, 2 fois la même photo : la première avec le code d'extended description, la seconde avec l'insertion classique d'une image à partir de son url : https://album.chauvigne.info/picture?/2 … _francisco

Est-il possible d'appliquer une class css à la photo citée via Extended description et non à son conteneur ?

Dernière modification par Katryne (2026-03-02 15:47:58)

polowigo · 2026-03-04 07:08:15

Hello Katryne,

Dans le premier cas tu as entre 2 paragraphes un span class="img-cadre" contenant un lien contenant l'img.
Dans le second cas, tu as une img class="img-cadre" directement dans un paragraphe.
Comment souhaites-tu organiser les choses en fait ?

polowigo · 2026-03-04 07:23:56

As-tu essayé avec un span class="img-ed" et placer les directives de "img-cadre" dans une classe .img-ed IMG ?

Katryne · 2026-03-04 07:26:11

Polowigo, bonjour !
Ce n'est pas que je veuille organiser d'une façon ou d'une autre, le souci est que je n'arrive pas à appliquer du css à une image insérée via le code généré par le plugin Extended description, car en ce cas, l'image étant dans un span, le css est appliqué au span (pleine largeur) et pas à l'image. Je voulais savoir s'il est possible de faire autrement avec le code d'extended description.
Si je veux mon css, je vais devoir me passer d'extended description et passer par l'url classique.

Katryne · 2026-03-04 07:29:05

La solution que t'as postée pendant que je répondais, je ne la comprend pas trop.

polowigo · 2026-03-04 10:40:44

C'est pour ça que je t'ai parlé d'organisation car je ne suis pas certain d'avoir tout capté :
- le span est-il créé par Extended description ?
- la classe img-cadre est-elle créée par toi ou par Extended description ?
- la classe img-cadre est-elle attribuée au span par toi ou par Extended description ?
La seconde image hors E.d. se voit, elle aussi, attribuer la classe img-cadre, est-ce de ton fait ?

Katryne · 2026-03-04 11:00:40

- c'est moi qui ai encadré le code de extended description de span comme ça :

Code:

<span class="img-cadre">[photo id=10453]</span>

- la classe img-cadre est créée par moi dans LFE et c'est moi qui l'ai appliquée dans le 1er cas au span qui entoure la "citation d'image" d'Extended description, dans le 2e cas à l'image.

Code:

.img-cadre,#theImage img  {
  display: block;
  padding:1%;
  margin: 1rem auto;
  margin-top: 10px;
  text-align:center;
  box-shadow: 5px 5px 20px #151515;
}

C'est une class que j'utilise sur tous mes sites, Piwigo ou pas.
- Dans le 2e cas, j'ai mis dans un paragraphe l'image elle-même affectée de la class, comme ça :

Code:

<p style="text-align: center;">
    <img alt="" class="img-cadre" src="https://album.chauvigne.info/i?/upload/2025/02/16/20250216093459-efcc0529-la.jpg" style="width: 1008px; height: 634px;" /></p>

Et j'ai centré le paragraphe, parce que ça marche pas toujours quand je mets le centrage d'image dan la class.

polowigo · 2026-03-04 11:14:45

Donc, pour en revenir à mon #3, je verrais ça :

Code:

<span class="img-ed">[photo id=10453]</span>

et :

Code:

.img-cadre, #theImage img, .img-ed img {
  display: block;
  padding:1%;
  margin: 1rem auto;
  margin-top: 10px;
  text-align:center;
  box-shadow: 5px 5px 20px #151515;
}

Pas sûr que ça fonctionne par contre.

Katryne · 2026-03-04 11:30:31

Ben si ça fonctionne, homme de peu de foi ! Merki !

polowigo · 2026-03-04 11:59:04

Mais toujours en quête d'ataraxie. :-)

Katryne · 2026-03-04 12:57:35

Ne crois pas que tu vas t'en tirer comme ça.
En fait, ça marche pas tout le temps du 1er coup, que j'arrive d'un lien cité ou de l'admin après enregistrement des modifs, le css n'est pas appliqué de suite, il faut lui donner un coup de CTRL+F5.
Faut que je rajoute de l"!important" dans le css ?

polowigo · 2026-03-04 13:09:43

Tu sais ce que je pense des !important qui se baladent un peu partout...

Perso je placerais ce css dans "custom" plutôt que LFE puis, si ça ne fonctionne pas, je vérifierais à l'aide de l'inspecteur si les directives ne sont pas surchargées ailleurs avec de l'important justement (mais je ne pense pas que ce soit le cas).

Katryne · 2026-03-04 13:24:37

Oui, c'est tout bon maintenant et sans être !important.

Piwigo.org

Annonce

#1 2026-03-02 15:47:08

[Résolu] Extended description : appliquer une class à une photo insérée

#2 2026-03-04 07:08:15

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#3 2026-03-04 07:23:56

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#4 2026-03-04 07:26:11

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#5 2026-03-04 07:29:05

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#6 2026-03-04 10:40:44

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#7 2026-03-04 11:00:40

Re: [Résolu] Extended description : appliquer une class à une photo insérée

Code:

Code:

Code:

#8 2026-03-04 11:14:45

Re: [Résolu] Extended description : appliquer une class à une photo insérée

Code:

Code:

#9 2026-03-04 11:30:31

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#10 2026-03-04 11:59:04

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#11 2026-03-04 12:57:35

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#12 2026-03-04 13:09:43

Re: [Résolu] Extended description : appliquer une class à une photo insérée

#13 2026-03-04 13:24:37

Re: [Résolu] Extended description : appliquer une class à une photo insérée

Pied de page des forums