JetEngine - Listing Grid - Post Number in Listing Grid for Desktop, Tablet or Mobile

[gcente]

A functionality is needed within the Listing Grid, to control the Post Number for Desktop, Tablet or Mobile, as well as in the Columns Number field. This setting of Posrt Numbers is important, since it depends on the type of device, it is necessary to control the amount of Post that can be displayed. If you have a Listing Grid that shows 3 posts in 3 columns in Desktop it looks good, when I bring this same listing grid to Mobile, I have to change the 2 columns and 3 posts so that it looks good and is symmetrical. To achieve this effect, I must create 2 Listing Grid, one with a configuration of 3 Columns and 3 Post, as well as another 2 Columns and 4 Post.

[getunrealtoday]

+1 Was very surprised to see that this can not currently be set on a device basis

[gcente]

You think this enhancement can be made to the Plugin?

[Vigar007]

I went on Google to find a solution, if anyone has a solution PLEASE let me know, thanks.

[brendan-ashmore]

I'm looking for a similar feature. How are most people going about this issue? I need this feature pretty much every time I use the plugin. The only solution I can find is to have two widgets, and swap their visibility on different devices.

[Vigar007]

I'm looking for a similar feature. How are most people going about this issue? I need this feature pretty much every time I use the plugin. The only solution I can find is to have two widgets, and swap their visibility on different devices.

Please update, it now works natively.

[brendan-ashmore]

I'm looking for a similar feature. How are most people going about this issue? I need this feature pretty much every time I use the plugin. The only solution I can find is to have two widgets, and swap their visibility on different devices.

Please update, it now works natively.

What version? I am on the latest version but do not have this feature?

Is this in the same window as above, or does it need to be done through query builder?

Thanks!

[Vigar007]

Same window, just go to mobile view and then change it.

[brendan-ashmore]

I don't have a responsive option here? If I change the number in the mobile view, it stays in the desktop view. Unless there's some backend option I'm missing?

[afagard]

This won't be done as "posts number" is effectively a LIMIT SQL statement and therefore isn't "responsive." You could hide a certain number of posts on mobile using a custom CSS on the listing grid sort of like (not tested):

@media only screen and (max-width: 767px) {
  selector .jet-listing-grid__items:nth-child(n+4) {
    display: none;
  }
}

[ofmarconi]

@afagard This solution could be implemented by Crocoblock, regardless of how it will be executed, we need it to be responsive, if it is going to be with CSS then it doesn't matter to us, but it should be ready.

[afagard]

@afagard This solution could be implemented by Crocoblock, regardless of how it will be executed, we need it to be responsive, if it is going to be with CSS then it doesn't matter to us, but it should be ready.

Let's do a hypothetical, you want 20 posts on mobile, 12 posts on tablet, and 10 posts on desktop. Because it's a LIMIT statement, and because the frontend has no knowledge of breakpoints or viewport, in order to satisfy your parameters we would have to get 20 posts on desktop, tablet and mobile (the max) and hide 10 for desktop and 8 for tablet. Now I personally don't think getting the max of all 3 is good practice or performant for users across different devices. Obviously the numbers could be reversed, but it makes no difference since we always have to load the max.

The other alternative is making the listing grid not load anything synchronously, and have it communicate the breakpoint and associated limit to the backend asynchronously, but then you have SEO + Lighthouse concerns as there is no SSR now. Then they would somehow have to factor this functionality in to the slew of other plugins they have that work together with the listing grid and factor in edge-cases and additional things like their listing grid injections.

So I really don't think this is going to happen and I'm not sure I entirely agree with it being a necessity but to each his own, I'm just trying to provide some context. Hopefully the code snippet above provides some usefulness.

[voorvoor64]

A functionality is needed within the Listing Grid, to control the Post Number for Desktop, Tablet or Mobile, as well as in the Columns Number field. This setting of Posrt Numbers is important, since it depends on the type of device, it is necessary to control the amount of Post that can be displayed. If you have a Listing Grid that shows 3 posts in 3 columns in Desktop it looks good, when I bring this same listing grid to Mobile, I have to change the 2 columns and 3 posts so that it looks good and is symmetrical. To achieve this effect, I must create 2 Listing Grid, one with a configuration of 3 Columns and 3 Post, as well as another 2 Columns and 4 Post.

Totally agree with this - i think ive got a solution (not a direct fix on jet engine) but it will work.

So set up two listing grids (duplicate the one you are using) and label them desktop/mobile - change to the desired amount of posts in the listing grid settings.. then with dynamic visibility, show one on desktop and one on mobile.

Hope this helps

[belowthehelmet]

There has been a new error in the Crocoblock Listing Grid. If we create a custom query to create Products Listing, we cannot set the Post Numbers Option anymore regardless of what the number is, the grid will still show all the Products. For example, if you have 10 Products and you wish to show only 3 using the Post Numbers by typing 3, the 10 Products will show instead of 3.

[voorvoor64]

You need to go to your query on query builder - go to Pagination and specify the number of posts you want here

[Joerikros]

You need to go to your query on query builder - go to Pagination and specify the number of posts you want here

This is more of a quick fix. It should be possible to add a postal number to the page, right?

[secondsky]

its quite interesting that crocoblock is not doing anything. the current setting Is pure bullshit. how can you think that you will show the same number of posts on every device? Lets say you would show 10 items on a huge wide screen, it would look idiotic as you don't use the space or have huge items showing. The same 10 might be great for mobile or tablet.

@crocoblock @kaskad88 this is quite important I would say. its core functionality. as this was once possible with the legacy version of the listing grid widget. now with the new one this is no longer possible! THIS IS DEFINELTY NOT A QUESTION AND THIS ISSUE IS MARKED WRONG!