UX: Enhance workflow with keyboard shortcuts #845

Author

Owner

@bernsel commented on GitHub (Apr 7, 2021):

We would be happy to help fund this as well. What would it take to get it added to the roadmap? Or could we hire a developer, and pay them for their time to create this module for the project? With your input and guidance of course, so that whatever is developed fits the overall vision of the project.

@bernsel commented on GitHub (Apr 7, 2021): We would be happy to help fund this as well. What would it take to get it added to the roadmap? Or could we hire a developer, and pay them for their time to create this module for the project? With your input and guidance of course, so that whatever is developed fits the overall vision of the project.

deekerman commented

See https://github.com/photoprism/photoprism/pull/743

Author

Owner

@lastzero commented on GitHub (Apr 13, 2021):

@lastzero commented on GitHub (Apr 13, 2021): See https://github.com/photoprism/photoprism/pull/743

deekerman commented

Author

Owner

@abhchand commented on GitHub (Dec 21, 2021):

To add another suggestion, it would be great to navigate through photos with j and k in addition to arrow keys. While the origins are related to vim, these shortcuts have found their way in to a ton of applications.

I'm considering opening a PR for this if that's ok. Just wanted to throw it out as an idea for feedback as well.

Thanks!

@abhchand commented on GitHub (Dec 21, 2021): To add another suggestion, it would be great to navigate through photos with `j` and `k` in addition to arrow keys. While the origins are related to `vim`, these shortcuts have found their way in to a ton of applications. I'm considering opening a PR for this if that's ok. Just wanted to throw it out as an idea for feedback as well. Thanks!

deekerman commented

Author

Owner

@CWempe commented on GitHub (Feb 22, 2022):

I would like to use ESC to ~~close the photoviewer or~~ go back to the previous page.

I am using this often in other apps.

@CWempe commented on GitHub (Feb 22, 2022): I would like to use `ESC` to ~close the photoviewer or~ go back to the previous page. I am using this often in other apps.

deekerman commented

2026-02-20 00:00:03 -05:00

Author

Owner

@FollowTheWizard commented on GitHub (Jun 15, 2023):

Have you considered using the access key option from the browser to provide a quick implementation?

Link to doucmentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/button?retiredLocale=de

In my opinion those options would already be great to have
select
like
archive
download

@FollowTheWizard commented on GitHub (Jun 15, 2023): Have you considered using the access key option from the browser to provide a quick implementation? Link to doucmentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/button?retiredLocale=de In my opinion those options would already be great to have **s**elect **l**ike **a**rchive **d**ownload

deekerman commented

Author

Owner

@artincube commented on GitHub (Jul 7, 2023):

I'd love to see some. Next/Prev image in Faces and any other situation where possible.
Then
select
edit
like
archive

@artincube commented on GitHub (Jul 7, 2023): I'd love to see some. Next/Prev image in Faces and any other situation where possible. Then select edit like archive

deekerman commented

Author

Owner

@anst84 commented on GitHub (Sep 15, 2023):

My experience from using other photo management apps is that the delete button is convenient for removing something. If a dialogue is prompted then hitting enter would be interpreted as a Yes/Proceed archiving/deleting.

Requirements:

In the photo view/preview mode, hitting delete on the keyboard should archive selected photos.
In the archive view, hitting delete on the keyboard should delete selected photos.
In all views, when prompted with a popup dialogue with Yes/Proceed/Ok option, hitting enter on the keyboard should be interpreted as that (positive answer).
In all views, when prompted with a popup dialogue with No/Cancel/Abort option, hitting escape on the keyboard should be interpreted as that (negative answer).

