https://www.suzannebirch . com/bird-originals
I created this page to show the works that are for sale, using a dataset / dynamic pages. Some images in the repeater are portrait, some landscape. Now they are all cropped in a really awkward way.
I have found the code to fix this from this page: https://www.wix.com /velo/reference/$w/image/src
And have figured out that I need to add this line of code: $w("#Image1").fitMode = "fit";
Also I looked at all the very basic tutorials out there and on this forum, and I cannot work out how to add this code into my page so that it actually works. It seems to work when I click preview, however on my actual published website the images are still cropped awkwardly.
Please help, I'm going mad! Can anyone just give me the piece of code and tell me step by step where and how to put it, somewhere in the editor below?
![](https://static.wixstatic.com/media/a27d24_adac05b2de3b4b219a450cc9bce27027~mv2.png/v1/fill/w_49,h_24,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_adac05b2de3b4b219a450cc9bce27027~mv2.png)
Well first of all, you have absolutely no code on your page --> except one wrong code-line...
If your IMAGES are placed directly on the page, than your already used code-line would make sence (althought it is wrong).
Like J.D. already mentioned, all the CODE you generate ---> is CASE-SENSITIVE.
And when you add some code to one of your pages you always start with -->
$w.onReady(()=>{ }); - command (also already mentioned by J.D.)
Now if you want all your IMAGES to be fitted in their size the same way, you will need something like this....
$w.onReady(()=>{ $w('Image').fitMode = "fit" });
This normaly should fit the size of all the images placed on your page, when page is ready.
But your setup is still not very clear to me. You said that you are using a DYNAMIC-PAGE, but you also say that the images are placed in a REPEATER.
"ORIGINAL-ARTWORK" ---> is NOT a dynamic page as i can see from the given PIC.
So if your IMAGES are really placed inside a repeater, the given CODE would not work. Then you would need another CODE, to fix it.
Perhaps you should first clarify your page-setup.
What is placed where?
What is connected to what?
And so on......
It took me a while to have a chance to test this, but it worked!! Yes, thank you so much for your help!
Hi, sorry for the confusion and thanks for replying! I realise I might have given the wrong link and image - it is the screenshot below Im talking about, which is this page: https://www.suzannebirch.com/bird-originals . I seem to have both pages still active - the online shop as it was before, and the dynamic page option. But it's the dynamic page that I want to keep, with the images placed in repeaters as below. What is the code I would need to fix the Imagefit in the repeaters, so that the middle image is shown properly?
Actually - it doesn't work after all. I just opened up the page again and the same weirdly cropped images... Does anyone have a solution?
Halleluja, it works!! I have no idea how I was meant to find out about the onReady bit of code, but thank you!
Put the line you have inside $w.onReady:
$w.onReady(() => { //here })
+ Make sure the element ID is correctly spelled (it's case sensitive, so check if it's Image1 or maybe image1)