Changing Image Fit in repeaters

Ask the community
,
1

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?

1885×915 265 KB

2

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)
3

Halleluja, it works!! I have no idea how I was meant to find out about the onReady bit of code, but thank you!

4

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?

5

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…

6

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?

1872×1222 296 KB

7

Ok, now you are on the right track.
Now we know, that all of your images comes from a DATABASE (showed in a REPEATER), connected through a DATASET (placed on a DYNAMIC-PAGE).

The code you will need should look like…

$w.onReady(()=>{
    $w('#repeater1').onItemReady(($item, itemData, index)=>{
        $item('#myImageIDhere').fitMode = "fit"
    });
});
8

It took me a while to have a chance to test this, but it worked!! Yes, thank you so much for your help!

9

You are welcome.
Do not forget to like it, if you really liked it :wink:

10

in this here: $item ( ‘#myImageIDhere’ ). fitMode = “fit”
Is myImageIDhere the name of the actual JPEG image or file or are we talking how it’s numbered in the Content data? Sorry for the basic question.

11

@daniel3614

It is the image-ID which is located inside your REPEATER.

$item('#myImageIDhere').fitMode ="fit"
12

Thank you for that. Here is what I’m looking at and I’m noticing it doesn’t change the image to fit. I’m probably doing something wrong.

1507×672 65.6 KB

13

@daniel3614
Your repeaters ID is → “repeater1” ?
And your repeater is connected to your dataset?
I see no connected images.
You have also stored some images inside your DATABASE, which is connected to your REPEATER trough a DATASET ?

14

@russian-dima Yes. All of my images are connected through a dataset. The repeater is called repeater1. The images won’t show up unless I’m in preview mode which is why it looks blank. Am I not able to fit an image connected through a dataset?

15

@daniel3614
Everything works…(take a look here)…

https://russian-dima.wixsite.com/login-system/blank-2