Add image border per page

[canoot65]

In Main Options > Content Areas you can set image borders. But that applies to the whole site.
When that option is left unchecked, how can you add a border to images on a specific page?
I would like to do that on this page: http://www.nordoy.net/folkeliv2/

Thank you for helping!

[scrambler]

If you globally want no border and only want it on a few images, add it as an inline style in the image tag.

After you insert the image, switch your content editor to text mode, and add the inline style like below. There are various CSS property that can be used to create a border effect, you will have to choose what you want.

To simply add a colored border you can use  border:1px solid black;   type of CSS property. You can also add a Box shadow, and you can eventually add padding if you want a double border, like a large white border with a thin darker one on the edge.

<img style=”padding:5px;border:1px solid grey;” class=…  src=…..  />

If you are going to need to do that a lot, you could create your own class to hold the styling, and simply add the class to the image tag.

For example to create an image border class, you would add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

.myborder1 {padding:5px;border:1px solid grey;}

Then to apply the style to your image, you would just add the class in the class attribute of the image (with a space between classes). It would look like

<img class=”myborder1 otherclasses…” src=…..  />

[canoot65]

Yes, I tried out both alternatives, and they both work perfectly.

Thanks so much!

[Bobthearch]

Another alternative is to simply add the border to individual photos when cropping, resizing, and preparing the images for upload.

A big tip, crop and resize the photo before adding the border, or the border sizes won’t match.

[Author]

Posts