pepperstreet VIP
Total posts: 3,837
21 Апр 2016 23:08

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

cob_gallery_thumbs_last_too_large

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;
}

cob_gallery_thumbs_last_css_fix

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!)


gteigland VIP
Total posts: 159
23 Апр 2016 12:14

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


pepperstreet VIP
Total posts: 3,837
23 Апр 2016 18:44

gteigland Your solution fixed the issue.

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

Thanks!

You're most welcome!


Sergey
Total posts: 13,748
26 Апр 2016 13:33

What output templte are you using?


gteigland VIP
Total posts: 159
17 Май 2016 20:17

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


Sergey
Total posts: 13,748
18 Май 2016 13:38

I ment output template fo gallery field.


gteigland VIP
Total posts: 159
25 Май 2016 03:20

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

Thanks!


Sergey
Total posts: 13,748
05 Июнь 2016 14:27

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


pepperstreet VIP
Total posts: 3,837
05 Июнь 2016 18:53

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: cob_gallery_last_thumb_wrong_width


gteigland VIP
Total posts: 159
05 Июнь 2016 21:16

IM not sure about javascript -- sorry.


Sergey
Total posts: 13,748
06 Июнь 2016 04:25

I would look at all field parameters.


gteigland VIP
Total posts: 159
07 Июнь 2016 15:33

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


pepperstreet VIP
Total posts: 3,837
07 Июнь 2016 22:32

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.


pepperstreet VIP
Total posts: 3,837
07 Июнь 2016 22:43

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.


Sergey
Total posts: 13,748
12 Июнь 2016 14:02

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.


gteigland VIP
Total posts: 159
25 Июнь 2016 20:18

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.


pepperstreet VIP
Total posts: 3,837
26 Июнь 2016 12:46

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;
}

gteigland VIP
Total posts: 159
26 Июнь 2016 15:06

PERFECT THANKS!

Работает на Cobalt