Adicionar borda à imagem

[robbie.morrison]

Olá a todos

Posso adicionar uma borda fina a uma imagem JPG sem recorrer a um componente de tema? Quero manter isto simples e evitar, por exemplo, este componente:

Rounded Borders for images, oneboxes, blockquotes & more

Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity topic thumbnail support for: list ro…

Tentei todas as variações da tag img que consigo pensar. A única coisa que funcionou foi incorporar a imagem numa tag kbd, mas isso é um pouco estranho. É realmente isto que quero escrever:

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="foto mostrando poste de energia de média tensão abandonado"
  width="75%"
  style="border: 1px solid gray">

E aqui está uma imagem de exemplo através de upload padrão:

A legendagem de imagem por IA faz um trabalho bastante bom, devo dizer. Obrigado!

[robbie.morrison]

Aqui está a cópia anterior do HTML colada… sem borda aparente… e meio pequena também:

[merefield (Robert)]

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

CSS hackeado do devtools … YMMV

[awesomerobot (Kris)]

@robbie.morrison

style="border: 1px solid gray"

O CSS personalizado é removido das postagens porque alguém poderia fazer algo como border: 1000px solid gray e tornar todo o tópico ilegível.

Você precisa adicionar algum CSS a um tema ou a um componente de tema para fazer isso, não há uma ótima maneira de contornar isso. No entanto, você pode torná-lo opcional imagem por imagem.

Portanto, por exemplo, você pode adicionar este CSS a um tema:

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

e então usá-lo em uma postagem como esta:

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

[robbie.morrison]

Muito obrigado. Algumas informações adicionais.

@merefield: seu exemplo funcionou quando adicionado da seguinte forma:

Admin Customize Themes = Default Edit CSS/HTML Desktop CSS

@awesomerobot: Não consegui fazer seu código funcionar, apesar de tentar algumas variações.

Observe que o primeiro exemplo é para todo o site e o segundo exemplo é (ou melhor, deveria ser) por imagem.

Qualquer outra sugestão é bem-vinda. A solução para todo o site é aceitável, mas uma aplicação por imagem é provavelmente preferível.

PS: a legendagem por IA está se deteriorando a cada iteração

[Heliosurge (Dan DeMontmorency)]

Este Theme component pode ser de interesse

Rounded Borders for images, oneboxes, blockquotes & more

Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity topic thumbnail support for: list ro…

[robbie.morrison]

@Heliosurge Vlw. Eu tinha notado esse componente na minha OP. Mas vou tentar hoje também.

[Heliosurge (Dan DeMontmorency)]

Minha falha, li o tópico rapidamente e perdi isso. Mas como outros mencionaram aqui, você criaria um componente personalizado. O benefício de usar um componente existente é que ele pode já estar em manutenção.

No entanto, os TCs também são úteis para estudar e usar partes do código em seus próprios trabalhos personalizados.

[simonk (Simon King)]

Eu uso o sistema “Generic BBCode wrapper” para isso:

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Eu coloco [wrap=border]...[/wrap] em volta da imagem que quero adicionar uma borda, junto com 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);
    }
}

[robbie.morrison]

@simonk obrigado, isso funciona para mim e é por imagem também.