Creating An Image Gallery - Help?

From having had a quick look, there aren't many great options when it comes to a nice & dynamic fluid as hell gallery layout. I'm happy to use a simple framework, but I don't think that's an option, I've been messing around with a load of CSS stuff today, mostly flexboxes, but I'm still unsure how to feel about that.

It's not as simple as making a container, set the width of it to 100% and then all the child tags n width, simply because all of the images are all different resolutions, I have thought of ways around this, but it just seems to be an issue with the guys in charge either way. They want me to make a super fancy and pretty looking gallery, asap, and it's not allowed to do anything that'll alter the images in anyway (i.e. crop a bit of 1 image off to allow the user to zoom in, kinda like what you'd see on some social media platform like FB[I _think_, if I remember correctly]).

Anyway here's the code I've done so far in terms of the front end side of things:


HTML

<div class="myGrid">
    <img src="">
</div>

CSS

.myGrid{position:absolute;top:0;left:0;display:flex;flex-wrap:wrap;}
.myGrid img{border:8px solid white; flex: 1 1 auto}

I mean at this moment in time, it's 10% of the way there, looks just awful though, I'm not gonna lie about it.

If you can't crop the image, there isn't a lot you can do to make the images uniform. I've had to explain this to clients in the past as well. We use Drupal Image Styles to resize images in galleries, and as it's done programmatically, the reality is sometimes the thumbnail image will be cropped at a random size or will cut off something key in the image.

An alternative layout for non-uniform gallery thumbs is the masonry layout (for example: https://masonry.desandro.com/). This style is used on sites like Pinterest or Unsplash and works fairly well responsively.

Yeah... I did look into Masonry and they didn't like it because it was cropping/cutting off some of the images ever so slightly, I mean if I were a randomer visiting the website, I'd never have known, let's just put it like that... :stuck_out_tongue: ... I'm sure if you use Masonry well enough, there is actually a way around that, I'll look more into it tomorrow, I've also got to make a back end admin page for web admin to be able to add products to one of the sites that my company works on.

Damn someone had the same idea as me :smiley: I was more looking towards Isotope though. I haven't used it personally, but it was used in a project I had worked on before and it seems to have worked rather well.

To put it bluntly, clients are a pain in the butt :confused:

Flexbox is really nice, support seems to be pretty good by now, I have personally only worked with somewhat uniform elements before though, but I imagine with a lot of work it could be done even with flexbox. The problem comes down to how large the gaps between images are allowed to be, are they also supposed to be uniform? Because then you're out of luck there and you probably won't get around a JS solution.

PS: Funny that the forum complains about me posting kreestuh's link again, even though it's in a quote :smiley:

/edit
I just read that isotope uses the same masonry library, so.. yeah.

Isotope and Masonry were developed by the same guy. :slight_smile:

1 Like