JET ENGINE - Listing grid Masonry Injection with different sizes

[FelloDuarte]

Hi, I'm trying to create a portfolio listing grid with a masonry layout. I'm using injections to add items that span 2 columns and maintain the same image ratio. Don't know why it's breaking the grid

You can see it here http://dev.aduarte.io/limari/proyectos/

thanks!

[Floydtm]

@FelloDuarte, hi! I understand that this is important for you, but I would like to say that there is a problem with this now and the developers cannot do anything about it. Masonry Grid does not work correctly when using Injections. You can use this when column span = 1

[FelloDuarte]

Sorry to hear that. One of the reasons why I bought Jet Engine was hoping to be able to do that. Is there any workaround that you can point me to? overwriting styles? or maybe an elementor compatible plugin that could do it?

[Floydtm]

I can't give you advice right now. To solve your request, you need to change the script in the plugin. Developers cannot do this right now. We have reopened this request for resolution, however we cannot take it to work right now. Keep for updates. Thank you!

[FelloDuarte]

For any one with the same problem . I installed the masonry library, left disabled "Is Masonry" from Jet Listing widget and it looks like this:

http://dev.aduarte.io/limari/proyecto-test/

It's not yet what I'm looking for, but I'm getting closer

If anyone have any idea, I would appreciate it

[Liorsade8]

hi FelloDuarte how did u create the listing grid presented here: http://dev.aduarte.io/limari/proyectos ?

[FelloDuarte]

hi @Liorsade8 I remember it was messy. First using "injections" wich the site editor can select using a custom field on each proyect page. I had to create a set of matching formats to do the trick, there is an special square format that matches an specific vertical format, and a square format that matches an specific horizontal format. so it's up to the site editor to keep everything tight.

And for displaying it, I ended up using a Listing grid with 10 colums and overwriting some css to make it work. All to simulate the masonry grid with equal height that the plugin provider does not provide.

Hope there could be a better solution, but this was the best way I could find to make it easy for my cliente to edit the site after I delivered it.

You can see the final version here https://lld.cl/proyectos/ the grid extend very long and looks great, but mantaining it requires a lot of manual work to keep it looking right.

[Liorsade8]

wow... looks good and complecated. but how did u make it work that one picture will be tall and one wide? any code there?

[FelloDuarte]

You can set the listing items to be "Equal Height" and set each "listint" injection" to use a different column span you can check the documentation here https://crocoblock.com/knowledge-base/articles/how-to-use-the-alternative-listing-template-functionality-in-listing-grid/

I remember watching some tutorials on youtube also

[xube]

Looks very nice, i would like to know more how to achieve this. Right now i have problem with infinite scroll, do not show any loading icon and on the end of query jumps back somewhere midlle (UX horor). With button it is same. Button does not have any "loading" state. So i tried another approach. Mansonry has odd bug with overlaping. Equel height of column does not work for me either. I am so frustradet with crocoblock behaviour. There is no explenation in documentation how to properly set listings to be compatible with mansonry nor equal height.

But your solution seam to be right. So i would like to understand how we can achieve this.

Anyway good job.

[chrislettner]

Hi FelloDuarte, I'm also wondering how you managed to get the Load More (Button or Infinite Scroll) to work with Listing Grid masonry. Is that because you installed your own masonry library? Thank you!

[FelloDuarte]

Hi, it should work as detailed on the help page in crocoblock site

---

Alfredo Duarte Jorquera +569 8549 7965 aduarte.io

El vie, 21 de may. de 2021 a la(s) 08:41, chrislettner ( @.***) escribió:

Hi FelloDuarte, I'm also wondering how you managed to get the Load More (Button or Infinite Scroll) to work with Listing Grid masonry. Is that because you installed your own masonry library? Thank you!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-845922919, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOS4LVGCDDNJ3RGBTDRNATTOZIIDANCNFSM4TDUEIPQ .

[chrislettner]

Crocoblock have told me Load More is not compatible with Masonry layout but on your site it looks like you made it work

Chris Lettner

Pštrossova 33

110 00 Prague

phone: +420 702 817 029 mail: @.*** WEB https://chrislettner.com / INSTAGRAM https://www.instagram.com/chris.lettner/ / TWITTER https://twitter.com/ChrisLettner / FACEBOOK https://www.facebook.com/chris.lettner

On Fri, May 21, 2021 at 10:21 PM FelloDuarte @.***> wrote:

Hi, it should work as detailed on the help page in crocoblock site

---

Alfredo Duarte Jorquera +569 8549 7965 aduarte.io

El vie, 21 de may. de 2021 a la(s) 08:41, chrislettner ( @.***) escribió:

