New Feature: "Fixed Width" Image Fit Mode

Be in the know
,
1

I’m happy to announce we’ve added a new super exciting capability allowing you to set a “Fixed Width” image fit mode.
“Fixed Width” means the image’s height will grow/shrink according to the image’s aspect ratio and width.
Elements below the image will be pushed down, similar to what we have today with Repeaters. It’s very useful for when the images are being set dynamically (using Data Binding / Corvid) because their aspect ratio is not known when building the site in the Editor.
Also, Repeaters are supported!

Corvid API ref

Before:

2260×1496 291 KB

After:

2268×2426 472 KB

Enjoy!

2

Beautyfull!

3

And even though it still looks like an error in the IDE (“fitMode does not exist”). You can ignore it. It’s not a real error and it works fine.

4

Does anyone have examples for fitmode? I seem to be missing something and the reference material is not helping.

5

I have the same problem I cant seem to find a clear description. My client has hundreds of images, some portrait and some landscape. She’s an artist and wouldn’t take kindly to her images being squashed to fit.

6

The example in the link that Ofer posted above is very clear.
You should add more details to your question, so we’ll be able to understand what is not clear enough. Maybe post a question in the discussion forum with your current code.

7

I just now managed to find the right code, its been so long since I wrote code. Anyway got it working but it still seems to pick and choose sometimes where things end up being, north and south of the image :slight_smile: everything is South but on some pages it throws one text block north of the image. Its gonna be something silly but thanks for your input. very much appreciated

8

Corvid documentation is super clear! thank you for this SUPER IMPORTANT feature!!! many clients have been mad due to this thing but now this made a huge difference thanks A LOT!

9

Any one had any success with ‘fitmode’ i have an art website with lots of different sized paintings to put up on dynamic pages - have no clear instruction from wix help team see below; as i am not a syntax expert am unable to follow these instructions - need help

thank you for contacting us!

You can not really manipulate images using Corvid (since adding or editing CSS is not supported) but if default functionality is not working - you can try using the fit mode:

https://www.wix.com/corvid/forum/corvid-tips-and-updates/new-feature-fixed-width-image-fit-mode

In general, we advise cropping your image according to the size of the element.

Feel free to contact us again if you need any further assistance.
Have a good day!

Jane
Corvid by Wix Expert

thx clare b

10

It’s really very simple. Just follow the doc in the link Ofer posted above.
If it doesn’t work for you, post your code in the discussion forum and maybe we’ll be able to help.

11

@jonatandor35 I want all repeater images to be indifferent original aspect ratio as the image mentioned above

Not working with these codes too

let $repeaterData = $w.at(event.context);
$repeaterData( ‘#imageX4’ ).fitMode = “fixedWidth” ;

$w.onReady( function () {
$w( “#dataset1” ).onReady(() => {
$w( “#imageX4” ).onViewportEnter( async (event, $w) => {
$w( “#imageX4” ).fitMode = “fixedWidth” ;
});
});
});

12

@vijayad1540 You need to use special code for repeaters. Please post your question in the following link (and tag me) and I’ll be happy to help:
https://www.wix.com/corvid/forum/community-discussion
(The current thread is not the place)

13

Thats great!!

14

@vijayad1540 If you want to set a mode for all your repeated picture elements simply use global selector $w(‘#id’) select one instance of your picture element which because is a global selector will affect all of your repeated element pictures and set the mode. I use it on repeaters all the time, it doesn’t need any special code…

15

@asanchez92195 Thank you so much
I will try