Getting the picture size correct for Iphones etc

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Getting the picture size correct for Iphones etc

Unread post by garryrobinson_new »

After much experimentation, I have determined that you cannot have a picture that is wider than 300 pixels in H&M interface if you do not want safari to work weird on an IPhone 6

Here is a page that works like a treat on an iPhone 6
http://biketrail.info/sanfran.html

See picture attached where picture is 301 pixels wide maximum

Here is a page that slides all around on the iPhone, really annoying
http://biketrail.info/OtagoRailTrail.html

Picture are generally around the 400 pixels wide maximum on the Otago page.

How can I set a maximum pixel width for all pictures on a H&M web page ? Or how can I tell the maximum size without having to look at each individual picture. Or is there something I can set so that safari just scales it automatically I don't have to do any work. I have upto a 100 pictures on a page at once and I am reaching 40+ pages and growing fast.

Garry RObinson
BikeTrail.Info
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Getting the picture size correct for Iphones etc

Unread post by Tim Green »

Hi Garry,

The only problem here is that you are still using graphics with absolute dimensions. You don't need to think about those any more and shouldn't use them, ever. Set your images to "% of page width, maximum is native width", then you will no longer have these problems and all of them will work on mobile devices as well. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Re: Getting the picture size correct for Iphones etc

Unread post by garryrobinson_new »

Hi Tim

Here is the xml - is this what you mean.

<image src="greatv0010_DSC02833Mansfield.jpg" scale="100.00%" styleclass="Image Caption"><title translate="true">Start of trail at Mansfield</title></image>

Its the first image on this page
http://biketrail.info/greatvic.html

It doesn't auto shrink on a iphone6 safari and when you navigate to the page, it floats around. When you go direct to the page, it holds its place better.

On a pc, well its now big and I cant apply any % shrinks to the picture to make it small.

---- MORE RESEARCH

So then I went to importing again from scratch. Using the Percentage of Page size - maximum is physical size. This ends up with xml of
<image src="DSC04038.jpg" scale="-99.90%" width="514" height="387" styleclass="Image Caption"></image>

http://biketrail.info/index.html?kingsgrove.html
http://biketrail.info/kingsgrove.html

Which works but not if I want to use a toggle picture like the map. For that I need to use the 300 pixel maximum technique.

This solves the problem but puts a lot more emphasis on getting the original image size correct or the pc view (and tablet I guess) will have lots of giant pictures. I was solving this by just applying percentages on imports.

Final word. Sold on this -99% technique, if you turn the iPhone it rescales. So I will have to get good on organizing picture sizes and the toggles may have to wait a bit.

Any more thoughts ? I am on Facebook and Instagram with this content... Search biketrail.info
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Getting the picture size correct for Iphones etc

Unread post by Tim Green »

Hi Garry,

You don't need to "import again from scratch" to change image settings. Just double-click on the image in the editor and you can change everything. 8)

Toggle images are a special case. You can set the preview image to a percentage, but the expanded image will break mobile layouts using the standard skins. This can only be avoided in the Premium Pack skins, which use different code to handle the problems of mobile screens.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
garryrobinson_new
Posts: 8
Joined: Fri May 19, 2017 10:50 am

Re: Getting the picture size correct for Iphones etc

Unread post by garryrobinson_new »

Double clicking is not that easy, editing xml is not that easy either. 50+ photos on some pages.

Reimporting is better. I have to resize the pictures so that they are not too big on a pc. I devised a system to put them into a filename order so its not too painful, that work has been done

This page works really well on both landscape and normal iPhone 6

http://biketrail.info/index.html?sydprk.html

Now to go and do some more bike riding, far more important and fun.

Thanks for your help
Post Reply