Hi! I’m product/web designer w/ a decade+ experience and basic front-end dev chops… Brand new to Webflow and excited… Went through crash course etc.
BUT: I’ve hit a blocker, I feel like there’s something obvious I’m overlooking but can’t find the answer so far…
Problem: In a template for my Collection Pages, within the main content area i need to allow for simple columns of images. AND: Not the same precise ordering of columns in each post - but the ability to drop in a column when/where i need it, different from post to post.
Example:
Post 1:
[header]
Body copy
2-up (2 images in a row)
Body copy
3-up (3 images in a row)
Body copy
[footer]
Post 2:
[header]
Body copy
3-up
Body Copy
[footer]
Post 3:
[header]
Body copy
3-up
Body copy
3-up
Body Copy
2-up
Body Copy
[footer]
How do I accomplish that without creating a static page for each post? Or without pulling 3 images into an image editor to output a single wide png that contains the 3 images… in Rich Text area i can add in images wherever i want, but not groups of htem in columns.
There’s got to be a way, right? Bonus points if i can make them a lightbox not just simple columns, but at the least i need to be able to drop in simple side-by-side images like in any other CMS… How do i accomplish that?
Here’s a couple of examples of what I’m talking about. I know i can do this in a single collection page template IF i define the exact order in each post when the columns will appear (and i know in some individual posts im allowed to turn off any of those elements) but that doesnt let me naturally drop in a 3-up or 4-up or 2-up whenever i need it in the content.
For context these are a couple of examples in blog posts or articles when the need for this comes up. Doesn’t seem like an exotic request right?
Hi @sjs, I am so excited to have you join the Webflow community, a big welcome there
This can be accomplished by setting up three different collection list layouts on the template page, just design those perhaps within a single div block so that you can place that div with the three collection lists layouts all showing on the page at the same time.
Then you can add a new field to your collection, this can be a text field with some indicator like “1col”, “2col”, “3col”.
Another option is to use a Toggle Switch field, and base your conditional that way, in that case you create three switches for each collection item, one for each column type and then evaluate if a switch is on, then show, if not, then a layout stays hidden.
You can then use the Conditional Visibility feature and apply that to each collection list where you would set a condition to show the individual collection list if the text field with the text indicators are either 1col, 2col, or 3col and to show or hide the element based on the value you have given in the post.
When the post is rendered on the page in the designer/preview/published site, only the layout that matches the conditional visiblity rule will be shown.
@cyberdave Thanks for your help.
Hmm… Not sure if we’re addressing the same problem though, let me clarify:
I need to add groups of images to different collection items - ie, one-offs in each individual blog post. Collections lists are for common elements that occur in the same place across multiple blog posts (or other collection pages), right? (yet can be turned off in some via conditional visibility/switches, I get that - but nonetheless they assume a common type of post w, say, a 3-up group of images that always appears in a certain part of the page for a type of post). That’s not what I’m talking about though - I mean add 3-ups (2-ups, etc) the way you can add an Image from within a Rich Text field in an individual blog post. IE: inside a rich text field you may add any number of images, having them falling within any order you want within the page copy, for each post.
Are you saying that I need to create a separate template (and perhaps collection list) for every single post that contains a small group of images like this? Another template for each single instance? If so it’ll be faster to just put horizontal 2-up/3-up/4-up groups of images side-by-side in Figma/Photoshop and export a single PNG. (Though that’s not as elegant as addressing them as a row of 3 separate images, or using the really well put together Lightbox component Webflow already has.).
(BTW 3-ups/4-ups etc. are very often used by designers or product mgrs when writing about mobile app sketches/mockups. So this isn’t a really exotic need… But it’s not the sort of thing that just appears in the same place on each post - it’s a one-off need to drop them here and there in the middle of a story. But perhaps I need to hack that by combining 3 images into 1 so Webflow can handle it as an Image item within rich text editor field…) But then again maybe I’m missing something else you were explaining, pls let me know if so.
Yes, I was referring to the fact that you can pre-design a layout for the collection template page and you can pre-position different layouts that you think your post layout might need, then using conditional visiblity, you can show or hide a layout that should be used.
You can use conditional visiblity with individual elements and images bound to a cms field on collection template pages, but you would still need to place those images in the design layouts that might be used potentially by each post item, and then apply the conditional visiblity for those layouts to show or hide the image based on some criteria in advance.
I am may still not be understanding how you are using the images fully – in each blog post for example, you might have a small group of images that you wish to use, the options in this case is to pre-plan where those kinds of images should be shown in the layout.
Then if needed you could use conditional visibility to show different layouts of those images in different places in the layout depending on the post (i.e. you might put a 1up image in the header, and create a second 1up image at the footer, and then use conditional visibility to show or hide one of those layouts based on conditional visiblity).
Otherwise you would probably be best to use the Rich Text and upload your image, it is not possible to bind to an individual image element from within a Rich Text to a cms image field yet.
Ah I see. That “wishlist” item is very informative.
Yeah, the way the Webflow CMS is architected, sounds like what I’m looking for is not available, though I can make a hack that works around the problem… ie, say, a portfolio site w/ a half-dozen posts etc. then as I’m writing a post I can go back to the blog/work post template (collection page) and add in a row (or lightbox component) wherever i need a set of images in that post, and just turn off their visibility in all the other posts. After doing that for a half dozen posts that will be a pretty messy, redundant template though (with a lot of duplicated elements that are turned off in most posts, each on in 1 post, just so they can appear in the location needed). I’m surprised that this is the case though, and I hope the Webflow team at some point refactors the way this is setup to make the CMS side of things more useful and more at parity w/ the way many people on the marketing and content side of organizations are used to working quickly without developer/designer intervention/stage-gates, w/ tools like wordpress, medium etc.
Anyway, thanks for clarifying!
Hi, quick question. Let’s say I have a 3x3 Grid with 9 Items. Is it possible that my only option to offset a single column, is to create 3 different cms collections? My workaround was that I created 3 different collections and set a class for the offset column.
