Get object-position pictures from CMS

Hi there,

I could really use your help.

I’ve created an image-field and an “object-position” field in the CMS. I want to create a collection list with the images from the CMS and apply per image the given object-position from the CMS.

With some custom code and adding an ID to the image, I’ve managed to get it working for the first item, but all the other items use the same object-position as the first item.

Could someone help me out? See my site Read-Only-link, where I recreated the problem.

Thanks in advance!


Here is my site Read-Only:
https://preview.webflow.com/preview/problem-object-position?utm_medium=preview_link&utm_source=dashboard&utm_content=problem-object-position&preview=3d0418e462698b6441e72b0c48a5cc3f&workflow=preview

@bearlybrave your custom code affects 1 ID that is shared with all your image. Thats the reason why all the images has the same object position.

Try removing the current Image and change custom code to

Screen Shot 2022-05-13 at 01.30.17

<style>
#(dynamic){  
  object-position: (dynamic);
}
</style>
<img src="(dynamic)" class="image" id="(dynamic)"/ >
1 Like

@dennyhartanto Thank you so much, you’re a lifesaver! :hugs: And also thanks for the fast reply. Have a wonderful day!

I have the same problem with a page: The pictures are really important, and object-position can fix the problem, in lack of focus point option in CMS… But as you mentioned it affects the hole class when applied, and all the generated subpages. Can you please help me out. Where should I start? Ideally it should alter on different advices aswell, but that might be just wish full thinking. (desktop, pad etc.)
How did you set up in the CMS?