imagefit "Fixed Width" equivalent Editor X

Ask the community
,
1

On Editor X, why is it impossible to display repeater items with images that have different ratios while keeping those ratiors?

WIX could do this easily with fitmode:
https://www.wix.com/velo/reference/$w/image/fitmode

I’m stuck with a repeater in Editor X with images all being cropped since they use different ratios.
https://vgcompleteinfo.editorx.io/vgcomplete/blank

Any solution to this, or is Editor X just worse in this regard? I was hoping to move my page over, but this is essential for my page layout.

2

Do you want the width to be fixed and the height to change?
So first of all on the right side bar set the width to certain value and the height to “Auto”. then in you code assign ‘fixedWidth’ to the image.fitMode

3

I actually want the height to be fixed, and the width to change depending on the ratio.

However:

  1. Width can’t be set to auto in a repeater in Editor X
  2. You’re saying I should “code assing ‘fixedWidth’ to the image.fitMode” but the fitMode call does not exist in Editor X, only WIX.
4

@vgcompleteinfo fitMode = ‘fixedWidth’ is definitely not the thing you need (you want the width to be dynamic.
You should ask it on editorX forum maybe they have a solution.

P.S. I think in this case I’d build my own repeater using custom element which doesn’t have these limitations. If you know how to develop custom elements using html, css and js - go for it.

5

@jonatandor35 I think I was mixed up here and had my Width & Height mixed up. I didn’t even know there was a dedicated editorX forums, will deff stop by. Is there any resources that might be helpful in developing a custom element like this? I have some knowledge here so it might be something I’m able to do if there’s a good resource that can provide guidance.

6

@vgcompleteinfo

Velo: About Custom Elements
Yoav’s example custom element repeater with Velo

But you’ll need to make css + html adjustments (for example to set the image css to object-fit: contain; and more)

7

Thanks for that!