Streaming live at 10am (PST)

Can you edit CMS image

Is it possible to edit one or two image positions within a CMS collection list that is displayed as a grid?

I have a CMS collection list in a grid layout, but when I edit one of the images position, they all change?

I didn’t expect this to be a problem, but the images in the 1920px view in the designer is different to the preview which is pretty frustrating…

On a side note - I don’t understand why it looks different from the designer to preview.

I’ve shared the link below


Here is my site Read-Only: https://preview.webflow.com/preview/chatting-creative?utm_medium=preview_link&utm_source=designer&utm_content=chatting-creative&preview=351bf3883d2e45a18787157ed5a96d4c&pageId=5ea56e0f78beb6f332c79918&mode=preview
(how to share your site Read-Only link)

Hi @ConnorChatting it is possible if you give it a separate class, then it’s possible to give that specific one different attributes. The reason it looks different in designer preview mode might because of the responsive settings, once in preview mode it takes the full width of the screen while in the editor it takes only a smaller width. Hope that makes sense!

Hi @Graphic-Logic , I’ve tried giving it a desperate class but it changes for all of them. I suspect it’s because it’s a collection list and by dragging one div in it applies them to all - so that when I rename the div class or add a combo it changes them all.

Yeah that makes sense, just frustrating as it means I’m not really visually designing to the full capability, as it’s slightly different to what i see.

Thank you for explaining though, appreciate your help!

Hi @ConnorChatting no worries my pleasure. I think you’ll have to maybe have it as a custom block then not as a CMS collection didn’t know if that’s possible. Or otherwise you might have to give it a special attribute like ‘featured’ in the CMS then maybe that would work I’m not sure.

With regard to designing that’s totally possible, at the top where you see the responsive breakpoints you will have to set the custom screen size you want to design at. You can see all the custom screen sizes.

Hi @ConnorChatting To edit an image first click on the image and then click on the Insert/edit image button. Or select the Insert/edit image button under the Insert tab.
Under the General tab, you can edit the dimensions of the image by entering the dimensions (pixels) into the Dimensions boxes.
It’s important to note that changing these values only changes the display size of the image. They do not change the actual size of the image. This means that if you have a larger image and you change the Dimensions to be a smaller size, visitors to the page will still have to download the full larger image. It’s recommended to instead crop and resize images before uploading to your website.

Hi there, these have been set as background images, so I can’t find the insert image button?

Many thanks,

Connor Chatting

❝ User Experience Designer

@ChattingCreative

Creative Studio • Norfolk, UK

Hi again sorry I responded to a different email I had sent to Jörn could you possibly help me with this one please?

Wondered if you could help with something quickly?

It appears to be happening again! I’ve just created my desktop version of my portfolio homepage and gone through the different breakpoints of tablet, mobile landscape and mobile portrait - and whilst in the designer it’s showing as fine and the images
appear.

But when I go into preview from tablet down the images are just a line? I’ve pasted the read only link below.

https://preview.webflow.com/preview/portfolio-99?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-99&preview=8a925fe0931f9b71bfce8d007791928a&mode=preview

Many thanks,

Connor Chatting

❝ User Experience Designer

@ChattingCreative

Creative Studio • Norfolk, UK

I have the exact same problem.

One div block inside CMS collection, binding image background. now in tablet size one of the image positionings is not right when I want to make it right all of the photos are change.

the question is this: How to override image as background style and adjustments?