Topic: Multi-Size Image

Hello Steven,
in the forum you write on 5.3.2018:

" Juicebox-Pro will use the most appropriate size depending on the device being used to view the gallery. "

This is a great function and therefore I have the following settings:
Resize Images: on
Change Size / Small Images : on (800 x 600px)
General / ScreenMode: Auto

config.xml shows for example for the first picture:

<image imageURL="images/IMG_9015_bearbeitet-1.jpg"
    thumbURL="thumbs/IMG_9015_bearbeitet-1.jpg"
    linkURL="images/IMG_9015_bearbeitet-1.jpg"
    linkTarget="_blank"
    sourcePath="F:\star\images\IMG_9015_bearbeitet-1.jpg"
    smallImageURL="images/small/IMG_9015_bearbeitet-1.jpg">
    <title><![CDATA[]]></title>
    <caption><![CDATA[]]></caption>
  </image>

In the chrome browser I chose for the test:
F12 / Network
Disable Cache
Device Handy (480 px)

https://www.baerbels-naturfoto.de/archiv/star/

Now I hoped that the photos (except thumbs) work in small screen mode and access the path star / images / small.
But unfortunately on the medium images.
Is there an explanation for this?

Thanks in advance.
KDF

Post's attachments

star.jpg
star.jpg 105.72 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Multi-Size Image

Just in case you've not yet seen it, the Multi-Size Image Support page can be found here.

Unfortunately, using a browser's developer tools is not always the most accurate way of replicating a particular browsing experience.
Changing the effective screen size might not be enough to emulate a mobile device and trigger a certain image size to be used.
When deciding which image size to use (or more specifically which screen mode to use, which has a bearing on the choice of image size), Juicebox also takes into account the user agent string (used to identify the browser) and the pixel density of the screen (i.e. retina or not).

As noted on the Multi-Size Image Support page, Small images are used when the gallery is displayed in Small Screen Mode on a non-retina screen but Medium images are used when the gallery is displayed in Small Screen Mode on a retina screen.

I have a set of images with 'SMALL', 'MEDIUM' and 'LARGE' text emblazoned across them which I use for testing (so that I can visually determine which image size is being used at a glance without needing to delve into the network report).

I have just checked a Small Screen Mode gallery on my non-retina laptop and small images are being used.
I have also checked an Auto Screen Mode gallery on my retina iPhone and medium images are being used.
Both these results are expected and things seem to be working OK (at least in my own tests).

I hope this helps (at least a little).

Re: Multi-Size Image

Hello Steven,

thank you very much!
I am reassured that I have no setting errors and that in practice mobile access to the smaller files should work.

Best regards
KDF

Re: Multi-Size Image

You're welcome! Your gallery certainly looks fine.

Incidentally, everything seems to be working as expected when I view your gallery in Firefox (on my laptop) and use Responsive Design Mode ('Tools -> Web Developer -> Responsive Design Mode').
At default settings (Screen Dimensions 360px by 740px, Device Pixel Ratio 1), small images are used (checked on the developer tools 'Network' tab).
If I then change the Device Pixel Ratio to 2 (to simulate a retina screen), medium images are used.
Everything seems to be working as expected.
(It's possible that your Chrome browser was simulating a device with a retina screen.)

Re: Multi-Size Image

Hello Steven,

thank you for the effort!
I was able to understand the steps and it works really well with the switch from small to medium depending on the detected screen.
Firefox is really good for that.

I'm happy to see it with my own eyes.

Many Greetings
KDF

Re: Multi-Size Image

No problem! I'm glad that everything seems to be working as expected.
Just give me a shout if you see anything odd happening and I'll look into it further.
Thanks!