Aggiungi bordo all'immagine

Ciao a tutti

Posso aggiungere un bordo sottile a un’immagine JPG senza ricorrere a un componente del tema? Voglio mantenere la semplicità ed evitare, ad esempio, questo componente:

Ho provato ogni variazione del tag img a cui riesco a pensare. L’unica cosa che ha funzionato è stata incorporare l’immagine in un tag kbd, ma è un po’ strano. Questo è davvero quello che voglio scrivere:

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="foto che mostra un palo della media tensione in disuso"
  width="75%"
  style="border: 1px solid gray">

Ed ecco un’immagine di esempio tramite caricamento standard:

La didascalia generata dall’IA fa un ottimo lavoro, devo dire. Grazie in anticipo!

2 Mi Piace

Ecco la copia HTML incollata in precedenza… nessun bordo evidente… e anche piuttosto piccola:

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

devtools hacked CSS … YMMV :rofl:

1 Mi Piace

Il CSS personalizzato viene rimosso dai post perché qualcuno potrebbe fare qualcosa come border: 1000px solid gray e rendere l’intero argomento illeggibile.

È necessario aggiungere del CSS a un tema o a un componente del tema per farlo, non c’è un modo semplice per aggirarlo. È possibile renderlo opzionale immagine per immagine, tuttavia.

Quindi, ad esempio, puoi aggiungere questo CSS a un tema:

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

e poi usarlo in un post come questo:

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

Molte grazie. Alcuni approfondimenti.

@merefield: il tuo esempio ha funzionato quando aggiunto come segue:

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

@awesomerobot: Non sono riuscito a far funzionare il tuo codice, nonostante abbia provato alcune varianti.

Nota che il primo esempio è valido per tutto il sito e il secondo esempio è (o meglio, dovrebbe essere) per immagine.

Qualsiasi ulteriore suggerimento è benvenuto. La soluzione valida per tutto il sito è accettabile, ma un’applicazione per immagine è probabilmente preferibile.

PS: il captioning AI sta peggiorando ad ogni iterazione :smiley:

Questo Theme component potrebbe interessare

@Heliosurge Grazie. Avevo notato quel componente nella mia OP. Ma ci proverò anche oggi.

1 Mi Piace

Colpa mia, ho letto l’argomento superficialmente e me lo sono perso. Ma come altri hanno menzionato qui, creeresti un componente personalizzato. Il vantaggio, tuttavia, di utilizzare un componente esistente è che potenzialmente è già mantenuto.

Tuttavia, i TC (componenti personalizzati) sono anche utili per studiare e utilizzare parti del codice nei propri lavori personalizzati.

2 Mi Piace

Utilizzo il sistema “Generic BBCode wrapper” per questo:

Ho inserito [wrap=border]...[/wrap] attorno all’immagine a cui voglio aggiungere un bordo, insieme a questo 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 Mi Piace

@simonk grazie, funziona per me ed è anche per immagine.

1 Mi Piace

Un post è stato unito a un argomento esistente: Bordi arrotondati per immagini, onebox, blockquote e altro