How to get images to display in the correct size on rotate

There are a couple of things you can do in this situation. The first is that you can remove the height attributes and allow the image to stretch to 100% width and the height will fall in proportion to its dimensions. This will help keep the image from looking squashed.

You could also consider using an attribute called "widesource" in which you can serve a different image when the device is in landscape. That way you could provide an image that is in a more appropriate dimension.

I have used widesource in the example, the problem is that the widesource image takes the pixel dimension of the source image.

Portrait:


Landscape:

It appears that it is stretching 100% of the Lheight and Lwidth based on your tag. If it is anything less then it will stretch 100% unless you remove one or the other of height and width.

Perhaps your beforeyouvisit_wide.png image has its aspect ratio reversed. That is, 768 x 1024 rather than 1024 x 768.

I removed one of the width and height as you suggested. It is an improvement.

Sorry I must be missing something fundamental. I have tried all sorts of combinations of height, lheight, and the just width and lwidth. My images are the correct width and height for portrait and landscape.

The starting images are perfect. When I rotate, it seems the images dont display in the correct aspect ratio. It's like the wire does not re-calculate the % into pixels on rotation. It is more pronounced when I take that same example and start landscape:



That is perfect. When I rotate, the images change, but its like its keeping the landscape ratio:



Squashed on the horizontal now.

What I am experiencing is similar to the reported behaviour in the Panel object, only for images:

It probably should be noted that if a % is used for a padding value and the app supports landscape and portrait modes, then layout may not be quite as expected when rotating the device.
When using a % for padding, the equivalent number of pixels is calculated once when the panel is first rendered based on the dimensions of the panel at that time. If the device is rotated to portrait/landscape mode, the same number of pixels is used – i.e. the padding is not recalculated.
This is an issue if the panel dimensions are different pixel sizes in portrait and landscape modes, because if the app is started in portrait mode the padding will end up being a different size than if the app is started in landscape mode.

Richard,

I was not aware that you were using padding attributes in your code. Regardless this does seem like an issue that I will need to dig deeper into. Would it be possible for you to add me as a collaborator on your project (icahill@rarewire.com) so I can see first hand what you are experiencing.

If it turns out to be a larger bug, then I will be able to escalate it accordingly. Thanks for taking the time to post in the community, this is extremely helpful as we try to track down bugs.

Hi Ian,

I have invited you, the project is called iPhone Landing. Its not the padding, just the calculation of the pixels for the size of the images in the different orientations when using a % for image size.

I have looked at the code and dug a little deeper and it does look like there is a bug. In order to get a widesource to work, noticed that I must use a lwidth and lheight to get the image to snap the new image into proper dimensions.

I have logged a bug report for this and it will go into our queue.

Thanks Ian,

I tried using the pixel dimensions for each orientation as well, but got the same result.

Richard

Richard,

In order for the widesource to work right now, you must assign an lwidth and lheight to the image that is using the widesource. I updated your code and it seems to work now.

Here is what it would look like:


<pager name="pager_name" width="100%" height="85%" lheight="83%" orientation="vertical" paginate="no" valign="bottom">
<panel name="button1" width="100%" height="40%">
<image name="pic1" source="beforeyouvisit_short.png" width="100%" lwidth="100%" lheight="100%" contain="no" widesource="beforeyouvisit_wide2.png"></image>
</panel>
<panel name="button2" width="100%" height="40%">
<image name="pic2" source="directory_short.png" width="100%" lwidth="100%" lheight="100%" widesource="directory_wide.png" contain="yes" clip="yes" align="left" valign="center" onclickup="show-directory"></image>
</panel>
</pager>