Agregar borde a la imagen

Hola a todos

¿Puedo añadir un borde fino a una imagen JPG sin recurrir a un componente temático? Quiero mantener esto simple y evitar, por ejemplo, este componente:

He probado todas las variaciones de la etiqueta img que se me ocurren. Lo único que funcionó fue incrustar la imagen en una etiqueta kbd, pero eso es un poco extraño. Esto es realmente lo que quiero escribir:

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="foto que muestra un poste eléctrico de media tensión en desuso"
  width="75%"
  style="border: 1px solid gray">

Y aquí hay una imagen de ejemplo a través de una carga estándar:

Debo decir que el subtitulado de imágenes por IA hace un muy buen trabajo. ¡Gracias de antemano!

2 Me gusta

Aquí está la copia HTML anterior pegada… no se ve ningún borde… y también es bastante pequeña:

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

CSS hackeado de devtools… YMMV :rofl:

1 me gusta

El CSS personalizado se elimina de las publicaciones porque alguien podría hacer algo como border: 1000px solid gray y hacer que todo el tema sea ilegible.

Necesitas agregar algo de CSS a un tema o a un componente de tema para hacer esto, no hay una buena manera de evitarlo. Sin embargo, puedes hacerlo opcional imagen por imagen.

Así que, por ejemplo, puedes agregar este CSS a un tema:

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

y luego usarlo en una publicación como esta:

<div data-theme-image-border>
  <img src="yoururlhere" />
</div>
5 Me gusta

Muchas gracias. Algunas aclaraciones.

@merefield: tu ejemplo funcionó cuando se añadió de la siguiente manera:

:gear: :play_button: Admin :play_button: Customize :play_button: Themes = Default :play_button: Edit CSS/HTML :play_button: Desktop :play_button: CSS

@awesomerobot: No pude hacer que tu código funcionara, a pesar de probar algunas variaciones.

Ten en cuenta que el primer ejemplo es para todo el sitio y el segundo ejemplo es (o más bien debería ser) por imagen.

Cualquier sugerencia adicional es bienvenida. La solución para todo el sitio es aceptable, pero una aplicación por imagen es probablemente preferible.

PD: el subtitulado de IA se está deteriorando con cada iteración :smiley:

Este Theme component podría ser de interés

@Heliosurge Gracias. Había notado ese componente en mi OP. Pero lo intentaré hoy también.

1 me gusta

Mi error, leí el tema por encima y me lo perdí. Pero como otros mencionaron aquí, crearías un componente personalizado. El beneficio de usar un componente existente es que potencialmente ya está mantenido.

Sin embargo, los TC también son útiles para estudiar y usar partes del código en tus propios trabajos personalizados.

2 Me gusta

Utilizo el sistema “Generic BBCode wrapper” para esto:

Pongo [wrap=border]...[/wrap] alrededor de la imagen a la que quiero añadir un borde, junto con este 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 Me gusta

@simonk gracias, eso me funciona y es por imagen también.

1 me gusta

Se fusionó una publicación en un tema existente: Bordes redondeados para imágenes, oneboxes, blockquotes y más