Add border to image

Support
1

Hello all

Can I add a thin border to a JPG image without resorting to a theme component? I want to keep this simple and avoid, for instance, this component:

I have tried every variation of the img tag that I can think of. The only thing that worked was to embed the image in a kbd tag, but that is a bit odd. This is really what I want to write:

<img src="upload://jIMXtLgb7enbLUiahXVT1Jz14n4.jpeg"
  alt="photo showing derelict medium voltage power pole"
  width="75%" 
  style="border: 1px solid gray">

And here is a sample image via standard upload:

The image shows an old, rusty electricity pylon with insulators and electrical apparatus. (Captioned by AI)
The image shows an old, rusty electricity pylon with insulators and electrical apparatus. (Captioned by AI)1920×1440 142 KB

The AI image captioning does a pretty good job, I must say. TIA!

2 Likes
3

Here is the earlier HTML copy/pasted in .. no border evident .. and kinda small too:

photo showing derelict medium voltage power pole
photo showing derelict medium voltage power pole1920×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;
}

devtools hacked CSS … YMMV :rofl:

The image displays a rope ladder with no visible border and some illegibility in the text provided. (Captioned by AI)
The image displays a rope ladder with no visible border and some illegibility in the text provided. (Captioned by AI)725×194 13.2 KB

1 Like
5

custom CSS gets stripped out of posts because someone could do something like border: 1000px solid gray and make the whole topic unreadable

You need to add some CSS to a theme or a theme component to do this, no great way around it. You can make it optional on an image-by-image basis though.

So for example, you can add this CSS to a theme:

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

and then use it in a post like this:

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

Many thanks. Some follow‑up.

@merefield: your example worked when added as follows:

☰ ▸ Admin ▸ Customize ▸ Themes = Default ▸ Edit CSS/HTML ▸ Desktop ▸ CSS

@awesomerobot: I could not get your code to work, despite trying some variations.

Note that first example is site‑wide and the second example is (or rather should be) per‑image.

Any further suggestion welcome. The site‑wide solution is acceptable but a per‑image application is probably preferable.

PS: the AI captioning is deteriorating with every iteration :smiley:

7

This Theme component maybe of interest

8

@Heliosurge Tx. I had noted that component in my OP. But I will give it a try today too.

1 Like
9

My bad skimmed topic and missed that. But as others mentioned here you would create a custom component. The benefit though of using an existing component is potentially it is already maintained.

However TC are also handy to study and use parts of the code in your own custom works.

2 Likes
10

I use the “Generic BBCode wrapper” system for this:

I put [wrap=border]...[/wrap] around the image that I want to add a border to, along with this 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 Likes
11

@simonk tx, that works for me and is per‑image too.

1 Like
12

A post was merged into an existing topic: Rounded Borders for images, oneboxes, blockquotes & more