Is tthere a way to gety 6 columns Masonry

Have you tried using the fixed layout, instead of 5 columns? Using fixed allows you to have more than 5 columns in a masonry gallery, depending on the thumbnail width chosen

Thanks for your reply.
The problem is 150 wide give 7 columns which is to many on pc as too small thumbs (bad) but that does give me 2 columns on a mobile (good)
160 = 7 columns pc 2 on mobile
165 = 7 columns on pc and 1 on mobile

175 = 6 columns on pc = good but only 1 column on a mobile = bad

Problem is no combo I do can get me 6 columns pc and 2 on a mobile. With the fixed width.

• This reply was modified 3 years, 9 months ago by generalnumpty.

My reason was that on a pc 5 columns at 150-200 still results in slightly blurry thumbs but at the same thumb width and 6 columns then the thumbs would look better.

I am trying to keep the size of the whole page as small as I can so do want to have to go over 175/200 for the thumb size

With the column set at 5 I still get 2 wide on a mobile no matter what width I set the thumbs at. Unlike the fixed which cuts me down to1 column on a mobile anything over 150 wide thumbs setting.

• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.

@generalnumpty

This should be possible with some custom CSS.

Tagging in @steveush to provide some help

Sorry to be a pain.

Also with the 5 columns or other columns setting the resulting total width is slightly wider than if I used the fixed setting. Is as though the fixed setting is in a slightly narrower container than the columns setting.

• This reply was modified 3 years, 9 months ago by generalnumpty.

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 3 years, 9 months ago by steveush. Reason: Fixed formatting

WOW thanks Steve. Instead of adding individual galleries ID Can I just put a css in my custom CSS section for my theme as I want it to be the same for every 5 column gallery I do. (upgrade it to 6)
I am happy with mobile view at 2 columns otherwise the images are too small IMO. And happy with the tablet view, I would just like an option of 6 columns adding as the starting point for wide screens.

One thing though is I am using a css I got from this forum to give my 5 column a 1px border. I set gutter to none and border to thin (but its still to thick) so I found this which then gives me a nice thin 1 px border like I can acheive with the fixed setting and choosing a 1px gutter with this.
div.foogallery.fg-border-thin .fg-item-inner {
border-width: 1px;
}

• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.

Hi @generalnumpty,

It is possible to use a fixed gutter with a percent column width however we would need to adjust the CSS to use the calc() function. We can also get rid of the gallery ID by making the custom CSS have a selector that is more specific than the default.

Try adding the following to your sites custom CSS file;

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

