Streaming live at 10am (PST)

How can I randomize image size? CMS manual gird placement?

Hi everyone,

I am creating my first website on webflow and have come across a few issues that I need help with. It is a product design website that does not involve E-commerce at this stage but I am using CMS to display the portfolio of products. I’ll be posting these different issues as different replies to this topic.

Starting with the first one: I am trying to create a CMS based collection of products which I want to flex horizontally. I however, do not want to enter any custom width or height so that the images are true to their original proportions and varying in sizes but the issue is that when the values are set to auto, the size of the images is huge! (Because I guess that’s the original size of the images). How can I transform the size of these images? I tried transforming them to 50% but the size of the container still remains the size of the original image (Container Width: Auto Height: Auto) and does not flex as expected. Is there a way to transform the images in a collection list individually or making them smaller without entering a specified width for all the collection items together? Or a custom code which can size each image randomly when the browser tries to pull the data from CMS?

This is something I am trying to achieve out of CMS:


Here is my site Read-Only (The Collection List is at the very bottom of the page): https://preview.webflow.com/preview/csg-new?utm_medium=preview_link&utm_source=designer&utm_content=csg-new&preview=14be26baf2ad8287aa5309ea3483bc92&mode=preview

1 Like

The next issue I am facing is also related to CMS based layout. So on the individual product pages, I’m trying to create a layout like so:

I started off by dividing the screen into two divs and placing a grid of the product images (pulled from the CMS) in the second div only to realize that I cannot manually place items inside a dynamic list. The collection pages can be found in the CMS pages wherein I’ve added a grid of images. How can I work around this limitation? Also, all the different product pages will have slightly different layout of images Here is another example:

So in this case, how do I make changes to the product pages individually without affecting other product pages? Any work around?

1 Like

For the third issue: Let’s go back to the main collections page. Here I want to filter the products with respect to the category that is linked to them in the CMS (furniture, light or obejcts). And this is how I want to achieve that:

To put it in words, the images will stay where they are and just the ones that belong to the category will be visible. I’m sure that this would be possible on static content but how can I do this on the items of a collection list? Any special classes that I’m supposed to add?

1 Like

I’ve just started using Webflow as well, and the first two things I wanted to do are a random CMS, CSS-like grid with filtering system as you’ve just described. Huge disappointment when I wasn’t able to find solutions that don’t involve coding for the filtering process, and there seems to be a big lack of functionality between the CMS and CSS grid function. Loving all the other features but this specific problem is very unfortunate, this is becoming a more common design style so I hope they can release an update with a solution soon!