Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
Album-set thumbnails should have no borders and a .1 rem grey border when hover. This is a bilingual site using the language switch. When in Fr, thumbnails are fine as intended. But, when in En, there is a slight grey line below the thumbnails. Same CSS file used throughout.
What could cause this?
Last edited by pideja (2020-05-21 01:06:48)
Offline
Maybe the thumbnail size is just off by a pixel? In the english site, I would republish all images. And check that 'republish only thumbnails' is not checked in publisher settings.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Having published these thumbnails directly with Backlight and not thru LR, I'm not too sure how to republish.
Still, it is strange that the same images appear differently whatever language is used.
Offline
Sorry, I kind of missed same images... obviously republishing doesn't help in this case...
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
I am using this CSS I lifted from another site I designed. I adapted it to control these thumbnails:
/* album-set thumbnails */
.the__albumSet figure {
position : relative;
border-radius : 1px;
box-shadow : 4px 4px 4px rgba(0, 0, 0, 0);
height : 185px;
width : 320px;
}
/* album-set thumbnail border hover effect */
.the__albumSet figure {
padding : .1rem .1rem;
border : rgb(0, 0, 0) solid 1px;
background : transparent;
font-size : 0.6rem;
border-radius : 2px;
}
.the__albumSet figure:hover {
cursor : pointer;
background : rgb(206, 196, 182);
color : black;
}Notice I set the thumbnail height to 185px and the width to 320px. That's because I want a 16:9 ration (this being a cinematographer's site). If you calculate, 16:9 should come to 320x180px. The extra 5px is used so that I have a symetrical border on hover in the Fr. But it creates a 1px grey line in the En. I'm still playing around the CSS to find the offending line, if any.
Also, these thumbnails should be ICONIC. I do not wish to have titles under the thumbnails. However, the space for a title is still there.
Last edited by pideja (2020-05-21 02:31:34)
Offline
I looked at some of your custom CSS and you are setting items that can be done in the Backlight album. I would recommend that you set everything that you can in Backlight Designer and only use custom CSS for things that can't be done in Backlight Designer.
Instead of lifting code from another site, try to find the proper settings in Backlight Designer. It is really worth your time to have a clean implementation!
To get rid of the line, you can use
.albums figcaption {
border-top: 1px solid #000000;
}Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
I've noticed this errant border before in single language sites (mine and others). I think it may be a bug and have reported it.
In the album set template Grid settings even if you set the border to 0, that one single border above where the metadata would go (figcaption) is showing up. What I've done is to set the border color in the template to match the background color, basically the same thing Daniel is advising.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks, Daniel and Rod. That extra code got rid of the line in the En version. The Fr version remains the same.
As for the CSS, I'll review it and look at what I can change in Backlight. This whole segment started when I tried to change thumbnail size with Backlight but couldn't...
Offline
Pages: 1