Auto size images on Dynamic Item Page

Ask the community
,
1

I have a data collection called Projects, to which I’ll add items for the books, films and YouTube shows I’m working on.

I want to add an image for each item, but I’m having problems with the image on the Dynamic Item Page as the images are of different sizes. Some of them are landscape, others portrait and as they come from different sources, few of them are the same size. If I use a landscape image placeholder, then portrait images are cropped to show only the middle of the image and vice versa. Stretching images also produces unsatisfactory results.

Is there a setting I’ve missed when designing the image placeholder? Or is it a matter of running code when the page loads, perhaps based on fields in the data collection for ImageHeight and ImageWidth?

Any advice gratefully received.

2

Hi,
We try to optimize the image according to the dimensions its given on the page. Currently it’s not possible to modify the image size according to its content.
If you know in advance that you have a few types of images, I might suggest adding a few image components to the site and hiding and showing them according to the size of the image:

	if(image.imageWidth > 800) {
		$w('#landscpaeImage').show();
		$w('#portaitImage').hide();
	} else {
		$w('#landscpaeImage').hide();
		$w('#portaitImage').show();
	}
3

Ohad,

Many thanks for this. That’s a very elegant solution.

When I get some more free time, I’ll have a look at the optimum size for deciding what size is best to delinieate between portrait and landscape for the images I have to deal with.

4

I have the same problem… ;o(
All of my images are 300px high and it works perfectly in the Gallery with the image properties option “Keep the original format”.
But when i want to see the same image in a detail page from my database, I have the same problem as you and I can’t find the option “Keep the original format” or similar.
Why this view displays an image with a different format and not editable ?

5

I found the solution…finally…and without coding… :o)

On your detail page, don’t insert an Image but a List & Grid Repeater.
When you have your table repeater on your page, delete all the images but one.
Therefore you can make the setting of your image…and it works.
You add a background color or image and when you click on it, to go in the Parameters of the Background Image and select “Keep original size”.

6

Is .imageWidth actually a function? I can’t find any documentation on it or get it to work in my code. Would very much like to detect the width and height of images in my collection!

7

I am still struggling with changing the size of the image that displays in a repeater connected to a dataset. Any other ideas?

8

It’s currently impossible. As a workaround we put a slider gallery in the repeater container, set it to “FIT” and assign the image to the gallery.

9

There’s a solution now:
https://www.wix.com/corvid/reference/$w.Image.html#fitMode

I’m closing this thread.