Image scaling on menu items etc.

dyvel
13 years, 5 months ago

Hi

I have a small issue with the image scaling on my menu items. The problem is that I need the image to have 100% width of the menu button. And that doesn't work when I view the site in "wide format" on my iPhone (horizontally).

In fact I would like to use a large image that would cover the button in wide format, and then hide some of the image in normal vertical display (narrow / normal format), but can't seem to get that working.

I'm pretty sure this border case is not supported by Mobile Joomla, but would it be possible to do?
Even just to turn off image scaling for menu items, and keep it for regular content?

Thanks
Daniel

dryabov
13 years, 5 months ago

You can try to apply css style like

yourselector img {
min-width: 100%;
height: auto;
}

Actually, in this case images will be blurred in lanscape mode because of rescaling.

dyvel
13 years, 5 months ago

Hi

Thank your for your fast reply, but I don't think that will do it.
Looking at the source code, the menu image is scaled and added width attributes to it.

<img width="300" height="54" src="/images/knapper/Resized/knap_fisherman_300x54.png">

The original image I'm testing with is currently 879px wide

dryabov
13 years, 5 months ago

Yes, but then we stretch image to have ~450px width (and autorescale height).

Unfortunately, currently we haven't implemented a way to process such a situations (moreover, server doesn't know orientation of your device to rescale images correspondingly).

dyvel
13 years, 5 months ago

In the theme css file that I'm modifying I found this:

body.landscape .toolbar>h1

So I'm guessing here, that jqtouch support a way to detect landscape mode, but it's not implemented in mobilejoomla.
A stretched 300px scaled image to 100% in landscape on my iPhone looks pretty bad - very pixelated. It's a solution, but far from perfect.

alirm41
13 years, 1 month ago

Hi.
Would you please let me know if anyone solved this problem?
I have the same problem with my image size when I changing the mobile orientation from horizontal to vertical.

Or at least, is there any way to lock the orientation?
Can you tell me how you re sized menu items (coding line)?
Regards,
Al

alirm41
13 years, 1 month ago

Well, I spent more than two days to find the best, easiest and right solution on mobile orientation issue.
Here is the answer:
- Go to FTP and locate the mobile_iphone template folder.
- Download index.php into your local system
- Remove line 32: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-Insert :<meta name="viewport" content="user-scalable=no,width=device-width" /> instead of the previous meta tag.

Then you are done. when you rotate your mobile to landscape mode then you have full size image and text align to center on landscape mode.

Note: remember to set Adaptation mode from iphone backend setting to "Don't re scale" and your image width size should be 320px .

Regards,
Al

By continuing to use this site you consent to the use of cookies on your device as described in our cookie policy unless you have disabled them. This site will not function correctly without cookies.
I accept cookies from this site. Agree