Adding a border to a blog post image

When you attach an image to a blog post there is no option in the Add-ons section to include an image border, sometimes a blog image looks better with and sometimes without an image border so a css style sheet edit would be global and would not achieve the individual image requirement.

My solution was to create the post with the image and then check out the front end page content to obtain the image id e.g. “det_img_66”.

Then I created a new html block on the Blog default layout page and included this in the block.

style type=“text/css”
#det_img_66{border: 1px solid #000 !important;}
#det_img_67{border: 1px solid #000 !important;}
/style

With the style tag correctly formatted of course <>.

Any new blog post with an image that needs a border just gets another line added for its image id as indicated above for the 66 and 67 image.

Someone else might find a use for this too.

E.g. use

.ty-blog__img-block [id^="det_img_"] {
    border: 1px solid #000 !important;
}
1 Like

Thanks for the alternative

1 Like