An image is worth well… a lot of words. Is this even possible using the CMS multi image field and a grid? I’ve been researching all day, and I’m still not sure. I am #nocode for real, btw. Is it possible given the Webflow CMS and Grid? OR, with very minimal custom code? Let me know before I fall down a rabbit hole never to return.
Hopefully, the image explains things. Basically, the grid cells adapt to the number of images. But, no matter the number of images, the whole grid is 100% the width inside another parent grid or column. And, of course, it’d be nice if things actually line up as is… am I expecting too much from 2022 HTML/CSS? OR, Webflow? Let me know.
Sorry, I should have mentioned. This is a design in Adobe XD. Not tried to do this in Webflow yet. I know I’ll have to use Grid, but is something that adapts to 1 image, and makes it full width. AND THEN, when there’s 2 images arranges as in the second heading. And then if max 4 images, shows as the bottom? All, AUTOMATICALLY depending on the number of images someone puts in the multi-image field of the CMS? That’s the key.
OTHERISE… I guess I COULD actually create classes for each? And then, is it possible to tweak and assign “1-image” “2-image” “3-image” to each separate item in the collection list before publishing? Hmmm… might be a possible #nocode work around? Is it?
EDIT: NO, that wouldn’t work… if it’s a collection page, which is the point of a collection page. Else, I’d have to manually reference collections within many custom pages. Ugh. Webflooooowwwww! Anyway, help.
hi @rps sorry to step into this request but you can achieve it by JS. Here is short video of one way that can be used to create what you need. Is this you looking for?
That is EXACTLY it, from what I saw. Unfortunate that it requires code, but literally everything seems to. I’ll simply have to learn some Javascript soon so I can code on this #nocode platform lol. What is the source for this? I’m willing to try to cut and paste some code and see if I can’t get it to work how I want… but, I don’t have the highest confidence.
hi @rps source is knowledge I just created it on the fly form your idea and there will be more ways how to I will send you PM with Read Only for free so you can look on project to understand how it works and copy paste code. It need more attention as this is only rough setup.
OK, after much research and struggle, my conclusion is that it is NOT POSSIBLE using #nocode. At the very end of their own page here, it says “You can’t define grid areas for Collection lists, but can do so with Collection items within Collection lists.”
I still have no idea what “do so with Collection items” implies, but “You can’t define grid areas for Collection lists” is pretty clear, and I think exactly what I needed to know. And, this goes for even if the grid doesn’t scale with the number of images.
You simply cannot span grid cells and have it fill up with an Multi-image set. At least, that’s where I’ve gotten to, and yes I’m giving up until I have the time to study Stan’s seemingly awesome code-based solution. We have partners waiting to see a “awesome new design” as in yesterday, so a crappy grid single size images is best that Webflow can do.
If anyone else knows otherwise, please let me know. Why o why Webflow seems to have built-in “dealbreakers” like this, I do not know. I’d assume its something in its underpinning architecture, so maybe their hands are tied for the moment as well. BUT, it seems to have been this way for 2+ years now. Kind of sad. No, very very sad.
no-code is just misleading marketing slogan to get people on board and WF isn’t different. All these no-code platforms are just GUI’s for developers this mean that knowledge of HTML, CSS and JS is necessary to be able use power of these platforms with help of custom code as tools that these platforms offer are just very basic because there I no way to create an universal and complex tool for everyone. I’m not WF advocate but I look on things as developer.
Sorry to hear that my solution didn’t solved your issue as I have provided JS and CSS that IMO did the job, but as I have mentioned you can hire me (or other developer) to help you with your project.
Wow, interesting to see a developer agree. Yes, it’s marketing, and I fell for it. I agree, and on my mental todo list is increase my knowledge of “the three.” I just had a chance to look closer at your code, and wow it’s nice; though… I have yet to implement it, myself. To be able to know to write item.style.gridArea = Area-${idx+1} … something I hope to someday do. IF I continue down this path, or maybe not if another platform doesn’t cut the corners Webflow does, lol. Truth is, there’s likely no shortcuts, and I just have to learn.
I was just trying to then simply make a fixed grid with grid areas… and Webflow seems to not even be able to support that when using the CMS, even if it’s on a Collection page. Client considers this late already, so for the moment seems I’m forced to show them a boring grid of images, but at least work with a lightbox. UNLESS… I can implement your code, of course … BUT, I’d still have to be savvy enough to then take what you started, and make it responsive. SO… My guess is I’ll be talking to you when you’re free.
I just created it on the fly form your idea and there will be more ways how to I will send you PM with Read Only for free so you can look on project to understand how it works and copy paste code. It need more attention as this is only rough setup.