Gallery App: Mobile Optimisation

[GregChapman]

Hi Hugo,

1.
I plan to update my SeaHawk web site soon to make it "Mobile Friendly". It includes a Gallery app and while, at the moment, it shows all images on my phone I have to zoom a huge amount to see and operate it.)

I realised today, because of a Free Support Topic, that once I make my site mobile friendly the Gallery is likely to become unusable. A post in the topic includes a link to a site that shows how the gallery thumbnails don't re-flow gracefully on a narrow screen. Indeed they just truncate the page, leaving only the first one or two images on a row.

Is it possible to provide a mobile friendly Gallery App?

2.
On the home page of the SeaHawk forum, a Mixed app, I find that unregistered users see only the missing image icon on the strip of thumbnail links pointing to the Gallery sub-forum pages. The images do appear once logged in. I can find no permission that would affect this behaviour. It may be a long-standing bug that I've only just discovered.

3.
Some time ago Pedro provided me with code that introduced "Prev Topic" and "Next Topic" text links on the pages reached from a Gallery App, so one didn't have to return to the thumbnail screen to move to the next image. Today, looking again at that code I found the way to add graphic arrowheads (I should have been able to work it out a couple of years back!) I mention this because I believe this feature should be added to the standard Nabble product as I feel a gallery app without such links is unacceptable so I have only added my gallery to the public part of my forum today now that I have those links in place.

[GregChapman]

Re: 3.
I have just realised the Prev-Next links need a little more work to make them perfect:

On a first image page "Prev" still appears, but drops the link.
On a last image page the "Next" text disappears altogether rather than just loosing the link.

[Hugo <Nabble>]

I am working on these issues and I will have a solution for them soon. Thanks for reporting these issues.

[Hugo <Nabble>]

Greg, about your issues:

1) I've released new changes to the responsive module. The gallery app should work much better now, please check.

2) I can't reproduce this. I visited your forum as an anonymous user and the strip of thumbnails was working correctly.

3) I added a new add-on. You can click on "Options > Application > Extras and add-ons" and select the "Navigation" module.

Changes #1 and #3 above are only available to the n3 server at this point, which is the server of the SeaHawk forum. If you approve these changes I will release those changes to all Nabble server. Please let me know what you think. Thanks!

[GregChapman]

Hi Hugo,

Hugo <Nabble> wrote

1) I've released new changes to the responsive module. The gallery app should work much better now, please check.

I regret there are various issues as things stand at the moment. These go beyond the gallery app itself, but I recognise that sorting these may not have been your focus at this stage.

At: http://seahawk-forum.968426.n3.nabble.com/
The Gallery app is a sub-forum of a Mixed app. On a narrow screen you can no longer reach the "right-arrow" link to scroll through the images in the gallery.
At: http://seahawk-forum.968426.n3.nabble.com/Gallery-f1624462.html
The thumbnails were arranged in a widely spaced two per row pattern. Thinking this might be because of my edit to produce the gallery in five columns I have removed that override and now get a two followed by one pattern of thumbnails.
On a typical image page within that gallery (where all images were uploaded at 750px wide) e.g.:
http://seahawk-forum.968426.n3.nabble.com/Just-17-The-Cabin-td3434166.html
the image is truncated on narrow screens as its width exceeds that of the screen and there is no scrollbar in order to pan across the image.

As there is a "Redirect to:" in place on the forum I thought some of these effects might have been caused by the fact it always appears embedded in an app that is not mobile-friendly. I have now also embedded the SeaHawk forum in an app that is classified as mobile-friendly by Google:
http://www.muddybroadbluesband.co.uk/seahawkforum.html
but this displays all the problems mentioned above.

2) I can't reproduce this. I visited your forum as an anonymous user and the strip of thumbnails was working correctly.

That issue seems to have disappeared. It's also working here now.

3) I added a new add-on. You can click on "Options > Application > Extras and add-ons" and select the "Navigation" module.

This appears to work but I have found a number of situations where it doesn't behave as I would expect or, in some cases, hope.

