Adding border to image in slide show

JimR · 2019-02-25 03:02:59

I like a border on my images. BL has an option for a border with Single Image Pages, and even for thumbs, but not for images in the slide show.

I've added a border using CSS, but it's a little tricky to get it right. So I'm sharing how to get this done.

The trick is to use outline (not border), which will place the border OUTSIDE of the image without causing scaling. Border will draw a frame INSIDE the element, causing scaling.

The unfortunate side effect of adding this frame is when you make the screen smaller than the image. The frame will be cut off. I haven't found the trick to solve that. BL is using some magic to set the image size so scale within the window.

I'm fine using this CSS but I'd also like to ask for the feature to be added in the templates.

/* frame images in slide show */
.fancybox-slide .fancybox-image {
    outline: 1px solid #999;
}

Note, since BL is adding borders INSIDE images it always causes scaling. For example, I have thumbs set in the template to include a border. But the border makes the thumb scale down, making it a little softer. I'm trying out the CSS trick above to add frames to thumbs, so I get a sharper image without scaling.

Second part of my feature request is to have BL change to using outline instead of border in the CSS.

Last edited by JimR (2019-02-25 03:35:00)

rod barbee · 2019-02-25 03:32:24

I’ve been using padding along with a border.

JimR · 2019-02-25 03:39:42

rod wrote:

I’ve been using padding along with a border.

Hmm, not sure what padding will do.

Padding will cause the image to scale even when it's able to be seen full size.

Padding doesn't solve the problem of the image being larger than the screen and cutting off the outline.

rod barbee · 2019-02-25 04:16:50

the padding adds some space around the image and then the border is applied. The only problem I had with it is that the vertical images take up the entire height available, pushing the border up against the top and the bottom of the page area.

I've just been experimenting a bit though and just found that if I restrict the height a bit, say to 94%, I can add top: 3%; to center the image, giving it space all around. Here's the css I'm using:

/*Fancybox image styling
=======================================================*/

.fancybox-slide img {
    border: 1px solid black;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    padding: 8px;
    top: 3%;
    height: 94%;
}

I just now implemented the height and top properties, so I may still discover something that gets messed up.

You can see it in this album: you can see what it does here: https://backlight-2-100.barbeephoto.com … /nwt-2018/

JimR · 2019-02-25 05:07:01

I see, you're using the padding to create a nice frame. But your images are being scaled. Even on my large monitor your image is being scaled. For example, your tall image is 977px and being scaled down to 817px on my monitor. Even without the padding and border, your images are being scaled on my screen.

The problem I'm trying to solve is how to add a frame and NOT cause scaling. I'm using images with a height of 840px. So on a large monitor it's not going to scale. But if I use a 1px border in CSS, it causes the image to scale even though the entire image does fit on the screen.

If I add a padding or height property, it causes scaling. What I'm after is how to create an image and frame that doesn't have scaling.

If BL changed from border to outline in CSS, at least we could create images that fit on the screen without scaling. Same with the thumbs. Adding a border to thumbs in BL causes scaling, even when we can fit many on the screen at once.

When I use outline for the frame, the only problem I've found (so far) is that when the image must be scaled BL doesn't know about the frame and it gets cut off.

Last edited by JimR (2019-02-25 05:08:11)

rod barbee · 2019-02-25 06:04:12

I don’t really care about the scaling, I just want the whole image presentation to show.
I’ll try changing the image rendition size in the template and see if that makes a difference,

You could try using the box-sizing property on the img element
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

JimR · 2019-02-25 06:16:12

rob wrote:

You could try using the box-sizing property on the img element

Yup, knew about that. Using border with box-sizing: content-box to cause the border to draw outside the box is the same as just using outline.

If the border is drawn inside, it removes that space from the image (and will cause scaling).

I'm caring about the scaling because it causes the image to be less sharp. Granted I might be the only one that notices, but as a photographer I've trained my eye to look for this

If the image can fit entirely on screen, then there's no need for scaling. The simple fix in BL is to change from using border to outline. Then check the math for how to scale, when you need to scale (since the borders will then be drawn outside the box).

Using outline is a more "modern" approach, since it was created to keep boxes their intended size when adding borders.

Last edited by JimR (2019-02-25 06:16:42)

tgalex · 2019-02-25 08:06:46

Another option. I use LR for processing my raw images, usually dng format, and then export a lower resolution, smaller file size jpg of the image to upload to my website. During the export process I add a border to the image using the plugin LR/Mogrify 2 (http://photographers-toolbox.com/produc … grify2.php). It is a great little donation to use software that gives a ton of options for border size, style, color, etc. Since the border is now a part of my jpg that gets uploaded to my BL2 website scaling is not an issue. I have been using a 1px border on images on my site, but in the past have also played around with wider and double borders - all a matter of taste.

Community @ The Turning Gate

#1 2019-02-25 03:02:59

Adding border to image in slide show

#2 2019-02-25 03:32:24

Re: Adding border to image in slide show

#3 2019-02-25 03:39:42

Re: Adding border to image in slide show

#4 2019-02-25 04:16:50

Re: Adding border to image in slide show

#5 2019-02-25 05:07:01

Re: Adding border to image in slide show

#6 2019-02-25 06:04:12

Re: Adding border to image in slide show

#7 2019-02-25 06:16:12

Re: Adding border to image in slide show

#8 2019-02-25 08:06:46

Re: Adding border to image in slide show

Board footer