Hi FelloDuarte, I'm also wondering how you managed to get the Load More (Button or Infinite Scroll) to work with Listing Grid masonry. Is that because you installed your own masonry library? Thank you!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub < https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-845922919 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AAOS4LVGCDDNJ3RGBTDRNATTOZIIDANCNFSM4TDUEIPQ

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-846231748, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHEJ4KRWESMICCTZQU77AK3TO26FRANCNFSM4TDUEIPQ .

[FelloDuarte]

Oh! That should be because I didn't use masonry on that site, that grid is built manually : /

---

Alfredo Duarte Jorquera +569 8549 7965 aduarte.io

El vie, 21 de may. de 2021 a la(s) 16:32, chrislettner ( @.***) escribió:

Crocoblock have told me Load More is not compatible with Masonry layout but on your site it looks like you made it work

Chris Lettner

Pštrossova 33

110 00 Prague

phone: +420 702 817 029 mail: @.*** WEB https://chrislettner.com / INSTAGRAM https://www.instagram.com/chris.lettner/ / TWITTER https://twitter.com/ChrisLettner / FACEBOOK https://www.facebook.com/chris.lettner

On Fri, May 21, 2021 at 10:21 PM FelloDuarte @.***> wrote:

Hi, it should work as detailed on the help page in crocoblock site

---

Alfredo Duarte Jorquera +569 8549 7965 aduarte.io

El vie, 21 de may. de 2021 a la(s) 08:41, chrislettner ( @.***) escribió:

Hi FelloDuarte, I'm also wondering how you managed to get the Load More (Button or Infinite Scroll) to work with Listing Grid masonry. Is that because you installed your own masonry library? Thank you!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <

https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-845922919

, or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AAOS4LVGCDDNJ3RGBTDRNATTOZIIDANCNFSM4TDUEIPQ

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub < https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-846231748 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AHEJ4KRWESMICCTZQU77AK3TO26FRANCNFSM4TDUEIPQ

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-846239525, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOS4LSL4UEWSSNGYUJWD3TTO27ORANCNFSM4TDUEIPQ .

[chrislettner]

Ah I see, thank you :)

Chris Lettner

Pštrossova 33

110 00 Prague

phone: +420 702 817 029 mail: @.*** WEB https://chrislettner.com / INSTAGRAM https://www.instagram.com/chris.lettner/ / TWITTER https://twitter.com/ChrisLettner / FACEBOOK https://www.facebook.com/chris.lettner

On Fri, May 21, 2021 at 10:37 PM FelloDuarte @.***> wrote:

Oh! That should be because I didn't use masonry on that site, that grid is built manually : /

---

Alfredo Duarte Jorquera +569 8549 7965 aduarte.io

El vie, 21 de may. de 2021 a la(s) 16:32, chrislettner ( @.***) escribió:

Crocoblock have told me Load More is not compatible with Masonry layout but on your site it looks like you made it work

Chris Lettner

Pštrossova 33

110 00 Prague

phone: +420 702 817 029 mail: @.*** WEB https://chrislettner.com / INSTAGRAM https://www.instagram.com/chris.lettner/ / TWITTER https://twitter.com/ChrisLettner / FACEBOOK https://www.facebook.com/chris.lettner

On Fri, May 21, 2021 at 10:21 PM FelloDuarte @.***> wrote:

Hi, it should work as detailed on the help page in crocoblock site

---

Alfredo Duarte Jorquera +569 8549 7965 aduarte.io

El vie, 21 de may. de 2021 a la(s) 08:41, chrislettner ( @.***) escribió:

Hi FelloDuarte, I'm also wondering how you managed to get the Load More (Button or Infinite Scroll) to work with Listing Grid masonry. Is that because you installed your own masonry library? Thank you!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <

https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-845922919

, or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AAOS4LVGCDDNJ3RGBTDRNATTOZIIDANCNFSM4TDUEIPQ

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub <

https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-846231748

, or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AHEJ4KRWESMICCTZQU77AK3TO26FRANCNFSM4TDUEIPQ

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub < https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-846239525 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AAOS4LSL4UEWSSNGYUJWD3TTO27ORANCNFSM4TDUEIPQ

.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Crocoblock/suggestions/issues/2098#issuecomment-846243454, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHEJ4KXKSOFOVLAK2UKJF7DTO2767ANCNFSM4TDUEIPQ .

[velajrg]

this is not solved yet??? omg

[theimisioluwa]

I had this issue today and found a way out. I switched the jet-engine-grid from 'block' to 'flex', that way the individual grid items can be arranged.

/ Jet listing grid / .elementor-widget-jet-listing-grid .jet-listing-grid{ display:flex; flex-wrap:wrap; }

Then I changed the width of each grid as I desired.

/ Jet listing grid item / .jet-listing-grid .jet-listing-grid__item:nth-child(1){ max-width:25%; }

See here. https://apticshelters.ltd/projects