It is possible pinned topics catch it out:
From the page:
http://seahawk-forum.968426.n3.nabble.com/template/NamlServlet.jtp?macro=change_appearance
click on the second pinned items in the "Announcements and FAQs section:
http://seahawk-forum.968426.n3.nabble.com/What-s-New-on-the-Site-tp3118409.html
It only shows a "Next topic " link, when I would expect a "Previous topic" too.

Showing the links at the bottom of the page seems to be the wrong place to me.
This assumes that one is going to read or scroll through up to 20 posts to reach the links. Surely, the norm is to decide to skip to a next topic on the basis of the subject line or first post alone, so links at the top of the page make more sense to me. If you assume that people are going to read an entire page before they need the next link then you must assume they will read the entire topic and on multi-page topics and the Next link should only appear on the final page. As for the "Previous" link, having that appear part way through a  topic seems illogical. The most obvious place is the top of the first page of a topic, which is another reason for thinking that's the right place for the "Next" link too. Generally, you want links to appear where they'll be the minimum amount of scrolling involved. Perhaps there should be two options, one that displays the links at the top of the topic page and another to display the links at the bottom?

Needs to be applied on a per-subforum basis:
I originally requested the feature with only a gallery in mind, where one almost always wants to skip from one image to the next. I accept that the feature may also benefit new or rare visitors to a forum where skipping through topics to see it it offers the kind of content that will be of interest, or to scan recent active topics, could be useful. However, the kind of forum I am most involved with is of the "Problem/Solution Offered" kind, where 90% of posts will not be of interest to a typical visitor because they do not address the one problem the visitor has. Therefore, I feel it is important that the feature should be able to be applied to individual sub-forums and appear on the "Options > Application" menu of each sub-forum, (perhaps with the setting inherited in sub-forums) rather than as an Add-on and applied forum-wide.

