Image is stretched when description viewed on phone

[+JamesonLKJ]

https://www.geocaching.com/geocache/GC898FJ_twisty-foldy?guid=b4850688-78cf-4722-9c5f-bb3c08c31b1c

 

I created a puzzle for a geocache in the link above. The puzzle is on an image, and on the website the image is perfect, but when viewed via the geocaching app on my phone the image is stretched and isn't really usable. I tried to make the image smaller, and that fixes the issue, but then the image looks too small on the website. Does anyone know if I can make the image fit to the screen it's on?

Edited October 6, 2019 by JamesonLKJ

[+kunarion]

8 hours ago, JamesonLKJ said:

https://www.geocaching.com/geocache/GC898FJ_twisty-foldy?guid=b4850688-78cf-4722-9c5f-bb3c08c31b1c

 

I created a puzzle for a geocache in the link above. The puzzle is on an image, and on the website the image is perfect, but when viewed via the geocaching app on my phone the image is stretched and isn't really usable. I tried to make the image smaller, and that fixes the issue, but then the image looks too small on the website. Does anyone know if I can make the image fit to the screen it's on?

 

I looked at the image of Rubic's Cubes and folded paper, and after tapping the "Photos" link, it looks fine by itself on my Android HTC U11 and iPhone 8.  But within the description on the Droid, it looks slightly smashed in width.  On my iPhone, the picture is not smashed but it's way too big for the screen.  Weird.  Did you define the dimensions in HTML?

 

It might be good to provide an extra link to the image for phone users.  Then they can zoom and scroll the image.

[+JamesonLKJ]

6 hours ago, kunarion said:

 

I looked at the image of Rubic's Cubes and folded paper, and after tapping the "Photos" link, it looks fine by itself on my Android HTC U11 and iPhone 8.  But within the description on the Droid, it looks slightly smashed in width.  On my iPhone, the picture is not smashed but it's way too big for the screen.  Weird.  Did you define the dimensions in HTML?

 

It might be good to provide an extra link to the image for phone users.  Then they can zoom and scroll the image.

Thanks. I added a link to the image for mobile users as you suggested. I think that may be the best solution.

[+kunarion]

2 hours ago, JamesonLKJ said:

Thanks. I added a link to the image for mobile users as you suggested. I think that may be the best solution.

 

That will probably be pretty good.  I notice that I can also view a linked image in landscape for a slightly larger view, which I can’t do for an App cache description. 

 

You can always tweak the page later, if you find a way to get it displayed right.

 

Edited October 6, 2019 by kunarion

[+thebruce0]

The app doesn't resize images to the display width like the website does.  You can try changing the html source for the image to add a width attribute, either:

 

<img alt="" src="https://s3.amazonaws.com/gs-geo-images/6d51a599-cc25-4cd7-8197-2b3aef17db79.png" width="100%" />

or

<img alt="" src="https://s3.amazonaws.com/gs-geo-images/6d51a599-cc25-4cd7-8197-2b3aef17db79.png" width="670" />

670 pixels is the max width of the listing on the web, but that'll also force the image to that size on every mobile view.

 

If you're in WYSIWYG mode, you can right click on the image to edit its properties, then just set the width value.

 

If you use 100% it should shrink the image to fix the width of whatever is viewing the HTML, which is recommended.  I'd also recommend making the image a direct link to the source image url.  Just select the image and click the link button and paste the image URL.

But, just leaving the direct link to the image above is easiest if you want to avoid editing html as much as possible (it's just less pretty)

[+thebruce0]

Also, I might just have to solve this and come find it next time I'm in London