• Registered: 2012-05-02
  • Posts: 161

Topic: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

I have a standalone gallery with about 600 images: http://www.billanddot.com/Emma-pictures/index.html . When I view it on my iPhone6, immediately after clearing the cache in the phone's settings, it shows a screenful of very small thumbnails. Here's the screengrab of that: http://www.billanddot.com/IMG_1598.jpg . If I then press the page's Refresh icon -- and sometimes I have to do this twice, and sometimes only once -- it reverts to a normal thumbnail display, i.e.: http://www.billanddot.com/IMG_1599.jpg .

I have a similar gallery, http://www.billanddot.com/Max/index.html , which has a similar amount of images, but that gallery doesn't exhibit this whole-bunch-of-little-thumbnail problems.

I'm running iOS 8.4, which may be the culprit, as that was a recent upgrade and I didn't notice the problem before.

Steven, could you take a look at that gallery and see if something jumps out at you (if you have access to an i-device with a small screen, of course)?

Thanks,

Bill P.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

Thank you for providing the links and screenshots. It makes troubleshooting that much easier!

I see the problem on my iPod Touch 4 running iOS 6.1.6 so iOS 8.4 is not the problem.

I think the problem may be related to the following line of code in your web page:

<meta name="viewport" content="minimal-ui" />

The latest version of JuiceboxBuilder-Pro and the current plugins do not insert a <meta> 'viewport' tag into the HTML pages that they generate. (Your gallery which does not exhibit the problem does not have this line of code in it.)
Try either removing the <meta> 'viewport' tag completely (which should allow Juicebox to scale the page correctly) or setting the <meta> 'viewport' tag to the following (to scale the page yourself).

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Hopefully one of these suggestions will work.

Incidentally, Apple introduced the 'mimimal-ui' viewport property in iOS 7 and removed it from iOS 8. If you want to continue using it for iOS 7 users, then you could use:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" />
  • Registered: 2012-05-02
  • Posts: 161

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

Steven:

First of all, thank you for your prompt and thorough examination of the assorted files involved.

Second, alas, I still have this problem. Or at least, I seem to still have the problem. Here's what I did:

1) I removed the entire meta/viewport lines from my web server's gallery.html and index.html files, cleared the cache on my iPhone, opened the page in Safari... and got the same results as I described in my first post.

2) Next, note that I had been updating my galleries by replacing the jbcore directory for each gallery -- using a python script I described in http://juicebox.net/forum/viewtopic.php?id=147 -- as each new release of Juicebox Pro was released. That is, I hadn't actually been re-generating most galleries.

This time, however, I generated the http://www.billanddot.com/Emma-pictures/index.html gallery anew. That is, I ran jAlbum, with the Juicebox skin, with the Pro options. I had updated the Juicebox skin a few days ago in jAlbum, and then replaced the jbcore directory for that skin with the real (Juicebox Builder) jbcore.

So, in jAlbum, I did a Make Album and then Upload. After this process was completed, I looked at the new gallery.html and index.html files and, as you stated, there were no viewport lines in them.

So I cleared the cache again, went to that gallery, and got the same results as before.

BTW, to clear the cache on my iPhone, I go to Settings --> Safari --> Clear History and Website Data --> Clear History and Data --> (press). I think that's what I'm supposed to do, and it zaps any sites I may have had open in Safari.

Perhaps there is something I'm supposed to do to force cache-clearing on my server (hosting by Bluehost.com) that I don't know about.

Last, as you can see by the simple way I generate all of these standalone galleries, I have no interest in playing around with scalability, i.e., I just want to let Juicebox handle everything for me. So I haven't (yet) attempted to manually add code -- such as the optional lines you presented -- after jAlbum has generated a gallery for me.

Er, um, you have any other thoughts about this? It's really weird that only one of two very similar galleries exhibits this behavior.

Thanks,

Bill P.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

I cleared my iPod Touch's cache in the same way that you cleared your iPhone's cache.
I then loaded your 'Emma-pictures' gallery and still saw the problem myself. However, when I viewed the source of the web page, I noticed that the viewport tag was still present.
I then tried viewing the web page adding a (redundant) query string to try to force the new version of your page to be fetched from your web server and it worked.
I used this URL http://www.billanddot.com/Emma-pictures … ml?xyz=123 and only 6 thumbnails were displayed on the page (as expected). When I viewed the source of the web page this time, the viewport tag was not present.
It looks like the problem is solved by removing the viewport tag but that there is a caching problem somewhere along the line (forcing the old version of the page with the viewport tag still in place to be used). The caching may be happening server-side rather than in the mobile browser.

It looks like Bluehost uses Varnish caching. Try turning it off following the instructions here.

Alternatively, if you have an Apache server, you might like to try adding the following line of code to the .htaccess file in your root directory.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

Hopefully one of these suggestions will help.

  • Registered: 2012-05-02
  • Posts: 161

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

Alas, no luck. Here's what I did:

1) Re Varnish, I didn't do anything. I followed the instructions on the BlueHost page for which you sent me a link. However, when doing so I found no option (on my "server" page) for Varnish. On that original page, BlueHost states that "This article will explain how to turn varnish off on a WordPress Optimized account." Apparently, I don't have a "WordPress Optimized account," which makes sense because I've never used WordPress. Either that, or those instructions are out of date (and BlueHost neglects to include any date on that page).

2) Re .htaccess, I edited the file such that the opening lines were changed from...

<IfModule mod_headers.c>
Header set Cache-Control "no-transform"
</IfModule>

...to...

<IfModule mod_headers.c>
Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"
</IfModule>

I then cleared the cache on my iPhone6, tried loading the page again, and got the same lots-of-thumbnails result as before (correctable by refreshing the page once or twice, as before).

