Support » Plugin: WP Photo Album Plus » Mobile vs Desktop

  • Resolved serge-wp

    (@serge-wp)


    I’ve made my site on a desktop machine and my thumbnails show nicely (uh, to me) in bunches up to 15 (table I-C7) per page (masonry-v) in a fullwidth box (up to 1800 pixels wide and up to 780 pixels high on my 24″ screen. I’ve used the default values in table I-C, i.e. 100 pixels per thumb.

    A few days ago, I’ve been made aware that this shows up as tiny miniature-stamp-sized thumbs on a mobile. I tend not to use a mobile for viewing websites, hence never even thought that others might want to do so, let alone that G00gle might “punish” me with a lower rating for not being mobile-friendly. Oh, I had a quick look at one point, but felt that my site might be useable by turning the mobile 90ΒΊ and zooming in a wee bit.

    Since then I’ve been tearing my hair out on how to enlarge the tiny thumbs on the mobile, while still keeping the large thumbs on the desktop, and am slowly beginning to think that this might not after all be possible (?) My best results on the mobile were when upping the values in table I-C1 to 400 pixels, but then the thumbnails are simply huge on the desktop and require a lot of scrolling for every “page” of thumbnails.

    What I’m after is to show my thumbnails unchanged on the desktop (in a box @ 15 pics per “page” as they are now on my site), but _larger_ on a mobile, eg a long column of those 15 pics arranged in pairs such that 2 images side by side -or even just a single one- occupy the width of the mobile screen. Is that feasible at all? Or am I strictly in cloud cuckoo land, and should consider a complete re-design of my pages, such as less pics per page/midlish sizes somewhere between ideal for desktop and ideal for mobile?

    Any pointers gratefuly accepted, I’m coming to that age when hairs are not so plentiful that I can keep on pulling them out πŸ™‚

    Thanks,
    serge

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author Jacob N. Breetvelt

    (@opajaap)

    I am aware of the fact that masonry style thumbnails display is not mobile friendly at the time. I will dig into this.

    Thread Starter serge-wp

    (@serge-wp)

    Thanks for your reply, Jacob!

    Mucking around on a test copy of my site, I now see that using the “default” setting (table IV-C3) does indeed work much better on a handheld device, though I just can’t get myself to liking said default as much as masonry.

    “Default” may be well suited for standard sized pics, especially when stretches of thumbnails are all in either landscape or portrait, but my site displays photos of works of Art, and these often have odd formats (width/heigth ratio), resulting in a lot of rather unsightly whitespace among the thumbnails [on the desktop] while a single long column looks fine on a mobile. I am, however, not prepared to ditch the good looks on the desktop in favour of good looks or ease of use on a handheld, just because the big G says so – especially as my stats confirm that the overwhelming majority of my visitors use a desktop.

    So I’ll stick with masonry-v for now, but it would be lovely to have a way of also using masonry on the small handheld display … if then you can find a way of making it work. I guess this is another situation that could be of benefit to more users than just myself.

    I don’t want to forego any ideas you might have, but perhaps one way to handle it might be to assign one area [in pixels] for the mobile, and another for bigger screens in which masonry could be “let loose”? In my particular case, I’ve found that it really is only phone-sized displays that pose this problem, tablets seem to work fine.

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Let me explain how it works and what solutions i am investigating.

    Currently the lay-out is constructed (using tables) on the server (php code) based upon the ‘initial columnwidth’ (Table I-A1.1) and possibly altered by the optional shortcode attribute size=”..”.

    The server ‘knows’ if the browser is on a mobile device, but does not ‘know’ how wide the screen is; and hence not if we are on a phone or a tablet.

    When displayed on the client, the only thing i can do is make it responsive by sizing the individual pics. You can see that hapening when you change the browser window width.
    The pics can not be re-arranged here.

    Solution 1:
    A quick (and dirty) solution is: if the browser is on a mobile device, assume the width of the display area is smaller (e.g. half the pixelsize). This makes the pics twice the size, but also on a tablet where we do not need it.

    Solution 2:
    A better solution is to calculate the lay-out entirely on the client. This way it can be made fully responsive and device independant.
    This means the code for masonry has to be rewritten entirely.

    I am currently investigating an existing jQuery library to make masonry lay-out, to see if it can suit my needs and if it can be embedded into wppa; this to avoid the re-invention of an already existing wheel. If this turns out to be doable, i will do so.

    I will keep you informed about my progress.

    Thread Starter serge-wp

    (@serge-wp)

    Thanks for the explanation!

    In my humble opinion it’s worth the effort to go for solution 2, rather than the quick’n dirty solution 1 that would also disturb the tablet view, even if this takes a wee bit longer. The jQuery route, however, sounds hopeful and promising.

    I/We all -patiently!- await further news.

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Something like this?
    https://betatest.opajaap.nl/masonry-plus/

    (No links, video or popup yet, just look at the lay-out)

    Thread Starter serge-wp

    (@serge-wp)

    WOW! That looks “the bizz!” on my large screen as well as on Firefox and Chrome in “small-screen emulation mode”
    I was going to shout Hooray!, and then I looked at it using Safari on an old iPhone5 -> http://www.moes.lu/masonry-plus/IMG_2267.PNG The first few pics of the page look great on there, but somehow the latter photos seem “stacked”. Probably a misdemeanor of Safari on the old iPhone, but I had to wait until the missus came home from the doctors to check it on a newer phone; Good news! on a 2019 iPhone, all pics look great!
    You CRACKED it! :-)))

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    I noticed the stacking also on my laptop with Firefox. I expect to find a way to fix that, its only just the beginning…

    Thread Starter serge-wp

    (@serge-wp)

    Good to read you’ve seen the image, I’ve removed it now (forgot to de-EXIFfy it…). Not so good that the stacking also appears on a laptop, but knowing your tenacity and usual results, I have every confidence in a polished masonry-plus end result!
    Thanks for the interim news.

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Should be ok now, even on a limited thumbarea.
    https://betatest.opajaap.nl/masonry-plus/

    I am still figuring out if i can stretch the thing a little to fill up the entire width, and if it can be combined with lazy load.

    Thread Starter serge-wp

    (@serge-wp)

    Confirm it looks as it should even on older mobile device.
    Full width & lazy load would be neat, but that’s in the “icing on the cake” category πŸ™‚

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Here is my dev site with the (final?) result:
    https://betatest.opajaap.nl/masonry-plus/

    If you want to test it, install the current dev version as follows:

    Use this download:
    https://downloads.wordpress.org/plugin/wp-photo-album-plus.7.3.11.001.zip

    And install as explained here: https://wppa.nl/docs-by-subject/development-version/

    From the changelog:

    * New thumnail type: Masonry style plus. See Table IV-C3. Make sure your thumbnail size equals the thumnail framesize (Table I-C1 and 3).
    This type is fully mobile friendly.

    Thread Starter serge-wp

    (@serge-wp)

    Coo! Thanks very much, I’ll get to testing straight-away and report back.

    Thread Starter serge-wp

    (@serge-wp)

    Don’t know quite how to put it … maybe to say that I’m beginning to understand your question mark behind “final”.

    Took a mo to check it out, as several size changes required regenerating thumbs. (VIII-A4) In this masonry-plus mode the picture size comes out exactly as set in I-C1/3, unlike the “normal” masonry-columns setting which resizes the pics to fit tightly into the display area. That took some learning to adjust.

    Good news is that the display on the small screen (mobile) looks excellent. Sometimes I can see an attempt at the stacking we noticed earlier, but the pics always come unstuck by themselves and no longer “stack”.

    I have more mixed results however as regards the desktop and tablet sizes, with Firefox coming out slightly better than Chrome (/Brave). Almost always a first display of pics is only in a single column down the left hand side, a masonry tiling across the width of the screen usually only happens on page reload, but -as you also have it- the bottom edge is not “clean” (ie filled with pics), unlike the “regular” masonry-columns setting.

    When flicking to the next set of thumbs in an album (next page), invariably at first a column (1 picture wide, 15 long) down the left-hand-side, FF sometimes showing masonry tiling, all browsers always so upon reload. [with the exception of edge for mac, which occasionally refreshes to the mother album, go figure]

    I wonder if this “single column” behaviour might be down to lazy load?
    While I can live with the lower edge of the frame not being filled [albeit that the space-filling tiling looks much nicer + it avoids having to scroll downwards occasionally], the single column is a real killer.

    If you’d like to do some more testing/comparing, have a look at eddie.moes.lu where I’ve put a copy of charleskohl.com minus the sketches.

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Ok, working on it. To be continued…

    Plugin Author Jacob N. Breetvelt

    (@opajaap)

    Just to let you know that i am almost there. My internet connection is vary poor, so it takes a little longer. It will be: full width, ajax and lazyload safe.
    Please dont give up, then i will not give up too…

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Mobile vs Desktop’ is closed to new replies.