I'm trying to use the 2-column portfolio template but notice that at the various resolutions, the grid becomes misaligned when mixing images. is there a vertical-image height or ratio that is compatible with keeping the grid tops/bottoms aligned? e.g. if you have two square-ish images (600x405) next to a 600x856, these become misaligned on their bottom and thus the next row has its tops misaligned. Thus
1) is there a set of two image resolutions comparable to these that wont result in this bug?
2) Can't the vertical spacing in the two small images be adjusted to fit? I mean they're all being resized anyway according to the different resolution, i'm not sure why this isn't something that should be fixed by default? Is this handled by revolution js?
3) Failing 1&2, is there a another approach to have my images stay aligned while having mixed formats across different resolutions?
1. Please check how it works in our demo. For the best results images should go in the following order:
600x405 (short), 600x856 (tall), small (if you want tall image on the right) or tall, small, small (if tall on the left). Please also send us a link to the website so we can check.
2. We are using Isotope library for the grid. So please check if there are more options available and change them on /berk/scripts/main.js:319. You can find it's options here: https://isotope.metafizzy.co/options.html
I've checked and this add-on should solve your problem https://packery.metafizzy.co/. All you need to do is to load it on your site and add
Thanks for your response and suggestions. I've kept these two resolutions but still see the several-pixel misalignments in several instances. These inconsistencies at different resolution also results in the order of the images changes at certain screen widths. These are also present in the sample template, just not noticeable when generic grey boxes are flying around :-) I've started preparing a variable-margin size to compensate for these shifts at the different resolutions but if packery does the trick - brilliant!
I just tried it both on your sample site and on mine and both times had the same result - all the images are stacked upon each other. I uploaded it to http://green-alien.com/RBH2018-22JUL/ As indicated, I just added the one line to main.js:319 - looks exactly like you write, and i added <script src="scripts/packery.pkgd.min.js"></script> to the header just below modernizr. js alas it wasn't as simple as planned.
My guess is there's some more packery specific configuration that will be needed. Do you think it's worth while to pursue that route or just do the math and setup custom padding/resolution ratios for each screen width and augment the current code to have the padding-based correction?
No worries about it not working on the first try - since packery seems made exactly for this purpose it seems worth while to strive for compatibility instead of attempting to hack something quick n dirty together.
I tried swapping out the two JS libraries in the header of the html file while leaving the main.js addition from the previous attempt in tact. Same result,. I also tried a few of the other configurations from the instruction page to no avail - the result is always the same. Ditto when I try this on the original "BERK" template. I've uploaded the updated index.html including packery in scripts to the same URL as previously if it makes a difference.
Any ideas what could be the reason for the incompatibility between the baked in grid isotope and the packery-mode?
Thanks, this corrected it in the sense that it's no longer piling all the images atop each other, but the gaps in the spacing are still there - identical as before the addition of packery. Does this look differently on your end? Are there packery configurations I've missed?
As a note, aside from the visual effect of having the boxes misaligned from each other, due to the variable gap size, depending on window width, the order of the images varies with certain gaps being sufficiently large to cause rearrangement.
Could you please tell me do you have the same problem with our demo http://jellydemos.com/html/berk/index.html? Because I am not sure if it's possible to save image alignment when they are responsive.
The demo looks identical - at certain screen widths the bottom of a tall image (e.g. the fencing image) is no longer aligned on the bottom with the bottom of the two small images to the left.
This has two results: 1) it just doesn't look at clean since the even grid is central to the design (it would be different if they images in the two columns were of variable heights and didn't align left/right. 2) The order of the images, and which column they are in changes as the 4th image is sometimes in the left column, sometimes in the right column. e.g. a the window width 1199px vs 1200px transition.
The most obvious fix I imagine for this is to have the spacing between the two small images (the top/bottom margin) vary such that it evenly adds up to the total height of the tall image (including it's margins). I had assumed the packery js would do something along these lines but it no longer appears to be the case - indeed likely an incompatibility with the responsive design which resizes the images as a function of the column width at the prescribed screen widths.
Developers said that it's not possible to align them. Masonry or Packery layout won't let you do that when images are responsive. There are a couple of ways to change that: you can remove masonry and try to redo everything with CSS and/or try to adjust the thumbnail size to fix alignment.
I'm trying to use the 2-column portfolio template but notice that at the various resolutions, the grid becomes misaligned when mixing images. is there a vertical-image height or ratio that is compatible with keeping the grid tops/bottoms aligned? e.g. if you have two square-ish images (600x405) next to a 600x856, these become misaligned on their bottom and thus the next row has its tops misaligned. Thus
1) is there a set of two image resolutions comparable to these that wont result in this bug?
2) Can't the vertical spacing in the two small images be adjusted to fit? I mean they're all being resized anyway according to the different resolution, i'm not sure why this isn't something that should be fixed by default? Is this handled by revolution js?
3) Failing 1&2, is there a another approach to have my images stay aligned while having mixed formats across different resolutions?
Thanks!
Hello,
1. Please check how it works in our demo. For the best results images should go in the following order:
600x405 (short), 600x856 (tall), small (if you want tall image on the right) or tall, small, small (if tall on the left). Please also send us a link to the website so we can check.
2. We are using Isotope library for the grid. So please check if there are more options available and change them on /berk/scripts/main.js:319. You can find it's options here: https://isotope.metafizzy.co/options.html
I've checked and this add-on should solve your problem https://packery.metafizzy.co/. All you need to do is to load it on your site and add
to /berk/scripts/main.js:319 like this:
var $container = $('.grid-gallery').isotope({layoutMode: 'packery',
itemSelector: '.grid-item',
masonry: {
columnWidth: '.grid-item'
}
});
It should remove any gaps.
3. Packery (from 2) should solve them.
Best Regards,
Jelly Team
HI Jelly,
Thanks for your response and suggestions. I've kept these two resolutions but still see the several-pixel misalignments in several instances. These inconsistencies at different resolution also results in the order of the images changes at certain screen widths. These are also present in the sample template, just not noticeable when generic grey boxes are flying around :-) I've started preparing a variable-margin size to compensate for these shifts at the different resolutions but if packery does the trick - brilliant!
I just tried it both on your sample site and on mine and both times had the same result - all the images are stacked upon each other. I uploaded it to http://green-alien.com/RBH2018-22JUL/ As indicated, I just added the one line to main.js:319 - looks exactly like you write, and i added <script src="scripts/packery.pkgd.min.js"></script> to the header just below modernizr. js alas it wasn't as simple as planned.
My guess is there's some more packery specific configuration that will be needed. Do you think it's worth while to pursue that route or just do the math and setup custom padding/resolution ratios for each screen width and augment the current code to have the padding-based correction?
Thanks,
icebrk
Really sorry about this but you need to download a different file:
https://raw.githubusercontent.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js
instead of packery.pkgd.min.js. Instruction: https://isotope.metafizzy.co/layout-modes/packery.html
Please download it and put it after modernizr.js like you did and it should work.
Please try it and let me know.
Best Regards,
Jelly Team
No worries about it not working on the first try - since packery seems made exactly for this purpose it seems worth while to strive for compatibility instead of attempting to hack something quick n dirty together.
I tried swapping out the two JS libraries in the header of the html file while leaving the main.js addition from the previous attempt in tact. Same result,. I also tried a few of the other configurations from the instruction page to no avail - the result is always the same. Ditto when I try this on the original "BERK" template. I've uploaded the updated index.html including packery in scripts to the same URL as previously if it makes a difference.
Any ideas what could be the reason for the incompatibility between the baked in grid isotope and the packery-mode?
Could you please send us ftp login/password/url to your website as a private message?
Best Regards,
Jelly Team
Please add scripts/packery-mode.pkgd.min.js after scripts/vendor.js before closing body tag( https://tppr.me/CEOxj ).
Best Regards,
Jelly Team
Thanks, this corrected it in the sense that it's no longer piling all the images atop each other, but the gaps in the spacing are still there - identical as before the addition of packery. Does this look differently on your end? Are there packery configurations I've missed?
As a note, aside from the visual effect of having the boxes misaligned from each other, due to the variable gap size, depending on window width, the order of the images varies with certain gaps being sufficiently large to cause rearrangement.
Could you please tell me do you have the same problem with our demo http://jellydemos.com/html/berk/index.html? Because I am not sure if it's possible to save image alignment when they are responsive.
Best Regards,
Jelly Team
The demo looks identical - at certain screen widths the bottom of a tall image (e.g. the fencing image) is no longer aligned on the bottom with the bottom of the two small images to the left.
This has two results:
1) it just doesn't look at clean since the even grid is central to the design (it would be different if they images in the two columns were of variable heights and didn't align left/right.
2) The order of the images, and which column they are in changes as the 4th image is sometimes in the left column, sometimes in the right column. e.g. a the window width 1199px vs 1200px transition.
The most obvious fix I imagine for this is to have the spacing between the two small images (the top/bottom margin) vary such that it evenly adds up to the total height of the tall image (including it's margins). I had assumed the packery js would do something along these lines but it no longer appears to be the case - indeed likely an incompatibility with the responsive design which resizes the images as a function of the column width at the prescribed screen widths.
I've contacted our developers about this. Get back to you as soon as possible.
Best Regards,
Jelly Team
Developers said that it's not possible to align them. Masonry or Packery layout won't let you do that when images are responsive. There are a couple of ways to change that: you can remove masonry and try to redo everything with CSS and/or try to adjust the thumbnail size to fix alignment.
Best Regards,
Jelly Team