Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2019-08-11 03:21:36

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Thumbnails, size & captions...

On this site https://pideja.ca/gbc/home/, I updated the pages of the albums to Pangolin from Okapi. So, there are new GBC-page and a new GBC-album I also assigned the CSS file used in the Okapi version.
The navigation is horizontal and very simple: ACCUEIL, PRODUCTIONS and CONTACT. The album-set is labelled PRODUCTIONS. The problem is in each of the productions (Albums).
Although I tried to copy the settings from the Okapi to the Pangolin pages, there are differences in the settings, sometimes difficult to reconcile.
The thumbnail size is one issue: I can't control the container size or the image size, both way too big.
Also, the is a box below each thumbnail that should display the filename of each image. As much as I review all the Backlight settings, I can't find where to control these functions.

Last edited by pideja (2019-08-11 03:25:10)

Offline

#2 2019-08-11 03:32:53

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Thumbnails, size & captions...

I finally re-assigned the Album pages back to the original Okapi pages and all seems well in GBC land.


For now!

Offline

#3 2019-08-11 03:40:53

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Thumbnails, size & captions...

I also assigned the CSS file used in the Okapi version.

Be aware that some selectors changed between Okapi and Pangolin. So if you see some weirdness, you may need to rewrite some css.

If you changed anything to do with image/thumbnail size or metadata, you'll need to republish.

Thumbnail captions are controlled in the album template under Thumbnail Grid > Metadata Display

Make sure that the caption text color is not the same as the background color.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#4 2019-10-10 00:40:06

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Thumbnails, size & captions...

This is one of the recurring issues I have with the albums I have already published: I can't control the thumbnail size and appearance when in the mobile format.

pideja.ca, pideja.ca/tnm, pideja.ca/duc and others...

This is a typical CSS used:

@media only screen and (min-width: 360px){.album thumbnail {
	position: relative;
	width: 166px;
	height: 125px;
}
}    

And setting Backlight>Designer>Templates>Album-pideja>Design>Thumbnail Grid>Aspect Ratio to 1:1 doesn't do anything.

I had already set these thumbnails a while ago, to a 4:3 format but it's ok on the large screen but on the phone it would be better, I think, at 1:1.

Offline

#5 2019-10-10 00:46:20

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Thumbnails, size & captions...

take a look at the Enforce Squares and Enforce Coverage controls in Thumbnail Grid. Try changing breakpoints


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#6 2019-10-10 00:55:49

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Thumbnails, size & captions...

Did that and no change. Smallest breakpoint (640px) used.

Offline

#7 2019-10-10 01:10:24

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,083
Website

Re: Thumbnails, size & captions...

Your css above states that on any device wider than 360px, your css will be used.
So, essentially it will apply to all devices unless you have another media query following that one that changes css at different width points


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#8 2019-10-10 03:39:54

pideja
Member
From: Montreal
Registered: 2013-02-26
Posts: 1,143

Re: Thumbnails, size & captions...

Changed

@media only screen and (min-width: 360px)

to

@media only screen and (max-width: 360px).album_thumbnail {
	position: absolute;
	width: 50px;
	height: 50px;
}

The thumbnail container does not change size or shape, but the image itself is larger than the container. Not truly satisfactory (I would prefer a 1:1 thumbnail) but it's an improvment of sorts.

Last edited by pideja (2019-10-10 03:42:59)

Offline

Board footer

Powered by FluxBB