@anst84 commented on GitHub (Sep 15, 2023): My experience from using other photo management apps is that the delete button is convenient for removing something. If a dialogue is prompted then hitting enter would be interpreted as a Yes/Proceed archiving/deleting. Requirements: 1. In the photo view/preview mode, hitting `delete` on the keyboard should archive selected photos. 2. In the archive view, hitting `delete` on the keyboard should delete selected photos. 3. In all views, when prompted with a popup dialogue with Yes/Proceed/Ok option, hitting `enter` on the keyboard should be interpreted as that (positive answer). 4. In all views, when prompted with a popup dialogue with No/Cancel/Abort option, hitting `escape` on the keyboard should be interpreted as that (negative answer).

deekerman commented

Author

Owner

@monester commented on GitHub (Oct 5, 2023):

It would really help when organizing libraries and import a lot of photos into a library or doing cleanup.

@monester commented on GitHub (Oct 5, 2023): It would really help when organizing libraries and import a lot of photos into a library or doing cleanup.

deekerman commented

Author

Owner

@HansAndreManfredson commented on GitHub (Oct 27, 2023):

^^ up!!!
I am always using keyboard shortcuts in Google Photos! This feature is a most need :-)

@HansAndreManfredson commented on GitHub (Oct 27, 2023): ^^ up!!! I am always using keyboard shortcuts in Google Photos! This feature is a most need :-)

deekerman commented

Author

Owner

@maximkuzmin commented on GitHub (May 7, 2024):

I wonder, is there any progress on that? It's impossible to do anywhat serious archive interactions without that

@maximkuzmin commented on GitHub (May 7, 2024): I wonder, is there any progress on that? It's impossible to do anywhat serious archive interactions without that

deekerman commented

Author

Owner

@annappropriate commented on GitHub (May 20, 2024):

I really wish there were keyboard shortcuts, but for now I had to improvise. Organizing a large import is a PAIN without the keyboard.

Here's what you can do if you're using a Chome-based browser:
Install ShortKeys https://chromewebstore.google.com/detail/shortkeys-custom-keyboard/logpjaacgmcbpdkdchjiaagddngobkck

My workflow:

select pics
press c to open the clipboard
press e to archiv[e] or a to add to [a]lbum

Here's a sample config for some inspiration, you can import it in the extension settings:

[
  {
    "blacklist": "whitelist",
    "sites": "https://YOUR_DOMAIN/*",
    "key": "a",
    "label": "PhotoPrism: Add to album",
    "action": "javascript",
    "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Add to album\"]').click()",
    "sitesArray": [
      "https://YOUR_DOMAIN/*"
    ],
    "activeInInputs": false
  },
  {
    "key": "e",
    "label": "PhotoPrism: Archive",
    "blacklist": "whitelist",
    "sites": "https://YOUR_DOMAIN/*",
    "action": "javascript",
    "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Archive\"]').click()",
    "sitesArray": [
      "https://YOUR_DOMAIN/*"
    ],
    "activeInInputs": false
  },
  {
    "key": "c",
    "label": "PhotoPrism: Open clipboard",
    "action": "javascript",
    "code": "document.getElementById(\"t-clipboard\").querySelector(\"button\").click()\n",
    "blacklist": "whitelist",
    "sites": "https://YOUR_DOMAIN/*",
    "sitesArray": [
      "https://YOUR_DOMAIN/*"
    ]
  }
]

This allows to implement a limited set of shortcuts that can be useful for, in my case, quickly sorting a huge import of unorganized files. Holding my fingers crossed for the proper shortcuts!

