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?
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......