Canvas Support

Isotope Packery, srcset and lazy load.

10 replies · opened Feb 16, 2021

YyoelacevedoFeb 16, 2021

Hello,
I am using a packery script you sent me yourselves to use Isotope Packery Layout and I have several problems that I cannot solve:

1 - The elements that occupy 12 columns when scaling to mobile resolution are too small.
2 - To solve the previous problem I tried to use srcset as you suggested to me, but when I use the images with isotope it does not change the image.
3 - I'm using Lazy Images from Canvas and I don't know how to do it for srcsets instead of src.
4 - Some blocks of the grid for no reason leave some white spaces around them and I can guarantee that the images are automatically cropped to the same measures to avoid these errors.
5 - 5 - The image of the upper banner that works as a poster of the background video, after opening a modal appears on the video and does not go back.

I leave the site url below

Thanks!

SSemicolon WebSTAFFFeb 16, 2021

Hello,

  1. We are not sure about this. Since the Element is already occupying 12 Columns on Mobile, the sizes used by them are the maximum size available on the Viewport. Can you please provide us with a Screenshot and more explanation on what you are seeing and what you expect to see? Thanks.

  2. Isotope and Scrsets do not conflict with each other. We have just checked this on your Website using the Browser Console: Network Tab and it appears to be working fine for us and loads the smaller image on Screens less than 992w.

  3. Consider using this code:
    [ch_pre]
    attachment
    [/ch_pre]

  4. We are not really sure what is causing this, but we can see that there is a Duplicate ID #portfolio on the Page which you must fix and make the IDs unique. Additionally, we can also see a JS Error on the Page which is related to a Plugin Update which we have already released in November 2020: http://docs.semicolonweb.com/docs/changelog/version-6-1-3/ . So, it is highly recommended to update to the Latest Version.

  5. Again, we are not sure about this error. Can you please provide us with a Screencast of the Issue so that we can reproduce it on your end and provide you with further 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.

YyoelacevedoFeb 16, 2021

Hello,

1 - Yes, the columns that I put occupy but, I would like to put a min-height, and I don't know how to do it since isotope calculates the maximum height of the entire portfolio.

2 - Solved.

3 - Solved.

4 - Uploaded the update now and there are no duplicate id, also update the plugins.
I upload a ScreenShot of this.

5 - I upload a ScreenShot of this.

Thank you very much for the quick answer!

SSemicolon WebSTAFFFeb 17, 2021

Hello,

Thanks for your Patience!

  1. You can consider using Height Utility Classes: http://docs.semicolonweb.com/docs/utility-classes/heights/ . Possibly this one:
    [ch_pre][/ch_pre]

  2. and 5. Can you please consider attaching the File again as we cant see it. Make sure that your Files are not more than 2MB in size as it will then not be uploaded. 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.

YyoelacevedoFeb 17, 2021

REduced sizes of screenshots

SSemicolon WebSTAFFFeb 18, 2021

Hello,

Thanks for the Updated Images.

  1. This issue is caused due to uneven Sizes in the Grid which is causing the Packery Layout to be unstable. Even on the Plugin's Website: https://packery.metafizzy.co/layout.html, they are using the Grid Layout with Uniform Sizes and their Multiples. We recommend using Uniform Grid Layouts to avoid unnecessary issues.

  2. This issue appears to be with the Revolution Slider as it stops playing the Video once it loses focus. Maybe you can consider using the Settings here: https://www.themepunch.com/revsliderjquery-doc/background-image-video/#vimeo-video-background . Like: data-forcerewind="on"?

Hope this Helps!

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

YyoelacevedoFeb 18, 2021

Hello,

1 - is there a way to keep the size dynamic depending on the content? without using min-vh or fixed height? at least in the mobile view in this view everything would have 12 columns.

4 - Can I keep this same layout using Uniform Grid Layout? if possible, how can I switch to Uniform Grid Layout?

5 - I am already using data-forcerewind = 'on', any suggestion that I can do so that it does not show the image after the playback starts? or in the worst case, never show up and go.

Thank you!

SSemicolon WebSTAFFFeb 18, 2021

Hello,

  1. Unfortunately, not. The Content is inside the Overlay which is absolutely positioned, so the Height cannot be flexible. You will need to set a Fixed Height.

  2. You will need to change the Sizes of the Grid and make it uniform manually. For Packery, you can only use Grid Size of (3, 6, 9 or 12) or (2,4,6,8,10 or 12) or (4,8,12). Some of your Grid Column's size is 4 and some are 6 or 8 which currently cannot be used with Packery as they are not multiples. Your Grid Sizes currently can only be multiples of the smallest grid size.

  3. As mentioned it appears to be an issue with the Revolution Slider. We have tried working on it and the following CSS fixes the issue with the Video:
    [ch_pre type="css"].fluid-width-video-wrapper {
    height: 100% !important;
    padding-top: 0 !important;
    }[/ch_pre]

But we are not sure of its reliability, you can consider using this for the time being and see if it works fine in the long run.

Hope this Helps!

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

YyoelacevedoFeb 19, 2021

Hello,

1 and 3 - OK

2 - I am using a grid as you say of (4, 6, 8 or 12) which is a subset of (2, 4, 6, 8, 10 or 12), I do not understand then what I can do. The strange thing is that it works well for me only in some cases is that this happens.

Thanks!

SSemicolon WebSTAFFFeb 20, 2021

Hello,

A Sub-set cannot be used. If your smallest Grid Size is 4, then use can only use its multiples, ie. 8 and 12 only. To include 6, you will need to use (3,6,9 or 12).

Hope this Helps!

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

YyoelacevedoFeb 25, 2021

Thank you very much for the help!

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