Image frame on top not visible

Rainer Goergen · 2016-06-10 17:37:04

In backlight 1.02 Photoswipe the frame around the image at the top is not visible - only in fullscreen mode (Desktop size).

In mobile size the whole image with frame is shown:

Rainer

Last edited by Rainer Goergen (2016-06-11 02:22:13)

rod barbee · 2016-06-10 22:39:20

Rainer, can you check the location of your screen shot files? They're not coming through and the urls go to 404 Not found errors

Matthew · 2016-06-11 01:24:21

Backlight's implementation of Photoswipe does not support borders around images; this is a customization you've made, so one that you are ultimately responsible for.

Off the top of my head, I would suggest trying to set box-sizing:border-box in your CSS, or try applying the border to a different element. But it may simply be that Photoswipe is not coded to accommodate image borders.

rod barbee · 2016-06-11 01:38:18

for what it's worth, for the albums I've looked at, the borders around your images look fine. Using Firefox and Chrome

Rainer Goergen · 2016-06-11 02:35:35

I mean the vertical images. Border is on Desktop only in fullscreen mode ok, not in normal mode on desktop (window) etc..
Wherefore the images on my NAS are no more visible? don't know, I have maken an update of the firmware.

Rainer

Rainer Goergen · 2016-06-11 02:37:55

Thanks Matthew, I am only testing and reporting things I find not normal for me.

Rainer

rod barbee · 2016-06-11 04:08:17

can you provide a link to an album that has any vertical images? So far, all of the albums I've looked at contain only horizontal images.

Matthew · 2016-06-11 11:30:15

Probably it's because your vertical images are taking up all of the available space, so the border is getting pushed outside the viewable area.

rod barbee · 2016-06-12 00:31:00

It's as Matt says.
The border is still there, it's just not visible because it's blending with the top bar.
I've got a vertical image in this album: http://backlight-rb-test.barbeephoto.co … rst-album/
the image output is set to the maximum of 2000px.
The reason you can see the border on this image is that I've set UI Background color to nearly transparent: RGBA(0, 0, 0, 0.03)

So your options are to use smaller images or to adjust your background colors.

You could add some margin-top to the custom css rule that also contains the borders, but that will push the image down and the bottom border would be hidden. So you'd be back to adjusting UI Background transparency to allow the borders to be seen.

Rainer Goergen · 2016-06-13 23:20:35

Fixed - changed the value back from new 48 px to 44 px:

.pswp__top-bar {
font-size: 14px;
width: 100%; height: 44px;
}

.pswp__counter {
height: 44px;
line-height: 44px;
}

Rainer

Community @ The Turning Gate

#1 2016-06-10 17:37:04

Image frame on top not visible

#2 2016-06-10 22:39:20

Re: Image frame on top not visible

#3 2016-06-11 01:24:21

Re: Image frame on top not visible

#4 2016-06-11 01:38:18

Re: Image frame on top not visible

#5 2016-06-11 02:35:35

Re: Image frame on top not visible

#6 2016-06-11 02:37:55

Re: Image frame on top not visible

#7 2016-06-11 04:08:17

Re: Image frame on top not visible

#8 2016-06-11 11:30:15

Re: Image frame on top not visible

#9 2016-06-12 00:31:00

Re: Image frame on top not visible

#10 2016-06-13 23:20:35

Re: Image frame on top not visible

Board footer