Drop Shadows on Thumbnails

scott_walton · 2017-07-07 01:48:24

I can't figure out how to make drop shadows on my gallery thumbnails, both the gallery list page and the individual image thumbnails.

http://www.scottwaltonphotographs.com/B … galleries/
http://www.scottwaltonphotographs.com/B … ight-test/

I've turned on what seems to be drop shadows in the settings but I don't see them.

Even though my page background is dark and might be masking a shadow, I tried setting the page background to white and there was no shadow there.

Thanks for any help.

Scott

rod barbee · 2017-07-07 03:20:20

the built in shadows are pretty subtle:
box-shadow: 0 0 3px rgba(0,0,0,0.25);

If you want something more substantial, use custom css. The selector is .gallery figure for albums
and .albums figure a for album sets.

the code will look like this, but with your own box-shadow settings. This should equally affect album and album set thumnails:

.gallery figure, .albums figure a {
      box-shadow: 0 0 3px rgba(0,0,0,0.25);
}

scott_walton · 2017-07-07 04:36:31

Thanks Rod!

MikeR · 2017-07-20 18:30:37

I have put this code in my custom css file & it works great on gallery thumbnails, but not on
the gallery set masonary thumbnails. Have I missed something?

Pangolin 122 test site: http://www.michaelregan.uk/cornwall-galleries/

Thanks MikeR

rod barbee · 2017-07-20 22:17:44

album set thumbnails require a different selector. this looks like it should work:

.albums-masonry figure a .item {
    border: 1px solid #000000;  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

MikeR · 2017-07-20 23:13:43

Hi Rod

Brilliant that has worked!
Thank you very much for such a quick response!
Much appreciated

MikeR

rod barbee · 2017-07-20 23:30:26

some other selectors in the 1.2.x version will be different as well. So if you were running with 1.1.1 and using custom css, some things may not work as expected. Usually you can just probe the page with the browser inspector to see the selectors and apply the same css as before, only to the new selectors.

MikeR · 2017-07-21 01:21:45

Thanks for the advice, the hardest thing as always is knowing where to look!

rsamco · 2017-10-05 09:54:48

I'm converting to v1.2.x and can't figure out the CSS selector for setting Pangolin Classic gallery thumbnail drop shadows. And, BTW, I see no drop shadows when they are supposedly turned on using BL Designer.

rod barbee · 2017-10-05 11:00:17

did you see #2 above?

rsamco · 2017-10-06 01:00:40

Yup, Rod, tried that -- ".gallery figure" puts a drop shadow on each thumbnail's surrounding frame, not on the thumbnail itself. See http://test.samcos.com/galleries/album- … /index.php versus what I did in CE4: http://rick.samcos.com/galleries/a-Favorites/.

rod barbee · 2017-10-06 01:21:07

I get it.

try .gallery img for the selector.

also, the built -in Backlight drop shadows are on the frame, not the thumbnails

rsamco · 2017-10-06 01:29:00

Thanks, that did it. But, for non-square thumbnails, only draws drop shadow on the narrower side (i.e., drop shadow isn't drawn into thumbnail's padding area). Not worth it to me to pursue further; I'll just drop shadow the containing frame (i.e., use ".gallery figure" selector).

rod barbee · 2017-10-06 01:32:39

on second though, applying shadows to that just looks weird. Vertical images will have the shadow to the side and will have it cut off at the bottom. Horizontals will show it at the bottom and have it cut off at the sides.

You could try playing with Minimum Cell Padding in the album designer, but I don't know...

Might not be all that easy to add drop-shadows to the thumbs themselves.

rod barbee · 2017-10-06 01:33:29

ah. you saw that too.

Community @ The Turning Gate

#1 2017-07-07 01:48:24

Drop Shadows on Thumbnails

#2 2017-07-07 03:20:20

Re: Drop Shadows on Thumbnails

#3 2017-07-07 04:36:31

Re: Drop Shadows on Thumbnails

#4 2017-07-20 18:30:37

Re: Drop Shadows on Thumbnails

#5 2017-07-20 22:17:44

Re: Drop Shadows on Thumbnails

#6 2017-07-20 23:13:43

Re: Drop Shadows on Thumbnails

#7 2017-07-20 23:30:26

Re: Drop Shadows on Thumbnails

#8 2017-07-21 01:21:45

Re: Drop Shadows on Thumbnails

#9 2017-10-05 09:54:48

Re: Drop Shadows on Thumbnails

#10 2017-10-05 11:00:17

Re: Drop Shadows on Thumbnails

#11 2017-10-06 01:00:40

Re: Drop Shadows on Thumbnails

#12 2017-10-06 01:21:07

Re: Drop Shadows on Thumbnails

#13 2017-10-06 01:29:00

Re: Drop Shadows on Thumbnails

#14 2017-10-06 01:32:39

Re: Drop Shadows on Thumbnails

#15 2017-10-06 01:33:29

Re: Drop Shadows on Thumbnails

Board footer