Posts Module (gallery) - Full Width

Beaver Builder
1

Heya! I’ve got a full-width row with full-width content and inside of that is the Posts Module (gallery view). That module doesn’t fill the full-width on larger screen resolutions.

Looks like the dynamic height/width on each post is coming from fl-gallery-grid.js (within BB plugin).

I can set the itemWidth larger (i.e. 900px) and get the desired effect at large screen resolutions, but then I lose the nice 3 column grid as the browser sizes down.

I’d appreciate any suggestions you have!

2

Hi Carrie,

What resolution(s) are we talking about, can you give a size, please? As I have just added the Post module to my page and have it displaying my posts. I’ve removed all margin/padding from both the Row and module. It appears full-width.

Although, not an accurate representation, I then zoomed out and got the following layout. Is this what is happening to you on larger resolutions?

Cloudup

After seeing that, I then changed the itemWidth value to 900 like you mentioned and when I refreshed the page, this is the layout I had.

Cloudup

Therefore, is it possible for you to provide some screenshots, please?

Thanks,
Danny

3

Hey Danny,

You replicated it perfectly. :slight_smile:

Leaving itemWidth at it’s original 600px, the breakpoint for when the images “stop” stretching is 1800px:

1800px breakpoint

I get a 3 column layout from roughly 1200px-1800px.

1200px-1800px

At 1024px, it breaks down to 2 columns:

https://www.dropbox.com/s/ya70sslgro3jg2b/Screenshot%202016-02-19%2009.18.47.png?dl=0

And then eventually breaks do to 1 column for a mobile view.

Changing itemWidth to 900px fixes the 3 column layout for the 1800px+ resolution, but anything below that breakpoint goes 2 column, which I don’t want.

In my perfect world, I’d like it to be 3 column all the way down to tablet resolution (768px-ish) and then go single column.

I guess what I’m asking is is there a way to control those breakpoints? Regular media queries are ineffective since the javascript is dynamically is inject the height/widths for those images based on browser size.

Thanks!
Carrie

4

Hi Carrie,

I’m going to speak to Justin and see if what you want to accomplish is possible. As soon as I have more information, I will be in touch and I apologise, I am not able to resolve your issue, upon first ask. :smiley:

Thanks,
Danny

5

Thanks, Danny! I appreciate your help.

6

Hey Carrie,

Wow, I was expecting to hop into that file and see some sort of jQuery gallery script being used. I forgot that I actually wrote that logic :wink: It has been a while so let me dig through that quickly and get back to you.

Justin

7

Hey Carrie,

So the issue appears to be with this line…

numCols = winWidth > 480 ? Math.ceil(wrapWidth/this.itemWidth) : 1,

If the window is above 480px it will divide the wrapper width by the itemWidth param to get the number of columns, otherwise it will just use a single column.

This is the desired auto sizing logic, but it’s not very flexible. We could probably do better by letting you adjust the itemWidth param from the settings or choose a fixed number of columns to show above the mobile breakpoint (probably what you need).

In the meantime, you could override the resize method to adjust that line like so…

https://gist.github.com/fastlinemedia/537df948610ea0c5e5a2

In that gist I’ve changed Math.ceil(wrapWidth/this.itemWidth) to 3 so it’s always showing three columns above the 480px breakpoint. You could change the breakpoint if needed as well.

Let me know if you have any questions about that!

Justin

8

Hey Justin,

Thanks for getting back to me so quickly! That worked a treat!

Cheers,
Carrie

9

You’re welcome! I’m glad that worked for you.

Justin

10

Hey Carrie,

So the issue appears to be with this line…

numCols = winWidth > 480 ? Math.ceil(wrapWidth/this.itemWidth) : 1,

If the window is above 480px it will divide the wrapper width by the itemWidth param to get the number of columns, otherwise it will just use a single column.

This is the desired auto sizing logic, but it’s not very flexible. We could probably do better by letting you adjust the itemWidth param from the settings or choose a fixed number of columns to show above the mobile breakpoint (probably what you need).

In the meantime, you could override the resize method to adjust that line like so…

In that gist I’ve changed Math.ceil(wrapWidth/this.itemWidth) to 3 so it’s always showing three columns above the 480px breakpoint. You could change the breakpoint if needed as well.

Let me know if you have any questions about that!

Justin

Hi Justin,
I changed the line in fl-gallery-grid.js as you suggested and it works just perfect, since i needed the option control the number of rows.
However, the js file gets over written with every BB update.
How do i get the line change to persist?

Thanks in advance!

11

Hey Thomas,

In my case I was building a custom module (plugin), so I made a copy of fl-gallery-grid.js and dropped it into my plugin. I renamed the file (and the classes) and then enqueued it from the plugin.

Cheers,
Carrie

12

Thanks for the suggestion, Carrie!

Thomas, I haven’t tested this, but something like it should work…

function my_enqueue_scripts() {
	wp_dequeue_script( 'fl-gallery-grid' );
	wp_enqueue_script( 'fl-gallery-grid', 'http://www.yoursite.com/path/to/your/fl-gallery-grid.js', array( 'jquery' ), FL_BUILDER_VERSION, true );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts', 999 );

That will dequeue our copy and enqueue your copy. Just change the URL to point to where your copy is actually at.

Let me know if you have any questions.

Justin