How to style dynamic images from CMS?

Design help CMS
1

Hi guys,

Trying to style this image which is now repeating on larger screens.
Giving the parent div block a certain size doesn’t seem to help and now the image seems to be repeating.

The image is being grabbed from the cms module (main image)

Would Appreciate some feedback!

Here is my public share link: [LINK](Webflow - Jan Hendrik's Cool Site)
(how to access public share link)

1 Like
3

Hi Jan, are you talking about k-product-main?

I want to say first that the way you’ve set that piece up is a bit odd, you have assigned a background image to a DIV which contains a slider, but the slider doesn’t appear to be utilized. That’s likely to create some weirdness because sliders have a lot of positioning and sizing code.

My guess is that you’re using a template, and that the template was designed to have a slider in that position. Normally you’d put the content inside of the slider, e.g. drop an image inside of k-main-slide

Here’s how this looks if I-

  • Unlink the background image from k-main-slider ( settings tab )
  • Reset the background image style you have on k-product-main ( style tab )
  • Add an image element inside of k-main-slide which is the first slide, and bind it to your Main image in the CMS

image
image1920×1064 158 KB

That said, on your question regarding the background-image setup-

Any time you use the Dynamic style settings Get BG Image from… CMS binding ( settings tab ), you also want to style the background image on that same element ( style tab ). Webflow uses that background styling, so all of the settings like repeat, cover, and positioning are controlled there with a Webflow-generated temporary image. The CMS bound image will then override that.

1 Like
4

Hi Michael,

Thanks for the well detailed info!
I got the image to show now but when I publish it loads for a second but then disappears. The variation are also not showing when clicked (it does work when adding to the cart). When I try one of the template images it is working flawlessly. The products I want to add come from a printful integration so maybe that could be causing this weird beheaviour?

5

I don’t see that happening in your preview link, you’d need to share a published site link to demonstrate what you’re asking about. But it is a slider. It’s designed to show an image for a few seconds and then advance to the next one.

I don’t know what you’re trying to build- I didn’t notice any variants bound to anything. You’ll need to explain what you’re trying to do.

Template images… again you’ll need to show an example of what you’re trying to do.

I haven’t used printful but Webflow’s ECom only works with it’s Products and Categories, so the printful integration would likely import anything it needed. Shouldn’t affect your designer experience / approach in any way that I’m aware of.

6

Hi, sorry for the delay but just got back from holiday.

Here is a published link of the product template page .

https://e-commerce-2-5bacec.webflow.io/product/tiny-trailblazers-cheetah-toddler-short-sleeve-tee

read only: Webflow - e commerce 2

I’m trying to build an e commerce website for kids clothing.

7

You have a Finsweet library running that affects your slider in some way, it’s causing the issue.

8

This must be printful then I’m afraid because I have nothing else connected to the website.

9

Printful has nothing to do with it?

As I said, it’s the Finsweet library. Remove it and you’ll see it displays correctly.

1 Like