@annappropriate commented on GitHub (May 20, 2024): I really wish there were keyboard shortcuts, but for now I had to improvise. Organizing a large import is a PAIN without the keyboard. Here's what you can do if you're using a Chome-based browser: Install ShortKeys https://chromewebstore.google.com/detail/shortkeys-custom-keyboard/logpjaacgmcbpdkdchjiaagddngobkck My workflow: 1. select pics 2. press `c` to open the clipboard 3. press `e` to archiv[e] or `a` to add to [a]lbum Here's a sample config for some inspiration, you can import it in the extension settings: ```json [ { "blacklist": "whitelist", "sites": "https://YOUR_DOMAIN/*", "key": "a", "label": "PhotoPrism: Add to album", "action": "javascript", "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Add to album\"]').click()", "sitesArray": [ "https://YOUR_DOMAIN/*" ], "activeInInputs": false }, { "key": "e", "label": "PhotoPrism: Archive", "blacklist": "whitelist", "sites": "https://YOUR_DOMAIN/*", "action": "javascript", "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Archive\"]').click()", "sitesArray": [ "https://YOUR_DOMAIN/*" ], "activeInInputs": false }, { "key": "c", "label": "PhotoPrism: Open clipboard", "action": "javascript", "code": "document.getElementById(\"t-clipboard\").querySelector(\"button\").click()\n", "blacklist": "whitelist", "sites": "https://YOUR_DOMAIN/*", "sitesArray": [ "https://YOUR_DOMAIN/*" ] } ] ``` This allows to implement a limited set of shortcuts that can be useful for, in my case, quickly sorting a huge import of unorganized files. Holding my fingers crossed for the proper shortcuts!

deekerman commented

Author

Owner

@piec commented on GitHub (Jul 16, 2024):

When labeling new faces in the /library/all?q=face%3Anew page I'm using the following snippet in the js console.
It binds PageUp / PageDown to previous/next photo, and focused the first unlabeled face.

document.addEventListener('keydown', function(event) {
 if(event.keyCode == 33) {
   document.querySelector("button.action-previous:nth-child(1)").click();
   setTimeout(() => {
     document.querySelector("div.v-select__slot:nth-child(2) > input:nth-child(1)").focus();
   }, 500);
 } else if(event.keyCode == 34) {
   document.querySelector("button.action-next:nth-child(2)").click();
   setTimeout(() => {
     document.querySelector("div.v-select__slot:nth-child(2) > input:nth-child(1)").focus();
   }, 500);
 }
})

