• Welcome to the Chevereto user community!

    Here users from all over the world gather around to learn the latest about Chevereto and contribute with ideas to improve the software.

    Please keep in mind:

    • 😌 This community is user driven. Be polite with other users.
    • 👉 Is required to purchase a Chevereto license to participate in this community (doesn't apply to Pre-sales).
    • 💸 Purchase a Pro Subscription to get access to active software support and faster ticket response times.
  • Chevereto Support CLST

    Support response

    Support checklist

Previous/Next arrows on image viewing

cwal

Chevereto Member
I find the previous and next arrows when viewing an image to be "backwards". Meaning I think the right pointing arrow should go to the next image that would appear to the right of the image being viewed if you were on gallery page.

In other words, if your gallery is sorted by newest and you click on the second newest image, right arrow should go to third newest, when right now it goes to first newest.

I have managed to change this behaviour when you click the actual arrows by modifying lines 26-39 in /app/themes/Peafowl.image.php

However now when I use my keyboard arrows it is still the default behaviour. There must be some javascript that binds the keyboard arrows to previous and next but I cant locate it.

Any help would be appreciated. Thank you.
 
Left means previous and right means next. That doesn't have anything to do in how the images looks in the listing which can be sorted in several ways by (date, views, etc) and in different orders (descending, ascending). So tthe order that you saw in a list is relative to how are you sorting that list.

The order that you see in an image is always relative to the date of the image where left arrow will link to a previous (oldest) image and the right arrow will link to a next (newest) image.

Change this arrows (image viewer url) regarding the listing has no sense at all because is not the same view. Different thing will be that the listing opens a modal box or a in site image viewer then the arrows are relative to that view and that is where your idea has sense but in the stand alone image viewer I'm sorry but it can't be applied.

Cheers.
 
I use http://imgur.com as an example. No matter how you decide to sort the "front page", by popularity or by newest. If you click the first image in the upper left corner it brings you to a dedicated page for that image (like the image.php page in chevereto). Then if you press "next" or the right arrow on the keyboard it changes pages to the image that was to the right of the first image. No matter how you chose to sort the gallery, the "next" image will be the one that was to the right of it.

So I wonder why you decided to have previous/next always be according to oldest/newest, instead of how the user decided to sort the gallery?
 
Ignoring the decision to always have prev/next go by oldest/newest, which does not bother me much, I still have another question.

I still find left arrow giving an older image and right arrow a newer image as "backwards".

I find this confusing since when you sort the gallery by newest you will see images #1, #2 and #3 in that order. Where #1 is newest image and #3 is oldest image.

When you click on image #1 you expect to have to press right arrow to see image #2 since that is how they are ordered when going newest to oldest. But instead you have to press left arrow?

I guess in the end my question is simple.

Where is the code that listens for the keydown event of left/right keyboard arrows and binds it to the newer/older images?

If I can locate it maybe I can modify it to my personal taste. After all, isn't this was chevereto is for? To give us a base of a website that we modify to how we envision our own personal site.

Thank you!
 
I use http://imgur.com as an example. No matter how you decide to sort the "front page", by popularity or by newest. If you click the first image in the upper left corner it brings you to a dedicated page for that image (like the image.php page in chevereto). Then if you press "next" or the right arrow on the keyboard it changes pages to the image that was to the right of the first image. No matter how you chose to sort the gallery, the "next" image will be the one that was to the right of it.

So I wonder why you decided to have previous/next always be according to oldest/newest, instead of how the user decided to sort the gallery?

Imgur has fixed listings, in other words their listings are stored as galleries. In Chevereto you have dynamic listings everywhere, which means that our listings are generated on the fly. You have explorer, the dashboard, the user images, an album images, etc. Is dynamic. Being dynamic means that to achieve what you want either we store every single listing request as a user ordered gallery on the fly or we generate a dynamic viewer. Generate every single listing request as a ordered gallery is totally out of the question ant it will make MySQL performance awful.

The other workaround is to add a query string for each image like /image/<id>?listing=recent&order=desc but that still doesn't work for searched list and it means to always do a listing query. So again, bad performance.

The only possible way of doing this in a reasonable way is by having a dynamic viewer which loads the image in fullscreen without leaving the page, so the arrows can easily hook the prev/next pointers relative to the list. I've already designed that feature but I will implement it later.
 
Ignoring the decision to always have prev/next go by oldest/newest, which does not bother me much, I still have another question.

I still find left arrow giving an older image and right arrow a newer image as "backwards".

I find this confusing since when you sort the gallery by newest you will see images #1, #2 and #3 in that order. Where #1 is newest image and #3 is oldest image.

When you click on image #1 you expect to have to press right arrow to see image #2 since that is how they are ordered when going newest to oldest. But instead you have to press left arrow?

I guess in the end my question is simple.

Where is the code that listens for the keydown event of left/right keyboard arrows and binds it to the newer/older images?

If I can locate it maybe I can modify it to my personal taste. After all, isn't this was chevereto is for? To give us a base of a website that we modify to how we envision our own personal site.

Thank you!

You don't need to edit the JS, just edit the HTML.

content/Peafowl/image.php

Change this:
PHP:
    <div class="image-viewer-navigation arrow-navigator">
        <?php
            if(get_image_album_slice()["prev"] !== NULL) {
        ?>
        <a class="right-0" data-action="prev" href="<?php echo get_image_album_slice()["prev"]["url_viewer"]; ?>"><span class="icon-next-alt"></span></a>
        <?php
            }
            if(get_image_album_slice()["next"] !== NULL) {
        ?>
        <a class="left-0" data-action="next" href="<?php echo get_image_album_slice()["next"]["url_viewer"]; ?>"><span class="icon-prev-alt"></span></a>
        <?php
            }
        ?>
    </div>

To this:
PHP:
    <div class="image-viewer-navigation arrow-navigator">
        <?php
            if(get_image_album_slice()["prev"] !== NULL) {
        ?>
        <a class="left-0" data-action="prev" href="<?php echo get_image_album_slice()["prev"]["url_viewer"]; ?>"><span class="icon-prev-alt"></span></a>
        <?php
            }
            if(get_image_album_slice()["next"] !== NULL) {
        ?>
        <a class="right-0" data-action="next" href="<?php echo get_image_album_slice()["next"]["url_viewer"]; ?>"><span class="icon-next-alt"></span></a>
        <?php
            }
        ?>
    </div>
 
Imgur has fixed listings, in other words their listings are stored as galleries. In Chevereto you have dynamic listings everywhere, which means that our listings are generated on the fly. You have explorer, the dashboard, the user images, an album images, etc. Is dynamic. Being dynamic means that to achieve what you want either we store every single listing request as a user ordered gallery on the fly or we generate a dynamic viewer. Generate every single listing request as a ordered gallery is totally out of the question ant it will make MySQL performance awful.

The other workaround is to add a query string for each image like /image/<id>?listing=recent&order=desc but that still doesn't work for searched list and it means to always do a listing query. So again, bad performance.

The only possible way of doing this in a reasonable way is by having a dynamic viewer which loads the image in fullscreen without leaving the page, so the arrows can easily hook the prev/next pointers relative to the list. I've already designed that feature but I will implement it later.

This is a very good reason for coding it like you did, thank you for the explanation. I noticed you had some commented out code for a popup viewer of the images, and this would help for everyday users who want to browse the pictures in the order that they sorted the gallery. Looking forward to it!
 
Back
Top