CMS and Hero Image Variants

Hey guys,

I just joined Webflow today to build my side-hustle’s blog. I have built websites and landing pages using Shopify, Lightspeed, Unbounce and Wordpress. I’m trying to get the hang of it as I have a few Tech startup clients I am looking to potentially transition to Webflow.

This is my first Webflow project.

I have spent the day or so trying to build out my CMS Blog Post template only to - I think… - realize I cannot override certain design elements.

Specifically, I have set up my CMS Blog Post with an Hero Image. My understanding is even using Combo Classes and trying to edit each Item separately: I cannot have a different Hero Background Image per Blogpost.

Is this an accurate understanding?
Can there be overrides created like using Symbols?
Can I link my background image to a CMS Collections Image Field?

Links:


Here is my public share link: LINK
(how to access public share link)

“Variants” is too general. One way is to create two images (or more with any structure you want) on your site tree. Backend - add checkbox(or radio -or- select menu) on your CMS collection setting.

Than if on “hello post” the “full-width-hero option” is true show image-1
else show image-2 and so on. This trick works fine and easy to handle.

This is a great solution for the fields in body. It would work there as I have setup extensive Fields in my CMS to cover a range of in-depth Blog Posts and some posts may not require all of them.

Unsure how it applies to Hero Image though as I cannot link the Hero Image layout element to a CMS Collections Field because it is a background image sourced from Assets.

Is my understanding correct here?

If I could link a Collections to my Hero Image, I’d be set. My planned usage is a unique Hero Image per Blog Post. Your solution wouldn’t appear to scale well with 100 + blog posts (100 + images with conditional visibility set to a CMS Value Field?)

My ideal workaround would be to find a way to create my own Hero Image Layout using Images linked to CMS and have Button overlay the image. I’m struggling there - definitely feel like a newbie.

100 images. Somehow you must set the difference between A & B., Of course, you set some default state (If X not-set Show Y).

The best idea is to attach some screenshots of layout1 and layout2 in your case (Otherwise the answer is general).

I have been able to make it work. I have been able to create my own hero image using a CMS Collections field (main image) and using the Title & Short Summary as text.

It sources directly from CMS on every page now. Yay.

I used this workaround: Color Overlay over CMS Image - #2 by donaldsv