Phone Screen Behavior

[wwone]

I love the way the thumbnails appear on my computer screen. When I view a single image, I can click to the left or right and get the next or previous in the series. They appear nicely on the browser screen. I have not had any navigation or appearance problems with my Autophugo website on the computer monitor.

However, when I view the thumbs and images on my phone screen (several models tried), there are some nagging issues. (One of the reasons I picked Autophugo was that the code appears to be adaptive to various devices, something Google Search likes very much.)

1) When there are multiple rows of images, and I'm viewing a single image, there is a problem when I press the image to see the "next" image. The screen scrolls so that the new image in the series is off-screen. I have to manually scroll to find the image, and often the screen is just black (not helpful). [Just a note that there does not appear to be a "previous" choice on the phone.]

2) When I rotate the phone to horizontal (landscape) the full picture images actually shrink and are smaller (!) than when viewing them in vertical (portrait).

If you want, I can provide some "screenshots" of these behaviors.

[kc0bfv]

I've had that problem 1 now that I made the URL change to reflect the current image - for a little while I was hoping it was just me, then I realized last weekend that it was still there, then your report caused me to look for a fix today. I found it and I think it's in there now.

With problem 2 - I think I have this issue too... However I don't have a good fix. Looking at my Android phone I see the same issue. Thing is - when I put my pixel 4 in landscape and open an image I have about 283 pixels of height. Then the text at the bottom of the screen needs about 60 pixels, and the x at the top needs about 40 pixels - so there's only 183 pixels of height left. Displaying the image proportionally, that's pretty small.

Perhaps if there's less than 400 pixels of height I might make the bottom text disappear and the x sit on top of the image.

[kc0bfv]

Actually - for part 2 I found a feature in magnific popup that just wasn't documented anywhere official, only in other people's example code. I didn't see any downside to it, so I enabled it, then made a pull request on magnific to document it. Behavior should be better now - but it still might not kick in in every case. Kicks in when there's less than/equal to 300 pixels height, or when there's less than/equal to 800 pixels width and height is less than width (landscape mode).

[wwone]

Thanks, I will try your newest tree.

I can see your issue, when the phone is horizontal. There are just not enough pixels on most phones to fit everything in. In addition, touching different parts of the screen (horizonal) cause different (unexpected) target actions.

Perhaps I may have to tell my users to just keep their phones vertical, and let the computer layout (almost always landscape) look fantastic. There are other "magic" CSS/JS environments I deal with, where I have to ask the user to rotate into a horizontal orientation (!) instead.

[kc0bfv]

Hopefully using the lightbox feature helped. You should be able to see the change in the demo site now. In the fish gallery there is at least one vertically oriented photo, and the names gallery has a ton of horizontal stuff.

On Sun, Oct 23, 2022, 16:48 Bob Swanson @.***> wrote:

Thanks, I will try your newest tree.

I can see your issue, when the phone is horizontal. There are just not enough pixels on most phones to fit everything in. In addition, touching different parts of the screen (horizonal) cause different target actions.

Perhaps I may have to tell my users to just keep their phones vertical, and let the computer layout (almost always landscape) look fantastic. There are other "magic" CSS/JS environments I deal with, where I have to ask the user to rotate into a horizontal orientation (!) instead.

— Reply to this email directly, view it on GitHub https://github.com/kc0bfv/autophugo/issues/51#issuecomment-1288208433, or unsubscribe https://github.com/notifications/unsubscribe-auth/AALGLJLXIWAQEXYNM6WZB2TWEWXCDANCNFSM6AAAAAARHIDP2Y . You are receiving this because you modified the open/close state.Message ID: @.***>

[kc0bfv]

On a different phone I wasn't seeing the new horizontal mode behavior - it was set to kick in at 300 pixels height, which I think is smaller than ideal now. In the latest pushes I changed it to kick in at 500 pixels height, which seems nicer. That should be visible on the demo photo album.

[wwone]

Thanks for the hard work, checking on this issue. I have done some studies using the "tools" for Chrome, and can see how the site behaves with different window sizes (simulation of iPhone, etc). Screenshots are attached. It looks good to me.

I agree, that my phone is probably the wrong one to try, given a content window size of 412x671 (or 284x823, depending on orientation).

The "back" button behavior is just fine, no problem.

---

I have an idea that there could be a better way to show images, but have no idea how much work it requires. A number of image websites allow for a "full screen" option. If that option were offered by autophugo, it would work quite differently than the current set of code. I know that this type of code is massive, involving lots and lots of JavaScript and CSS magic. Perhaps someone can offer such a set of tools, since it seems to be somewhat common.