Dynamic images in Repeater. Fitmode not working.

Ask the community
,
1

I have been trying to solve this problem. Looked into corvid docs for fit mode but still it is not working. Also it says, “fit mode does not exist.” Kindly help with this.

2

Hello,

Try to debug your code by following the instructions from the article below:

Corvid: Testing and Debugging Your Code

I checked the functionality and the API works properly:

1920×914 71.6 KB

The code you can use to check it yourself:

$w.onReady(function () {
    $w("#imageID").fitMode = "fit";
    let mode = $w("#imageID").fitMode;
    console.log("Mode of the image is: " + mode)
});

Note: to implement it in a repeater, you would probably need to use forEachItem()

3

I checked it in Wix editor, it works fine there. But I am working on Wix Editor x . It shows undefined their.

1920×702 126 KB

As you can see in the console, undefined.

1920×758 123 KB

Am I doing it right? Kindly guide in this. Thank you.

4

Hello,

I’ve forwarded your question to the relevant team.

I’ll get back to you once we have an update.

Thanks for your patience and understanding.

5

Thank you. I’ll be waiting.

6

@harisash12

Hello again,

I got an update for you from the relevant team.

Since Image X is a new component some of the Image properties are not available to use with Corvid.

fitMode specifically does not actually exist for Image X (Editor X Images).

Thanks for your patience and I wish you a good day.

7

@anastasiias Is there any workaround? I am using a repeater to load dynamic images from the collection and all are of different sizes. Currently, they get cropped and doesn’t look good.

Also, can we expect that image X will get these properties in the future updates?

8

@harisash12 I’d recommend you to contact Wix Customer Care and provide all the details regarding the issue so they could further investigate it and suggest you a solution/workaround.

https://support.wix.com/en/article/contacting-wix-customer-care-for-support

9

So this works with a repeater, just make sure you reference the image at the right level.

$w.onReady(function () {
$w(“#image1”).fitMode = “fixedWidth”;
});

10

Also, please note that if you look at fitMode function in the Wix Image API, it does state:

Note
fitMode is not supported in Editor X.
https://www.wix.com/corvid/reference/$w.Image.html#fitMode

However, it does link you to the Wix Support Editor X pages for using images in Editor X that you should read and take note of, like making use of focal point.
https://support.wix.com/en/article/editor-x-adding-and-editing-images-on-your-site
https://support.wix.com/en/editor-x-beta/about-editor-x-7952617
https://support.wix.com/en/article/editor-x-using-repeaters

Finally, please remember that Editor X is still in beta, so things will be added to it at any time and things can be taken away as well.

So don’t expect everything that is currently available to you in the Wix Editor to also be available to you in Editor X.

Obviously, there will be workarounds for some things so there might be ways to get around certain parts, although not everything like adding npms.

11

It doesn’t in X, if you get the fitMode like Anastasiia has already used in her code sample, it still returns an undefined mode, as noted in the API Reference.

$w.onReady(function () {
$w("#imageX1").fitMode = "fixedWidth";
let mode = $w("#imageX1").fitMode;
console.log("Mode of the image is: " + mode)
});

Mode of the image is: undefined

12

I have used pro galleries with only a single image in them, and they have the option to make the image fit; it’s not an ideal solution but it seems to have worked for me a couple time …

13

Ouch! I was just testing out editor x and really enjoying until this. Non starter for my project. Following and hope a workaround appears.

14

This is actually a great solution. Seems to be the only solution that works on all my projects, thank you :slight_smile:

15

Any other solutions in here? The pro galleries method doesn’t work because you can’t add them to a repeater.