Cosmetics:
I'd prefer to see the Previous/Next links appear beside each other or to the left and right edges of a page. In the current version the move around slightly depending on the width of the window and there's a large amount of space around them. (In short, for my own application, Pedro's solution worked very well, except for the minor issues when one reached the first/last topics in the forum.)

-----------------
Note to self - in case I want to replace my Gallery over-ride:

 <override_macro name="gallery_table_row" requires="app_namespace">
    <tr>
        <td style="width:20%">
            <n.current_node.gallery_cell/>
        </td>
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>
        <td style="width:20%">
            <n.if.next_node>
                <then.current_node.gallery_cell/>
            </n.if.next_node>
        </td>
    </tr>
</override_macro>

[GregChapman]

Hi Hugo,

Comments in my previous post were based only on looking on my desktop and squeezing the window size. I have now also looked at them on my phone. I now see the results are mixed, and can be slightly different again depending on whether the forum is embedded in a mobile friendly site or not. If you'd like images let me know to show differences let me know.

[Hugo <Nabble>]

Greg, I've just fixed some issues and released them to the n3 server so you can test this again. I've tested your forum with my phone using the mobile-friendly URL you provided and it works nicely -- see Screenshot Here.

It is not perfect, but it is truly usable. I've also moved the "Next Thread" / "Previous Thread" links to the top as you suggested and fixed the image size problem, so now you can see how things look. If you think this is okay I will release this to all servers. Thanks again.

[GregChapman]

Hi Hugo,

On my desktop I still see the what I now recognise is a "hard return" issue when I shrink the window width a little on the thumbnail page, but few real-world visitors will ever encounter the problem.

This release also makes presentation consistent when embedded on both my mobile-friendly and desktop-only sites and I confirm that I feel that this version is fully acceptable for general release.

I still wish it could be applied on a per-forum basis, rather than globally.

The one cosmetic change I would suggest is to replace the term "Thread" with "Topic" on the Previous/Next links, for the sake of consistency across the forum interface. (I always think of "thread" as a mail terminology and you use "topic" elsewhere on the forum.)

I have now also re-installed my "five column" mod to the gallery and that still works as expected - other than a slight overflow problem caused by the CSS on my SeaHawk site and not the mods to the forum.

[Hugo <Nabble>]

GregChapman wrote

On my desktop I still see the what I now recognise is a "hard return" issue when I shrink the window width a little on the thumbnail page, but few real-world visitors will ever encounter the problem.

Yes, that's going to be extremely rare so I think we shouldn't worry about this.

GregChapman wrote

This release also makes presentation consistent when embedded on both my mobile-friendly and desktop-only sites and I confirm that I feel that this version is fully acceptable for general release.

Okay, I've released the new changes to all servers.

GregChapman wrote

I still wish it could be applied on a per-forum basis, rather than globally.

You can do this with a NAML tweak like this:

<override_macro name="show_topic_navigation_links">
    <n.node_page.>
        <n.if.regex_matches text="[n.page_node.get_app_node.id/]" pattern="30342|30337">
            <then.overridden/>
        </n.if.regex_matches>
    </n.node_page.>
</override_macro>

The "pattern" value in the third line is a pipe-separated list of app IDs where the links should be available.

GregChapman wrote

The one cosmetic change I would suggest is to replace the term "Thread" with "Topic" on the Previous/Next links, for the sake of consistency across the forum interface. (I always think of "thread" as a mail terminology and you use "topic" elsewhere on the forum.)

I agree, I've made this change.

GregChapman wrote

I have now also re-installed my "five column" mod to the gallery and that still works as expected - other than a slight overflow problem caused by the CSS on my SeaHawk site and not the mods to the forum.

That's good.

Thanks a lot for all the feedback.

[GregChapman]

Hi Hugo,

Thanks for all this work. The one point I failed to mention yesterday was the "Pinned Topic" issue. I now realise that the Previous/Next links work in what might be called "Topics View" order and will ignore pinning, a feature of "Classic View" only.

However, it does make the links unusable in the case of the SeaHawk's "Introduce Yourself" area where I pin topics alphabetically and just a little confusing in the few other sub-forums where I have pinned topics.

In consequence, I have now applied the suggested over-ride so the Previous/Next links work only on my gallery app. In a gallery I'd prefer the links to say "Image" rather than "Topic", but once the over-ride is in place I can't get at the original macro to change that word. How should I achieve that?

[Hugo <Nabble>]

The pinned topic issue is more complex. The next/previous topic code considers the date of each topic, so you may try manually setting the date of each pinned topic in a way that makes the links work. I haven't tried that, so I can't confirm this works.

GregChapman wrote

In consequence, I have now applied the suggested over-ride so the Previous/Next links work only on my gallery app. In a gallery I'd prefer the links to say "Image" rather than "Topic", but once the over-ride is in place I can't get at the original macro to change that word. How should I achieve that?

You can do this by overridding the translations like this:

<translation>
    <from>Next Topic</from>
    <to>
        <n.if.equal value1="[n.page_node.get_app_node.type/]" value2='gallery'>
            <then>Next Image</then>
            <else>Next Topic</else>
        </n.if.equal>
    </to>
</translation>

<translation>
    <from>Previous Topic</from>
    <to>
        <n.if.equal value1="[n.page_node.get_app_node.type/]" value2='gallery'>
            <then>Previous Image</then>
            <else>Previous Topic</else>
        </n.if.equal>
    </to>
</translation>

[GregChapman]

Hugo <Nabble> wrote

The pinned topic issue is more complex.

I did appreciate this. I noted it mainly to alert others who might be reading this thread.

GregChapman wrote

on my gallery app. In a gallery I'd prefer the links to say "Image" rather than "Topic", but once the over-ride is in place I can't get at the original macro to change that word. How should I achieve that?

You can do this by overridding the translations like this:

Now why didn't I think to ask for that solution! It never occurred to me that it should be easy enough to distinguish the app type and provide the appropriate prompt.

Thanks, Hugo.  That code probably should be in the standard product.

[GregChapman]

Hi Hugo,

Just realised, I don't know how to insert the translation code. Do I open the Advanced NAML editor and create a new file called "translation" and insert the code there?

[Hugo <Nabble>]

GregChapman wrote

Do I open the Advanced NAML editor and create a new file called "translation" and insert the code there?

Yes, this is how I would do it.