steveush

Hi @riflebird,

I believe the issue here is your theme sets the following CSS on the img elements within the gallery:

.row .col img:not([srcset]) {
    width: auto;
}

This CSS causes the browser to not apply the aspect-ratio properly. I’m not sure why theme developers have started using this but it has popped up in the last few weeks and has caused us a few issues.

I believe the CSS @bradvin gave you will correct the issue however we need to make the CSS selector for the class more specific or else your theme’s CSS overrides it.

Please try the following modified selector:

.fg-masonry.fg-fixed .fg-item .fg-image {
	width: 100%;
	height: auto;
	max-width: 100%;
}

If that is still not applying correctly please let me know.

Thanks
Steve

Hey @ronaldfuchs2016

That’s good to hear that it resolved most of the issues for you. I forgot that the new version also checks the average height for all rows and makes sure the last row does not exceed that value by more than 10%. This was a measure to try and counter the situation where the last row contained a single small image which was then blown up to huge proportions in an attempt to make it fit width wise. So in the cases where it is not working for you I assume it would result in an abnormally large image in the last row compared to the rest of gallery and so constrains it to make it fit in.

We’ll be adding the last row option back in but in a slightly different format. At present it will have only three values to choose from;

1. The current default behavior which adheres to the max row height and checks the average of all previous rows.
2. Then it will have the option to simply force justify the last row letting it ignore the max row height constraint and average of the previous rows, this is effectively the same as the old justify behavior but you could once again end up in some cases where you have extremely large last row images.
3. Then finally it will have the option to simply hide the last row if it does not fill the entire space to satisfy @mcbightonbrian’s use case.

Thanks
Steve

Hi @looknsharp,

I don’t think changing the file name caused the issue. I believe the issue here is that the rel attributes have changed and FooBox does perform some automatic merging of elements using the same rel.

FooBox is looking to bind to the wp-block-image elements under your device setup guide but they contain a common rel attribute with the images from the above Jetpack Tiled galleries.

FooBox automatically pulls in all images that share the same rel attribute. So what is happening here is that it is binding to the first image under the device setup guide, so it appears first in the lightbox, then it is checking the rest of the page for any other images sharing the same rel attribute and merging them into its contents.

This results in a mismatch of what is seen in the page to what is displayed in the lightbox as the second image appears higher in the page order than the first.

As it stands at the moment in the free version the best bet is to alter the rel attributes for each of the images you have displayed under your device setup heading.

In the Gutenberg editor, once an image is selected, click the “link” button in the top menu, on the right hand side is a drop down arrow and under there you should see the rel option for the image.

You should be able to keep whatever currently exists, I believe it should show external noopener noreferrer at the moment. Just add a unique name for the images you want grouped together in the lightbox. For example you can add lightbox-1 to each of the images so there rel attribute ends up being external noopener noreferrer lightbox-1 and it should resolve the issue.

Thanks
Steve

Hey @generalnumpty,

You seem to be on the right track. The renaming of the CSS is correct in your example above. Overall there’s 3 methods I have provided you here so let me break them down to be a little clearer:

1. The first method was the gallery specific changes that looked like the below:

/* 6 column layout on desktop */
#foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 15.66%; }
#foogallery-gallery-1 .fg-column-width { width: 15.66%; }
#foogallery-gallery-1 .fg-gutter-width { width: 1%; }

2. The second method was a general method you could use globally for any gallery by setting the layout to any of the column options and then setting the Gallery Settings > Advanced > Custom Gallery Class option to custom-cols. That looks like the below:

/* 6 column layout on desktop */
.foogallery.fg-masonry.custom-cols .fg-item { margin-bottom: 1px; width: calc(16.66% - 1px); }
.foogallery.fg-masonry.custom-cols .fg-column-width { width: calc(16.66% - 1px); }
.foogallery.fg-masonry.custom-cols .fg-gutter-width { width: 1px; }

3. Then there was the method to skip having to set the Gallery Settings > Advanced > Custom Gallery Class option by replacing the custom-cols CSS class in #2’s CSS with the 5 column class name, effectively overriding that layout entirely:

/* 6 column layout on desktop */
.foogallery.fg-masonry.fg-masonry-5col .fg-item { margin-bottom: 1px; width: calc(16.66% - 1px); }
.foogallery.fg-masonry.fg-masonry-5col .fg-column-width { width: calc(16.66% - 1px); }
.foogallery.fg-masonry.fg-masonry-5col .fg-gutter-width { width: 1px; }

Ok, so now that I have broken down those 3 methods let me go over them a little.

