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!
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.)
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.
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?
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.
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 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’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.
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
Yes. Unfortunately it seems that this super-important feature hasn’t been implemented yet. It’s really frustrating, as the workarounds have a negative effect on the performance and loading speed.
