Streaming live at 10am (PST)

Different image sizes in CMS Collection pages

Hi! I’m working on my design portfolio using a template called Prisma. For the individual project pages, this template has a “Projects Template” that displays images and text from the CMS Collection “Projects”.

The problem is that my projects have images of different sizes, so I need a way to display different sizes of images on different project pages. I’m not sure how to do this since all of the project pages are created from the same template.

I would really appreciate any advice/help on this – thank you in advance!

Here is my read-only link:
https://preview.webflow.com/preview/maria-metzger?utm_medium=preview_link&utm_source=designer&utm_content=maria-metzger&preview=ccc6ed91211bee113b1e05c0a6131b9a&workflow=preview

This template treats your images as backgrounds for divs - display is set to cover. So there’s nothing you should do about it if you like the outcome.

I don’t like the current outcome – I want every image to display at their respective sizes. Do you know how I can make all of the images display with their correct aspect ratios using this template? Can different projects have different image sizes? Thanks!

You can always change “cover” to “contain”.

For some reason changing it to “contain” doesn’t change anything (although I know using “contain” should make the entire image show up). Any ideas why?

In your case you should change classes: “Project Post Images Wrap” and “Custom Slider Content”.

hi @mcmetz2 as you know word template mean that we want to have identical output in this case design that will be filled with data. You are asking how to change template for different projects, easy answer is to create another template and it is tricky in WF. Good news is that it is possible to mangle template but it is hack, to see how to you can watch this video. But creating too many templates with this hack is not good anyway.

Easiest way is to unified you images (you should do it anyway) to fit given template and maybe add image full screen preview on img click. It is different approach but … It is on you and your designer and developer skills to make it happened.

PS: By customising template you bought you are asking for troubles when template will be updated or whatever will change in template in future as you are making changes in original. Just keep this in mind.

Good luck