#1 worked but is gallery ID specific and had a 1% value for the gutter which was not looking right for you.

In #2 I corrected this by changing the CSS selector to use a generic CSS selector with no ID and I updated the gutter widths to rather be a fixed 1px value instead of a percentage. To be able to use the fixed pixel value for the gutter widths I had to update the column widths to use the CSS function calc(). So instead of the column width for 6 columns being a static 15.66% (100% / 6 columns – 1% for gutter) it performs the calculation on the fly using the calc(16.66% - 1px) function as you can’t mix percentages and pixels statically in CSS.

#3 was merely a suggestion if you didn’t want to use the Gallery Settings > Advanced > Custom Gallery Class and the custom-cols CSS class outlined in #2. This method however has the drawback of being brittle. i.e. it will fail in one of the upcoming updates once the shorter CSS name for 5 columns is released.

Personally I would use #2 as it gives you the ability to override the layout on any gallery by just adding the custom-cols CSS class and setting the layout to one of the column options. It should be future safe as it does not use the 5 column class name which is changing. It also gives you the option to still use the original 5 column layout on one gallery and then your custom 6/7/X column layout on the next.

Thanks
Steve

Hi @generalnumpty,

After looking at what is possible I would recommend doing what you originally wanted and simply make the template have six columns.

To do this set the template to use the Masonry Layout > 5 Columns option along with the Gutter Size > Normal Size Gutter option.

You can then use the following CSS in the Custom CSS option for the gallery. You will need to replace the ID, #foogallery-gallery-1, with your own gallery’s ID but once that is done it should result in six columns being displayed on screens wider than 1280px.

/* 6 column layout on desktop */
#foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 15.66%; }
#foogallery-gallery-1 .fg-column-width { width: 15.66%; }
#foogallery-gallery-1 .fg-gutter-width { width: 1%; }

/* Force 5 column layout < 1280px */
@media screen and (max-width: 1280px) {
    #foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 19%; }
    #foogallery-gallery-1 .fg-column-width { width: 19%; }
    #foogallery-gallery-1 .fg-gutter-width { width: 1%; }
}

/* Force 4 column layout < 992px */
@media screen and (max-width: 992px) {
    #foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 24%; }
    #foogallery-gallery-1 .fg-column-width { width: 24%; }
    #foogallery-gallery-1 .fg-gutter-width { width: 1%; }
}

/* Force 3 column layout < 720px */
@media screen and (max-width: 720px) {
    #foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 32%; }
    #foogallery-gallery-1 .fg-column-width { width: 32%; }
    #foogallery-gallery-1 .fg-gutter-width { width: 1%; }
}

/* Force 2 column layout < 480px */
@media screen and (max-width: 480px) {
    #foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 49%; }
    #foogallery-gallery-1 .fg-column-width { width: 49%; }
    #foogallery-gallery-1 .fg-gutter-width { width: 1%; }
}

/* Force 1 column layout < 320px */
@media screen and (max-width: 320px) {
    #foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 100%; }
    #foogallery-gallery-1 .fg-column-width { width: 100%; }
    #foogallery-gallery-1 .fg-gutter-width { width: 0; }
}

You can extend this to however many columns and/or media breakpoints you like by using the following formula to calculate the column width to supply:

(100 / Column Count) - Gutter Width = Column Width

So if I wanted to make this seven columns instead of six I could do:

(100 / 7) - 1 = 13.28 (Rounded down to avoid overflowing max width)

So the first part of the CSS for seven columns would look like:

/* 7 column layout on desktop */
#foogallery-gallery-1 .fg-item { margin-bottom: 1%; width: 13.28%; }
#foogallery-gallery-1 .fg-column-width { width: 13.28%; }
#foogallery-gallery-1 .fg-gutter-width { width: 1%; }

Thanks
Steve

• This reply was modified 5 years, 5 months ago by steveush. Reason: Fixed formatting

Hi @rick0316,

Unfortunately the way you have setup the links is not the recommended way to open a hidden gallery. Please take a look at the documentation provided here: https://fooplugins.com/documentation/foobox/developers-foobox/open-galleries-in-lightbox-from-text-link/

The way you’re currently opening links relies on chance a bit, which is why sometimes they work and sometimes they don’t. FooBox is picking up the links however that link is a duplicate of one of the items in the gallery and FooBox removes duplicates. So what’s happening here is on one page your link is working as FooBox removed the duplicate from the gallery itself while on the other page it removed the link duplicate.

Thanks
Steve

Hi @kooba,

There should be an option in the main FooGallery > Settings section to change the thumbnail quality. I believe it is 80% by default.

Thanks
Steve