How to use mason.js for a perfect grid of images

[saharati]

Hello there, I was trying to get you by email but it didn't seem to work out so I'll try through here. I would like to use mason.js for creating a perfect grid of images, my question is, how would i do it and if its even possible with mason.js?

These are the things I need it to do:

1) Create a perfect grid from inputted images of any size and any amount with no gaps at all. 2) In order to fill gaps in, the system can resize the images, however ratio should be kept (In case there will be still gaps, the system can also crop certain images).

What do you think?

Thanks for your help.

[DrewDahlman]

Hey @petpal

My suggestion would be to use background-images on your elements. Set the background-size property to cover and you will be all set. This does work and has been done before.

If you use the raw image element you're gonna have a bad time, this is because Image elements tend to stick to their dimensions and don't like to be stretched and scaled like that. So by using CSS you can achieve exactly what you're looking for.

Cheers Drew

[saharati]

Hey @DrewDahlman I willl try to use images as background and see if that would work, however the bigger problem is filling the gaps, mason.js seems to duplicate the images multiple times in order to fill in empty spaces, how can I overcome that?

Do you have any examples that uses images and do same (or similar) to what I need? thats the farest i could get: http://petpal.co.il/test/fluid.html

Thanks

[saharati]

any news ?

[DrewDahlman]

Hi @petpal So mason needs to have elements that are used in filling in the gaps. You can specify this by using the filler argument -

filler: {
  itemSelector: '.fillerBox',
  filler_class: 'custom_filler'
}

What I suggest is setting up a hidden div that holds elements to use as fillers. Depending on how you've got it setup and what you're using to create the divs - this can be done quite easily. Give those elements a class of .fillerBox or what ever you want to call it and make sure you setup the filler arguments to match.

When Mason creates the grid it will use those elements as fillers.

[saharati]

The thing is that i want to fill in the gaps in another way rather than adding elements, thing is that I do not have any 'spare' images to fill the gaps in - so what im looking for is something more advance like resizing / cropping provided images in order to fill gaps, see the gallery i've made as an example: http://petpal.co.il/test/fluid.html

I hope something like this is possible because then i belive me and many others will find mason.js much more usefull for galleries purposes.

[mayankcpdixit]

Any news on that? I badly need a solution for what 'petpal' has asked.

[randomfish]

same here... major duplication. If duplication isn't something that could be eliminated completely then it might be a good idea to use the filler images in sequence as it would at least not place duplicates next to each other. Does anyone know how to implement this?

[saharati]

Hello I managed to achieve this effect !!!! :) look at this: it takes many random images of unkown size and amount and make a mason out of it: http://petpal.co.il/generate

[sujan-tpc]

@petpal could you specify how you achieved your result?

[albacoretuna]

@petpal the page is not there anymore, would be nice if you could host your solution somewhere!

[mayankcpdixit]

I made something that may come handy: https://github.com/mayankcpdixit/grid-no-white

[DrewDahlman]

Please include a link and how this deals with mason.

Sent from my Delorean

On Oct 9, 2015, at 8:26 PM, Mayank notifications@github.com wrote:

I made something that may come handy: https://github.com/mayankcpdixit/grid-no-white

— Reply to this email directly or view it on GitHub.

[mayankcpdixit]

@DrewDahlman Hey, I added a link to github repo. It's not a wrapper around mason. It's just a lightweight image-grid module in JS. Not much configurable. But it does the job.