Ajouter une bordure à l'image

Soutien
1

Bonjour à tous

Puis-je ajouter une bordure fine à une image JPG sans recourir à un composant de thème ? Je veux que cela reste simple et éviter, par exemple, ce composant :

J’ai essayé toutes les variations de la balise img auxquelles je pouvais penser. La seule chose qui a fonctionné a été d’intégrer l’image dans une balise kbd, mais c’est un peu étrange. C’est vraiment ce que je veux écrire :

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="photo montrant un poteau électrique moyenne tension désaffecté"
  width="75%"
  style="border: 1px solid gray">

Et voici une image d’exemple via un téléchargement standard :

L'image montre un pylône électrique ancien et rouillé avec des isolateurs et des appareils électriques. (Légendé par l'IA)
L'image montre un pylône électrique ancien et rouillé avec des isolateurs et des appareils électriques. (Légendé par l'IA)1920×1440 142 KB

La légende d’image par IA fait un très bon travail, je dois dire. Merci d’avance !

2 « J'aime »
3

Voici la copie HTML précédente collée .. aucune bordure évidente .. et plutôt petite aussi :

photo montrant un poteau électrique moyenne tension abandonné
photo montrant un poteau électrique moyenne tension abandonné1920×1440 142 KB

4 
.cooked img:not(.thumbnail,.ytp-thumbnail-image,.emoji), .d-editor-preview img:not(.thumbnail,.ytp-thumbnail-image,.emoji) {
    border: 4px solid red;
}

CSS piraté par devtools … YMMV :rofl:

L'image affiche une échelle de corde sans bordure visible et une certaine illisibilité dans le texte fourni. (Légendé par l'IA)
L'image affiche une échelle de corde sans bordure visible et une certaine illisibilité dans le texte fourni. (Légendé par l'IA)725×194 13.2 KB

1 « J'aime »
5

Le CSS personnalisé est supprimé des publications car quelqu’un pourrait faire quelque chose comme border: 1000px solid gray et rendre l’ensemble du sujet illisible.

Vous devez ajouter du CSS à un thème ou à un composant de thème pour ce faire, il n’y a pas de moyen simple de contourner cela. Vous pouvez cependant le rendre facultatif, image par image.

Vous pouvez donc, par exemple, ajouter ce CSS à un thème :

div[data-theme-image-border] img {
  border: 1px solid gray;
}

Et ensuite l’utiliser dans une publication comme ceci :

<div data-theme-image-border>
  <img src="votreurlici"/>
</div>
5 « J'aime »
6

Merci beaucoup. Quelques précisions.

@merefield : votre exemple a fonctionné lorsqu’il a été ajouté comme suit :

:gear: :play_button: Admin :play_button: Personnaliser :play_button: Thèmes = Défaut :play_button: Modifier CSS/HTML :play_button: Bureau :play_button: CSS

@awesomerobot : Je n’ai pas réussi à faire fonctionner votre code, malgré quelques tentatives de variations.

Notez que le premier exemple s’applique à l’ensemble du site et le second exemple s’applique (ou plutôt devrait s’appliquer) par image.

Toute autre suggestion est la bienvenue. La solution à l’échelle du site est acceptable, mais une application par image est probablement préférable.

PS : le sous-titrage par IA se détériore à chaque itération :smiley:

7

Ce Theme component pourrait vous intéresser

8

@Heliosurge Merci. J’avais noté ce composant dans mon OP. Mais je vais essayer aujourd’hui aussi.

1 « J'aime »
9

Je m’excuse, j’ai survolé le sujet et manqué cela. Mais comme d’autres l’ont mentionné ici, vous créeriez un composant personnalisé. L’avantage d’utiliser un composant existant est qu’il est potentiellement déjà maintenu.

Cependant, les TC sont également utiles pour étudier et utiliser des parties du code dans vos propres travaux personnalisés.

2 « J'aime »
10

J’utilise le système « Generic BBCode wrapper » pour cela :

J’ai mis [wrap=border]...[/wrap] autour de l’image à laquelle je veux ajouter une bordure, avec ce CSS :

.d-wrap[data-wrap="border"] {
    > img, > p > img, .lightbox, .image-wrapper img {
        border: 1px solid #555;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    }
}
2 « J'aime »
11

@simonk merci, ça marche pour moi et c’est par image aussi.

1 « J'aime »
12

Une publication a été fusionnée dans un sujet existant : Bords arrondis pour les images, les onebox, les blockquotes et plus encore