Thumbnails on Slideshow Bug

Probably a bug in the gallery script. The last item gets a wrong inline style for width:

Please, wait for official answer and support.

If you need a quick fix and workaround in CSS, this should correct it visually:

div[id^="gallery"] div.image-wrapper:last-of-type {
    width: 75px !important;
}

BTW, are you using Gantry5? Then there are 2 ways to add custom CSS:
Either in Global Page Settings -> Assets -> CSS
or with an external file. YourTheme/custom/scss/custom.scss (needs to be compiled!)

Yes I am using Gantry 5. Your solution fixed the issue. Thanks!

gteigland Your solution fixed the issue.

Remember, this is a temporary CSS fix.
Most likely not THE final solution ;)

Thanks!

You're most welcome!

What output templte are you using?

Sorry I've been out for awhile. Im' using Gantry - Hydrogen. The free one that comes with gantry.

I ment output template fo gallery field.

Sorry on the late reply - looks like the full.php http://www.awesomescreenshot.com/image/1275047/f2ace0cea32d08e45b613b002499bd3d

Thanks!

Thsi is strange. I cannot reproduce it. Probably affected by some specific to your Joomla template CSS rule.

Sergey Thsi is strange. I cannot reproduce it. Probably affected by some specific to your Joomla template CSS rule.

pepperstreet The last item gets a wrong inline style for width:>

The strange part: It seems to be an inline style?!
Isn't it created/calculated by a Javascript?

Screenshot of applied inline style on last image-wrapper:

IM not sure about javascript -- sorry.

I would look at all field parameters.

ok so I see there is a larger bug with this issue. I added this same field into a tabbed records situation and two things happen.

1. You will see the last image is small (so same problem - in fact I think it's really the first image loaded https://unknownartists.co/component/cobalt/user-item/71-sara-bentley/8-photography/5-my-life-drops?Itemid=191

2. When i put in padding and have background color at white you will notice it just repeates the image in the background even though i have it step up in cobalt backing to be background:#fff. THis is in Record Full View Mode - Custom. See screenshot:

http://www.awesomescreenshot.com/image/1308653/02e1d929363c88f6ba14694bda7ab891

gteigland 1.) You will see the last image is small (so same problem - in fact I think it's really the first image loaded https://unknownartists.co/component/cobalt/user-item/71-sara-bentley/8-photography/5-my-life-drops?Itemid=191

The SMALL 75px image thumb is a result of my previous CSS fix. It is applied to every last image in a DIV, which has an ID beginning with "gallery". On first sight, I was not sure where the ID# came from. So I wanted to target a more general name and element... Most likely it is the field's ID, right? Then it is unique...

If you still need the fix for the other gallery/thumbnail style, you might change the CSS to a specific DIV ID. e.g. #gallery8 or #gallery13

But it seems your issue is no longer present, isn't it? Did you update Cobalt or anything else?
Your previous example had EQUAL SQUARED thumbnails? Is this the important difference and culprit?
Now you have different ratios and it seems to work.

Try to remove my CSS fix... and test your page again.

gteigland 2.) ...it just repeates the image in the background even though i have it step up in cobalt backing to be background:#fff

You are right. There is a background-image and a regular image on top. Not sure if this is on purpose? Sergey?
The background-image might be better for certain thumbs layouts... because it can have CSS size properties like cover and contain. For instance: cover allows centering a bigger or smaller image inside its wrapping container.

But it is strange to have both images.

pepperstreet Not sure if this is on purpose? Sergey?

I am sure there were a reason. But it was in whole different time. It was time of IE 5. I am sure it does not make a lot of sense now. That is why I created additional templates like bootstrap slider.

ok some good news and bad news. 1. For the stretched thumbnail I did remove your code and it helped other issues and since the stretch is only affecting this one record not worth finding a fix for it. 2. HOWEVER -- the gallery showing background images (duplicated) is still there. I can't find a way to remove that code. Any suggestions. Here's the link to see the issue. Thanks! 3.

https://unknownartists.co/component/cobalt/user-item/71-sara-bentley/8-photography/5-my-life-drops?Itemid=191

Scroll down and you will see the issue.

But basically if I add any padding or margin it duplicates the image in the backround for the space instead of being empty space.

gteigland 2. HOWEVER, the gallery showing background images (duplicated) is still there. I can't find a way to remove that code

Try this custom CSS for the gallery field with ID #13 ...

#gallery13 .image-wrapper {
    background-image: none !important;
}

#gallery13 .image-element {
    opacity: 1;
}

PERFECT THANKS!