/* Force 5 column layout < 1280px */
@media screen and (max-width: 1280px) {
    .foogallery.fg-masonry.custom-cols .fg-item { margin-bottom: 1px; width: calc(20% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-column-width { width: calc(20% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-gutter-width { width: 1px; }
}

/* Force 4 column layout < 992px */
@media screen and (max-width: 992px) {
    .foogallery.fg-masonry.custom-cols .fg-item { margin-bottom: 1px; width: calc(25% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-column-width { width: calc(25% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-gutter-width { width: 1px; }
}

/* Force 3 column layout < 720px */
@media screen and (max-width: 720px) {
    .foogallery.fg-masonry.custom-cols .fg-item { margin-bottom: 1px; width: calc(33.33% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-column-width { width: calc(33.33% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-gutter-width { width: 1px; }
}

/* Force 2 column layout < 480px */
@media screen and (max-width: 480px) {
    .foogallery.fg-masonry.custom-cols .fg-item { margin-bottom: 1px; width: calc(50% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-column-width { width: calc(50% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-gutter-width { width: 1px; }
}

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

Any gallery you want to use your custom columns on you simply set the layout to any of the column layouts and then add the custom-cols value to the Gallery Settings > Advanced > Custom Gallery Class option.

If you don’t want to use the custom-cols CSS class and simply want to always override the 5 column layout then change all the .custom-cols classes in the above to .fg-masonry-5col.

That said we have been working on an update which I know contains a change to the 5 column class name to .fg-col5. This means you will need to keep an eye out for the upcoming performance update which contains this change and update your customizations accordingly.

Thanks
Steve

Not gonna lie Steve i am way out of my depth, but after working on this for 4 hours I think i am getting somewhere. I used this in the edit gallery page space for custum css (my gallery is 8294.

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

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

I added all the rest of the css for the other breakpoints but just posting the 6 and 5 examples above.
I changed the 1% you suggested to 0.17% as my very thin preference but left all of your other % the same because I could not understand the relationship you tried to explain.
But the above seemed to work a treat ! giving 6 wide on desktop, 5 on tablet, 3 on mobile PERFECT.
But now I am stuck!. Instead of doing that for my 30 and future galleries I am trying to add a custum css in my WP add custum css so I only have to do it once.

In your last post when you said swap .custom-cols classes in the above to .fg-masonry-5col. did you mean it should be written like this.

Sorry Steve I know there is a lot there.

• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.
• This reply was modified 3 years, 9 months ago by generalnumpty.

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

Thanks so much Steve. I am going to have to read through 20 times and play.
But basic question. Option 2 where am i putting the css ?

There is a space on the individual gallery’s page for
Custom CSS it says-
Add any custom CSS to target this specific gallery. For example #foogallery-gallery-8294 { }

When you say Gallery Settings > Advanced > Custom Gallery Class
Are you referring to the WP dashboard on the left hand side because i only see
Foo Gallery – settings then settings opens a pane of 6 tabs
General
Images
Language
Advanced
Custom JS & CSS
Video
I select the Custom JS & CSS tab and see a space for Custom Stylesheet.
Is that where I place option 2.

Sorry

• This reply was modified 3 years, 8 months ago by generalnumpty.
• This reply was modified 3 years, 8 months ago by generalnumpty.

Hey @generalnumpty,

No problem, for clarification:

#1 was in the individual gallery settings, #2 & #3 can be added to your own styles.css file that is included with your theme for example.

The Gallery Settings > Advanced > Custom Gallery Class that I am referring to is on the individual gallery settings pages as well. In the Gallery Settings metabox there is a tab called Advanced and in there is an option called Custom Gallery Class which allows you to add a custom CSS class to the gallery.

So the way to implement #2 & #3 would be to add the CSS to your custom stylesheet and then go to the individual gallery settings page to change the options and/or add the custom-cols class if implementing #2.

Thanks
Steve

I have finally got it – thank you @steveush for you patience and config the css for a very thin border.
It was the custom-cols CSS class I just couldn’t get where to put it and that I was to literally put the words custom-cols in the space. Your above explanation did it for me.
I was trying to put it in the CCS section at the bottom of the gallery page when I should of been putting it in the advanced section at the bottom of the list options.
General/Appearance/Lightbox/Hover Effects/Captions/Paging/Filtering/Video/Advanced

I put all of the below in the WP/ theme provided -Customizing ? General Settings- Additional CSS. That will just sit there permanently doing nothing until I instruct a column gallery to use it by adding “custom-cols” without quotes in to the advanced section of the gallery that I want to use it with.

/* 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; }
/* Force 5 column layout < 1280px */
@media screen and (max-width: 1280px) {
    .foogallery.fg-masonry.custom-cols .fg-item { margin-bottom: 1px; width: calc(20% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-column-width { width: calc(20% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-gutter-width { width: 1px; }
}
/* Force 3 column layout < 720px */
@media screen and (max-width: 720px) {
    .foogallery.fg-masonry.custom-cols .fg-item { margin-bottom: 1px; width: calc(33.33% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-column-width { width: calc(33.33% - 1px); }
    .foogallery.fg-masonry.custom-cols .fg-gutter-width { width: 1px; }
}

So now all the above sits there in the WP-theme custom CSS section and all I have to do to is go through my gallery’s and instruct them to use it with the words custom-cols placed in the section provide for Custom Gallery Class in the advanced section.

Not sure yet weather to add the break for 4 column.

So have I got that all right then ? IT does seem to be working

• This reply was modified 3 years, 8 months ago by generalnumpty.
• This reply was modified 3 years, 8 months ago by generalnumpty.