Maybe the server is more recalcitrant than you figured, and I have to wait for BlueHost to reboot it or something like that. This is all not a very big deal in the grand scheme of things, but I thought you and the developers should know about it.

Cheers,

Bill P.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

I noticed the reference to WordPress on the Bluehost support page but your hosting account might have been using Varnish regardless of whether or not your hosting account was optimized for WordPress so it was worth a shot.

As I noted with the query string trick, the new file (without the viewport tag) is being served OK when a unique URL is used and the problem is not seen when this version of the page is used so the problem certainly seems to be a caching problem (removing the viewport tag appears to resolve the original problem you reported).
When I see the problem and view the source of the page, the viewport tag is present (even though it has been removed from the file on your web server) so the old version is still being served from somewhere.

Try viewing your web page in a different browser (such as Mobile Chrome) which has never been used to view the page before (if possible). If you still see the problem (now that the new file without the viewport tag is in place on your server), then the caching problem is server-side rather than client-side (in the browser). Perhaps you could contact your web host and ask if caching is present on your hosting account and, if so, how to turn it off.

Maybe a workaround would be to name the new version of your page 'index.htm' (rather than 'index.html').
The server should still hopefully be configured to find and use this file name as a default if a user navigates to the parent directory (without explicitly using the index file name).
As the filename is different, the old cached 'index.html' file should not be used.
(The only disadvantage would be that if you have any links to this page, you would have to adjust them accordingly.)

  • Registered: 2012-05-02
  • Posts: 161

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

I tried everything except contacting BlueHost:

1) I renamed http://www.billanddot.com/Emma-pictures/index.html to http://www.billanddot.com/Emma-pictures/index.htm , and it didn't help, i.e., same results as before. I used both version of the .htaccess file for this test, too.

(As a side note, I downloaded and experimented with a quite a number of text search-and-replace tools. If I were to use this changed site name, I would need to adjust about 30 HTML pages out of about 7,000 candidate files in one directory. The program fnr.exe -- https://findandreplace.codeplex.com/ -- is an order, or perhaps two orders, of magnitude faster at this task than any other program I tried. Highly recommended.)

2) As the renaming didn't help, I put the URL back the way it was.

3) I installed Chrome for the iPhone6. Going to my home page ( http://www.billanddot.com/ ) and clicking on the link ("Granddaughter Emma") for http://www.billanddot.com/Emma-pictures/index.html resulted in the 140 thumbnail display (as with Safari). However, unlike Safari, invoking Chrome's Refresh action did nothing but... reload all of those thumbnails. I did this five or six times, with no change. (Recall that with Safari, one or two Refreshes would cure the massive-thumbnail problem.) However (again), if I left the http://www.billanddot.com/Emma-pictures/index.html page with a Back action to my home page, and then clicked that link again, Chrome would show the proper (i.e., fewer) number of thumbnails. But Refreshing that page, in place, resulted in an increase in thumbnails, something that, in situ, I had been unable to experience before.

All very strange. I think I'll leave everything as is (and I've since removed Chrome, which various reviewers claimed was very unstable, anyway, on the i-platform). Steven, thank you very much for your time, thoughts, and energy spent on this issue.

Cheers,

Bill P.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

I've tried to replicate the problem using the same HTML page that you currently use ('/Emma-pictures/index.html'), the same gallery structure (a gallery created by jAlbum) and a gallery containing well over 140 images but I cannot get the 140-thumbnail display on either Mobile Safari or Chrome. The scaled-up 6-thumbnail display is always shown.

Your web page seems to load a little slower than my own test gallery.
I'm not sure if this is because of the problem (having to load 140 thumbnails) or the cause of the problem (perhaps a timing issue).
Do you have access to a different web server where you could temporarily upload the same gallery to see if things are different on another server? This might help in troubleshooting the problem.

  • Registered: 2012-05-02
  • Posts: 161

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

Nope, sorry, that's the only hosting service I pay for. And I'm at their cheapest rate, i.e., a shared PC. I'll look around my control panel there, and see whether there's an option for restarting my (logical) server, or something like that.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

I think I've found the root of the problem.
Juicebox will scale up the thumbnails on a thumbnail page on a mobile device if the following conditions are met.
(1) The gallery has dimensions of 100% x 100%.
(2) There is no existing viewport tag on the web page.
(3) The gallery is the only content on the page.

However, your web page created with jAlbum has the following line of code <div id="jalbumwidgetcontainer"></div> meaning that the gallery is not the only content on the page and so the thumbnails are not scaled up.
Your other gallery which functions correctly does not have this jAlbum widget container in it.

If you remove the jAlbum widget code from your web page, your gallery should hopefully display as expected.
If you don't use jAlbum widgets, try editing the skin's 'skin.properties' file and change the value for autoWidgetInjection (on line 2) from true to false . Then reload the skin and remake your album.

  • Registered: 2012-05-02
  • Posts: 161

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

Yep, that did it. I fired up jAlbum for that gallery, and went to Settings --> Advanced --> Metadata --> Include jAlbum widget support, and unchecked that. (I have a blank Juicebox jAlbum gallery, with my preferred settings, that I use to make all the other galleries. At one time -- by default, I gather, from what you just wrote -- that option was checked, and I generated some galleries before I got around to unchecking it in my template gallery.)

Anyway, (re-)generated the gallery in question, and uploaded it. I cleared the cache on my iPhone and loaded the gallery -- actually, I cleared the cache and reloaded it several times -- and no more problem.

Nice work. And thanks again for your time and help.

Bill P.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: iPhone: 140 Thumbnails Before Refresh, 15 After [SOLVED]

You're welcome.
I'm just glad that we were able to get to the bottom of the mystery!