Canvas Support

Masonry Layout - Mixed Image Items and Mixed Text Items

14 replies · opened Aug 10, 2020

YyoelacevedoAug 10, 2020

Hello,

I'm trying to mix in the layout of the Masonry portfolio, image items with text items, but since the height is taken by the images, my text elements directly disappear, and if I put fixed heights, it does not scale proportionally like the rest of the elements of the grid.

The only solution I thought of was to put images of one color, and on these put the text and so the grid is not broken.

Do you have any solution in the template that I can use for this? other than generating unnecessary images as I am doing.

Thank you!!!

SSemicolon WebSTAFFAug 11, 2020

Hello,

This is Definitely Possible. Consider using the Default Bootstrap Grid instead: https://getbootstrap.com/docs/4.5/layout/grid/ according to the Columns you need for your Images/Texts and simply add the .grid-container Class to the .row DIV to make it behave like Masonry. You can then add Gutters: http://docs.semicolonweb.com/docs/utility-classes/gutters/ according to your needs.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

YyoelacevedoAug 14, 2020

Hi, it works fine for me for various combinations of columns, but for example with 6 and 6, the next one that follows is swapped with the previous one, and the size is broken.
It loads everything correct but automatically rearranges itself wrong.

Thank you!

SSemicolon WebSTAFFAug 15, 2020

Hello,

Can you please provide us with a Live URL so that we can review the layout and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFAug 17, 2020

Hello,

Thanks for your Patience and the Live URLs.

We have checked this out and the issue appears to be with inconsistent column sizes. Currently the Masonry Works with equal Columns Sizes. If you are using .col-4, then the Wide Column should be .col-8. If you are using .col-6, the wide should be .col-12 and so on. This needs to be consistent in order for the Masonry to work correctly. The .col-4 and .col-6 Classes cannot be used together or you will need to also include a .col-2 within the Grid and set the data-basewidth=".col-2:eq(0)" Attribute on the .grid-container Element.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

YyoelacevedoAug 17, 2020

Hello,

Thanks for the reply,

I know that bootstrap uses a grid of 12 columns, and I am generating them in such a way that they always add up to 12, in the example I send you you can see:
col-6 col-6 col-4 col-4 col-4
Which should be seen in 2 rows without any empty space.
And I repeat, it shows well when the page is loading, then when it finishes loading the grid breaks.

Attached capture highlighting the part of the code where the columns of the grid are seen.

Thank you!

SSemicolon WebSTAFFAug 18, 2020

Hello,

Thanks for your Patience and more Clarifications. Please consider using the following code:

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

YyoelacevedoAug 18, 2020

Hello,

First of all thank you for always answering me.

I had already tried with that type of Layout (FitRows) and it worked well for me if I only had images of one row. But in the case that I use the most, which is Masonry, the exchange of the columns occurs.
I had only prepared that example for you because with that minimal case the problem occurs.

In this example that has more content, you can see how everything works fine until it comes to the case of 6-column items:

http://165.227.44.55:8077/vfx/

I am attaching a screenshot highlighting the columns with the problem.

Thank you!

SSemicolon WebSTAFFAug 18, 2020

Hello,

Thanks for your Patience!

As we had mentioned, Mixed and Variable Widths Columns are not supported out of the Box with the IsoTope Plugin. So .col-4 and .col-6 will not work together.

But we have worked on this for you and we have a Solution:

  1. Download this JS File: https://drive.google.com/file/d/1hJPo611C9zIs4hLCmAGMIv1v9VhbL_Xx/view?usp=sharing and add it to the js/ Folder.

  2. Embed this JS File on your Page just after the js/plugins.min.js JS File Linking:

  1. Then simply replace the data-layout="fitRows" with data-layout="packery" .

This should now definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

YyoelacevedoAug 18, 2020

Many thanks!!!

It works perfectly!

Thanks again, great support! 10/10.

YyoelacevedoAug 19, 2020

Hello again!

I'm trying to put images for different resolutions using srcset, but the image never changes.

thanks!

YyoelacevedoAug 22, 2020

Hello,

Thanks for the help, I was able to do it regularly, because I am doing exactly what it says in the documentation and it only takes another image not the 3 that I want to put, but at least that is how I solve it.

Thank you!

SSemicolon WebSTAFFAug 22, 2020

Hello,

Hope this issue was resolved.

Please let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard