Hello! I have created a database that includes client logos. On my dynamic page design, when the various logos load into their respective pages, the images are cut off due to the different shapes of the logos. I tried to fix this by setting the image crop properties to "stretch" but unless every image is the same proportions, they will distort as they stretch.
What I would like to do is be able to constrain the height of the image being shown to 250px, with the width resizing to accommodate each logo as needed as I move through the dynamic pages.
I realize this is likely a simple solution, but I am really very new to coding. Thank you in advance for your help!
Wix have the solution to this in the Image API by using the fitMode function.
https://www.wix.com/corvid/reference/$w.Image.html#fitMode
fitMode
Sets or gets how an image is placed inside an image element.
Description
Setting the fitMode property sets what happens when an image element contains an image with dimensions that do not match the dimensions of the element as set in the Editor.
The value can be set to one of "fill", "fit", or "fixedWidth".
Examples
Get the image fit mode
let mode = $w("#myImage").fitMode; // "fixedWidth"
Set the image fit mode
$w("#myImage").fitMode = "fixedWidth";
Solved. In dev mode, create function at page onViewportEnter, add this line into the function:
$w('#image5').fitMode = "fixedWidth"; //use your image container name
Following. I have tried everything I can think of to make this work. Any other suggestions?
This is crazy! Is there still no fix for this that actually works? All the work arounds still seem to effect all the other elements on the page
Following this post. I am also having the same issue. Hope wix will give a solution to this soon
folowing the topic
i have been using the gallery "fix" for a number have months and have noticed it heavily impacts page load speed. hoping there is a less demanding fix implemented
I'm having the same problem - people are submitting images in various sizes, some of which are portrait and some are landscape. The drastic difference is really messing with my dynamic page - I'm hoping there will be some sort of solution soon.
Hey I found a "workaround". I'm... pretty confident having to load a gallery element vs an image element will be more "heavy". (50+% of my site traffic is mobile, so load/render times are important to me).
I just made the images all the same pixel height and width. I used the largest pixel height/width logo I had as reference, then opened up the smaller ones in Photoshop, and changed the Image Canvas Size to match.
This made it so when the image asset is loaded, there's no interpretation needed, it just loads up exactly as intended.
I'm working with a white page/header background so its not a big deal for me to keep everything white. If you're using transparent PNGs I'm going to assume it will be the same results.
I haven't noticed any performance difference, but take that with a grain of salt. My site is still under production, so it only has dummy data at the moment and has not been used with mobile view.
Hey David, how does having a gallery element vs an image element affect the pages loading/rendering times? Anything noticeable on mobile view?
I actually may have found a temporary work-around here, for those who are interested.
Right now, when you have an image element, you are only given resized options of "auto" and "stretched. Neither of which solve the current dilemna.
However, if you use a gallery element instead of an image element, you are given the option to resize it according to "Fit". So, I just used a gallery element in my Dynamic Page, set the row and column to 1. Removed all spacing, transparent background, etc. Now it looks like a normal image on each of my pages and auto resizes all logos.
Hopefully this helps
Following this post.
I have same sort of issue when creating a user input table of members (via dataset) from database collection. All images appear 'as is', so all with their respective size at time of uploading. It ends up creating a sort of 'messy' table. Still no way to automatically crop the images the same way a gallery of images would do it?
Thanks,
Hey Yoav, I've seen your responses to a few other people and you really do a great job. I know Wix Code is in beta and having a bunch of noobs like me trying to break it must be...interesting!
Anyway, for the images, I ended up doing exactly that - setting a square box for the images and making each logo a square. Works great. :)
Hay all,
Thanks for the feedback. This is an important feature that will need to resolve.
For now, my best advice is to pad the images in photoshop to the size allocated for the picture in the editor, so that you have full control how the padding is happening (positioning of the picture inside the frame, it's size, etc.)
Having that issue as well. All images are blurry.
Guess there's no fix to this yet? I am also resizing all the images to one size to fit the same frame
I m having the same issue :(