@piec commented on GitHub (Jul 16, 2024): When labeling new faces in the [`/library/all?q=face%3Anew`](https://docs.photoprism.app/user-guide/organize/people/#why-doesnt-the-new-faces-page-show-all-faces) page I'm using the following snippet in the js console. It binds PageUp / PageDown to previous/next photo, and focused the first unlabeled face. ```js document.addEventListener('keydown', function(event) { if(event.keyCode == 33) { document.querySelector("button.action-previous:nth-child(1)").click(); setTimeout(() => { document.querySelector("div.v-select__slot:nth-child(2) > input:nth-child(1)").focus(); }, 500); } else if(event.keyCode == 34) { document.querySelector("button.action-next:nth-child(2)").click(); setTimeout(() => { document.querySelector("div.v-select__slot:nth-child(2) > input:nth-child(1)").focus(); }, 500); } }) ```

deekerman commented

Author

Owner

@anst84 commented on GitHub (Aug 28, 2024):

Thank you @annappropriate for you're extension tip and samples!

Whilst in image full screen mode I used this to mark an image selected:

  {
    "blacklist": false,
    "sites": "https://YOUR_DOMAIN/*",
    "key": "s",
    "label": "PhotoPrism: Select single image",
    "action": "javascript",
    "code": "document.getElementsByClassName('pswp__top-bar')[0].querySelector('[title=\'Select\']').click()",
    "sitesArray": [
      "https://YOUR_DOMAIN/*"
    ],
    "activeInInputs": false
  }

Browsing images with arrow left/right, marking/selecting them with above shortcut and then archiving them using @annappropriate sample worked really smooth for me for fast archiving.

@anst84 commented on GitHub (Aug 28, 2024): Thank you @annappropriate for you're extension tip and samples! Whilst in image full screen mode I used this to mark an image selected: ``` { "blacklist": false, "sites": "https://YOUR_DOMAIN/*", "key": "s", "label": "PhotoPrism: Select single image", "action": "javascript", "code": "document.getElementsByClassName('pswp__top-bar')[0].querySelector('[title=\'Select\']').click()", "sitesArray": [ "https://YOUR_DOMAIN/*" ], "activeInInputs": false } ``` Browsing images with arrow left/right, marking/selecting them with above shortcut and then archiving them using @annappropriate sample worked really smooth for me for fast archiving.

deekerman commented

Author

Owner

@brownphotographic commented on GitHub (Sep 3, 2024):

Hi, any update on this? Is this on a roadmap?

@brownphotographic commented on GitHub (Sep 3, 2024): Hi, any update on this? Is this on a roadmap?

deekerman commented

Author

Owner

@gsemet commented on GitHub (Dec 28, 2024):

hello. is it possible to define some simple hotkey, like "p" to add the current photo in the selection, e to edit metadata, and so one.

@gsemet commented on GitHub (Dec 28, 2024): hello. is it possible to define some simple hotkey, like "p" to add the current photo in the selection, e to edit metadata, and so one.

deekerman commented

Author

Owner

@Tirpitz93 commented on GitHub (Jan 7, 2025):

I really wish there were keyboard shortcuts, but for now I had to improvise. Organizing a large import is a PAIN without the keyboard.

Here's what you can do if you're using a Chome-based browser: Install ShortKeys https://chromewebstore.google.com/detail/shortkeys-custom-keyboard/logpjaacgmcbpdkdchjiaagddngobkck

My workflow:

1. select pics

2. press `c` to open the clipboard

3. press `e` to archiv[e] or `a` to add to [a]lbum

Here's a sample config for some inspiration, you can import it in the extension settings:

[
  {
    "blacklist": "whitelist",
    "sites": "https://YOUR_DOMAIN/*",
    "key": "a",
    "label": "PhotoPrism: Add to album",
    "action": "javascript",
    "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Add to album\"]').click()",
    "sitesArray": [
      "https://YOUR_DOMAIN/*"
    ],
    "activeInInputs": false
  },
  {
    "key": "e",
    "label": "PhotoPrism: Archive",
    "blacklist": "whitelist",
    "sites": "https://YOUR_DOMAIN/*",
    "action": "javascript",
    "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Archive\"]').click()",
    "sitesArray": [
      "https://YOUR_DOMAIN/*"
    ],
    "activeInInputs": false
  },
  {
    "key": "c",
    "label": "PhotoPrism: Open clipboard",
    "action": "javascript",
    "code": "document.getElementById(\"t-clipboard\").querySelector(\"button\").click()\n",
    "blacklist": "whitelist",
    "sites": "https://YOUR_DOMAIN/*",
    "sitesArray": [
      "https://YOUR_DOMAIN/*"
    ]
  }
]

This allows to implement a limited set of shortcuts that can be useful for, in my case, quickly sorting a huge import of unorganized files. Holding my fingers crossed for the proper shortcuts!

This also works in Firefox with:
https://addons.mozilla.org/en-GB/firefox/addon/shortkeys/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

My rules:

[
  {
    "blacklist": "whitelist",
    "sites": "https://prism.example.co.uk/*",
    "key": "a",
    "label": "PhotoPrism: Add to album",
    "action": "javascript",
    "code": "document.querySelector(\".action-album\").click()\n",
    "sitesArray": [
      "https://prism.example.co.uk/*"
    ],
    "activeInInputs": false
  },
  {
    "key": "e",
    "label": "PhotoPrism: Archive",
    "blacklist": "whitelist",
    "sites": "https://prism.example.co.uk/*",
    "action": "javascript",
    "code": "document.querySelector(\".action-archive\").click()\n",
    "sitesArray": [
      "https://prism.example.co.uk/*"
    ],
    "activeInInputs": false
  },
  {
    "key": "c",
    "label": "PhotoPrism: Open clipboard",
    "action": "javascript",
    "code": "document.querySelector(\".v-speed-dial\").click()\n",
    "blacklist": "whitelist",
    "sites": "https://prism.example.co.uk/*",
    "sitesArray": [
      "https://prism.example.co.uk/*"
    ]
  }
]

@Tirpitz93 commented on GitHub (Jan 7, 2025): > I really wish there were keyboard shortcuts, but for now I had to improvise. Organizing a large import is a PAIN without the keyboard. > > Here's what you can do if you're using a Chome-based browser: Install ShortKeys https://chromewebstore.google.com/detail/shortkeys-custom-keyboard/logpjaacgmcbpdkdchjiaagddngobkck > > My workflow: > > 1. select pics > > 2. press `c` to open the clipboard > > 3. press `e` to archiv[e] or `a` to add to [a]lbum > > > Here's a sample config for some inspiration, you can import it in the extension settings: > > ```json > [ > { > "blacklist": "whitelist", > "sites": "https://YOUR_DOMAIN/*", > "key": "a", > "label": "PhotoPrism: Add to album", > "action": "javascript", > "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Add to album\"]').click()", > "sitesArray": [ > "https://YOUR_DOMAIN/*" > ], > "activeInInputs": false > }, > { > "key": "e", > "label": "PhotoPrism: Archive", > "blacklist": "whitelist", > "sites": "https://YOUR_DOMAIN/*", > "action": "javascript", > "code": "document.getElementsByClassName(\"v-speed-dial__list\")[0].querySelector('[title=\"Archive\"]').click()", > "sitesArray": [ > "https://YOUR_DOMAIN/*" > ], > "activeInInputs": false > }, > { > "key": "c", > "label": "PhotoPrism: Open clipboard", > "action": "javascript", > "code": "document.getElementById(\"t-clipboard\").querySelector(\"button\").click()\n", > "blacklist": "whitelist", > "sites": "https://YOUR_DOMAIN/*", > "sitesArray": [ > "https://YOUR_DOMAIN/*" > ] > } > ] > ``` > > This allows to implement a limited set of shortcuts that can be useful for, in my case, quickly sorting a huge import of unorganized files. Holding my fingers crossed for the proper shortcuts! This also works in Firefox with: https://addons.mozilla.org/en-GB/firefox/addon/shortkeys/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search My rules: ```json [ { "blacklist": "whitelist", "sites": "https://prism.example.co.uk/*", "key": "a", "label": "PhotoPrism: Add to album", "action": "javascript", "code": "document.querySelector(\".action-album\").click()\n", "sitesArray": [ "https://prism.example.co.uk/*" ], "activeInInputs": false }, { "key": "e", "label": "PhotoPrism: Archive", "blacklist": "whitelist", "sites": "https://prism.example.co.uk/*", "action": "javascript", "code": "document.querySelector(\".action-archive\").click()\n", "sitesArray": [ "https://prism.example.co.uk/*" ], "activeInInputs": false }, { "key": "c", "label": "PhotoPrism: Open clipboard", "action": "javascript", "code": "document.querySelector(\".v-speed-dial\").click()\n", "blacklist": "whitelist", "sites": "https://prism.example.co.uk/*", "sitesArray": [ "https://prism.example.co.uk/*" ] } ] ```

deekerman commented

Author

Owner

@lastzero commented on GitHub (Jan 13, 2025):

We will be happy to take another look at this once the upgraded user interface and new viewer are released:

#3168
#1307

@lastzero commented on GitHub (Jan 13, 2025): We will be happy to take another look at this once the upgraded user interface and new viewer are released: - #3168 - #1307

deekerman commented

Author

Owner

@lastzero commented on GitHub (Feb 11, 2025):

@Zaijo As a proof of concept for keyboard shortcuts, the commit above adds support for Ctrl-F and Ctrl-R to search and reload in the search results views, e.g. /library/browse.

To test this, you can use our public demo and/or the development preview build (both will be updated later today):

@lastzero commented on GitHub (Feb 11, 2025): @Zaijo As a proof of concept for keyboard shortcuts, the commit above adds support for *Ctrl-F* and *Ctrl-R* to search and reload in the search results views, e.g. `/library/browse`. To test this, you can use our public demo and/or the development preview build (both will be updated later today): - https://demo.photoprism.app/ - https://docs.photoprism.app/release-notes/#development-preview - https://docs.photoprism.app/getting-started/updates/#development-preview

deekerman commented

Author

Owner

@gsemet commented on GitHub (Feb 12, 2025):

Hello,
I works (on my mac)

My humble remarks:

on Mac, the Ctrl is replaced by Cmd (so CMD+R, CMD+F,...)
would be nice to have an overlay on press on the h or Ctrl/Cmd+? with the list of keyboard shortcut avaialble + a hint somewhere in the screen that this help overlay is available

@gsemet commented on GitHub (Feb 12, 2025): Hello, I works (on my mac) My humble remarks: - on Mac, the Ctrl is replaced by Cmd (so CMD+R, CMD+F,...) - would be nice to have an overlay on press on the h or Ctrl/Cmd+? with the list of keyboard shortcut avaialble + a hint somewhere in the screen that this help overlay is available

deekerman commented

Author

Owner

@lastzero commented on GitHub (Feb 21, 2025):

@gsemet I've added some improvements, e.g. you can now use the arrow keys to navigate the map in Places.

@lastzero commented on GitHub (Feb 21, 2025): @gsemet I've added some improvements, e.g. you can now use the arrow keys to navigate the map in Places.

deekerman commented

Author

Owner

@lastzero commented on GitHub (Mar 30, 2025):

The above commit adds hints to the toolbar action menu for the shortcuts we already implemented:

In addition, there are new shortcuts and new menu actions available in the photo/video viewer, where you can now download files with Ctrl-D and archive/restore them with Ctrl-A (while we could have used "Ctrl-D" for this as well, Google Photos uses "Ctrl-A", so using the same may be less confusing for users):

When we have time, we could also add the new Ctrl-D and Ctrl-A shortcuts to the search results views...

However, I think the current shortcut support (along with support for the left and right buttons in the edit dialog for navigation) is good enough to call it an "initial" implementation that can be released/announced.

Feel free to open new issues to request additional shortcuts! 👍

@gsemet not sure how to read your remark about shortcuts on a Mac: Do you mean that we should additionally listen to the command key, since the current implementation does not work (as expected) on a Mac? Or does it work as expected, just that the shortcut hint should say "Cmd+R" instead of "Ctrl+R"? 🤔

@lastzero commented on GitHub (Mar 30, 2025): The above commit adds hints to the toolbar action menu for the shortcuts we already implemented: ![Image](https://github.com/user-attachments/assets/da8b7648-3847-488e-ad25-05a62bdee5b8) In addition, there are [**new shortcuts and new menu actions available in the photo/video viewer**](https://github.com/photoprism/photoprism/issues/4811#issuecomment-2764556252), where you can now download files with Ctrl-D and archive/restore them with Ctrl-A (while we could have used "Ctrl-D" for this as well, Google Photos uses "Ctrl-A", so using the same may be less confusing for users): ![Image](https://github.com/user-attachments/assets/d401fa3d-2876-453c-a128-f97da355b7fb) When we have time, we could also add the new Ctrl-D and Ctrl-A shortcuts to the search results views... However, I think the current shortcut support (along with [support for the left and right buttons](https://github.com/photoprism/photoprism/pull/3623) in the edit dialog for navigation) is good enough to call it an "initial" implementation that can be released/announced. **Feel free to open new issues to request additional shortcuts!** 👍 --- @gsemet not sure how to read your remark about shortcuts on a Mac: Do you mean that we should *additionally* listen to the command key, since the current implementation does not work (as expected) on a Mac? Or does it work as expected, just that the shortcut hint should say "Cmd+R" instead of "Ctrl+R"? 🤔

deekerman commented