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.
Hi,
is there a way to have the bread crumbs displayed in the same space where the "Play, pause, expand" buttons are shown, when using the EXPANDED option:
"
Target
The "Expanded" option fills the main column, overrides the desktop aspect ratio, and hides the breadcrumbs and page copy.
"
I just came across testing what expanded will do and it looks so much nicer and cleaner, that I want to use it. But since I have a lot of galleries listed in a submenu, that bring you directly to the galleria view (I have display thumbs disabled), visitors will have a hard time to know what gallery they are looking at or already have looked at, if they can't see which one they are in at the moment.
I would have used page copy, but that is also overridden, when using the expanded option.
Any insight is appreciated;-)
Offline
You can disable the breadcrumbs. Or you can implement some custom jQuery to move them elsewhere on the page. But the built-in options won't do what you're asking about. The gallery presentation and the breadcrumbs are separate components on the page.
Offline
Some more questions concerning the Galleria:
I have a white template and a dark mode template. Depending on my image sets, I use either one.
Since I like clean and simple presentations, I have set my Galleria template to:
Negative Space: 24px (I dislike it, when the images stick to the masthead and the footer, they need some space)
Target: Expanded (Looks great)
Controls: Inside (it is nice when they fade out, very clean look)
Now, on a larger computer screen that looks and works great. But when I check it on my iPhone, the controls overlap the images and since it is a touch device, they don't fade out. It just does not look nice, when the counter is overlapping on the left and the other controls on the right.
In this case, the controls "outside" option works much better.
Is there any way to have the controls outside on a small screen?
Also: When I use the feature "Force Use of Client Height", I don't see a difference on my iPhone, but it messes up the layout on a large screen, since the images will not displays centered anymore. They are moved down a bit, not nice.
One more thing: Turning on the "Shadows On" button doesn't give me any shadows. Not in Galleria and also not in the Pangoline Albums. Am I missing something? and shouldn't there be sliders for blurry and set off, when turning shadows on? Or does that have to be done via custom css again?
Thanx.
Offline
I don't see any shadows being applied either. (just on the controls)
I've added them with custom css using the .galleria-container selector.
In Pangolin album thumbnails, the shadow is very subtle. If you want something more you'll need custom css.
This is what the inspector is showing:
box-shadow: 0 0 3px rgba(0,0,0,0.25);
From what I gather from the text in the template, the "Force Use of Client Height" should be used with a full-screen page template. I've not tried it though.
I don't know about placement of controls on mobile.
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 for the input Rod!
I will play around with the galleria-container.
Offline
The galleria-container selector works only, if the Target is defined as "inline". When it is set to expanded, obviously a shadow can't be seen.
In inline mode, the whole box gets a shadow, which is not what I wanted.
I used the img selector to apply the shadow only to the images itself and that works fine, if anybody is interested:
.galleria-container img {box-shadow: 10px 10px 22px rgba(0,0,0,0.5) !important;}
The "Negative space" is set to 24px in expanded mode to get some space around the image. Without that, shadows make no sense, I guess.
In full screen mode it makes it look like a museum gallery once the controls faded out.
Offline
Well, the drawback seems to be that the shadows are fixed in size and on my iPhone 5s they are way too big for the image size displayed. I guess I have to check that on my daughters iPhone 7 to see how it looks there with higher pixel density.
Offline
BTW: In Galleria,when setting
Photo presentation --> slideshow controls-->Shadows button to ON
it gives the control text elements a shadow! In Safari that is hardly noticeable, but opening the page in Firefox, with my custom css
.galleria-container img {box-shadow: 10px 10px 22px rgba(0,0,0,0.5) !important;}
Firefox also seems to apply that setting to the control elements, because they are merely a smudge of grey. If I turn the Shadow Button to off, the control elements in Firefox are fine and are crisp again in Safari. The shadow settings are then only applied to the image itself!
I really think that a lot of people would appreciate it, when some of the not so obvious buttons in BL2 would get a short description of what they actually do! That Shadows on in Galleria adds an almost not visible shadow to the controls is certainly not at all what I would think this button would do when activated.
Just a thought for BL 2.5 maybe;-)
Offline
I remember playing with a box-shadow for galleria images. The problem I had (and still have) is that the shadow gets cut off at the bottom of vertical images. Have you found a way around that?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I remember playing with a box-shadow for galleria images. The problem I had (and still have) is that the shadow gets cut off at the bottom of vertical images. Have you found a way around that?
Yes, I have encountered that shadow cutoff at the bottom too, on small browser windows and mobile devices. On my iMac 27 (non retina) with max image size at 960px, it is not cut off.
Maybe it is possible to set some margins inside the image box that allow for more space and thus show the shadow on the bottom?
The "negative space" leaves enough space at the bottom, when decreasing window size, but the shadow does not render on top of that negative space. So I doubt it would render on top of an inner margin.
I haven't implemented the shadows on my site because of that, even though it does look very nice when Galleria is expanded to full screen size. Also, I noticed, that the "Expanded" version of Galleria does not render at all in older browser versions of Safari. I have on iPad min 1st Gen. and it only shows a blank page, when expanded is set. In inline mode, it does show the page.
I have applied the very same shadow to the fancybox as well and here, I do not have shadow cutoffs at the bottom.
.fancybox-image {box-shadow: 10px 10px 22px rgba(0,0,0,0.3) !important;}
Last edited by skipper (2019-03-29 23:09:00)
Offline
Republishing using 640px for the photo rendition allows the shadows on vertical images for me. And for most inline presentations I do, that will probably work.
(off topic, but sort of related?)
For Fancybox, if the image is large, the shadow gets cutoff too. Below is what I've been using. It adds padding and a border to give it a "frame". Then is resizes to allow for the shadow to show and positions the image back to a vertical center:
.fancybox-slide img {
border: 1px solid black;
padding: 8px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
height: 94%;
top: 3%;
}Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hmm, 640px seems small considering all the retina displays on mobiles and computers nowadays.
I will try the fancybox-slide css, sounds good!
Offline
That works very well for resizing and on small displays! I have changed it a bit for my needs (although the frame with the white padding around the image is also nice):
I added width and left to give more horizontal space. That also moves the arrows almost out of the images on my iPhone.
.fancybox-image {box-shadow: 10px 10px 22px rgba(0,0,0,0.3) !important;}
.fancybox-slide img {
height: 94%;
top: 3%;
width: 86%;
left: 7%;
}
Offline
Maybe Matthew has an idea how the shadow on the bottom could also work in Galleria on smaller devices?
Offline
The default shadows are subtle in that their purpose is to ensure that white UI elements remain visible against light areas in underlying photos. They are simply a tool for legibility, such as in this example:
http://theturninggate.net/galleries/01- … a-default/
Offline