Merge pull request #29 from hgpuke/master

usage-basic-overview.md

package.json

@@ -17,8 +17,8 @@
     "url": "https://github.com/photoview/photoview.github.io/issues"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^0.12.1",
-    "@11ty/eleventy-img": "^1.0.0",
+    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-img": "^4.0.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
     "eleventy-plugin-tailwindcss": "^0.3.0",
     "eleventy-plugin-toc": "^1.1.5",

src/en/docs/usage-basic-overview.md

@@ -5,7 +5,37 @@ priority: 2
 translationKey: usage-basic-overview
 ---
 
-> TODO: Explain the basics of using Photoview:
->
-> - How the timeline works, and how to navigate to individual albums from the timeline.
-> - How the albums section works, and how nested albums works.
+{% optimizedImage '../../assets/images/screenshot-photos.png', 'Screenshot of Photoview', 'class="block w-4/5 mx-auto my-6"' %}
+
+## Timeline view ##
+After logging in to Photoview, you will see all of your photos in reverse time order with the newest ones first and the oldest ones at the bottom. The photos are grouped by the day they were taken. This is called the _timeline view_ and you can always return to this view by clicking the top-most icon on the panel at the left of the screen.
+
+At first, it seems that there are only a few rows of photos when you scroll down, but Photoview will fill the webpage with more and more photos when you continue to scroll down.
+
+You can choose if you want to see _all_ of your timeline, or if it should start from a particular point in time. You choose the time period by selecting the appropriate starting point in the drop-down box at the top left of the photos, marked "Date".
+
+In Timeline view you can do the following:
+- **Click on a photo** to display a large version of that photo. From there you can display the next photo (moving _down_ in the timeline) by clicking on the right arrow, or display the previous photo (moving _up_ in the timeline) by clicking on the left arrow. 
+There is an "X" in the top left of the photo. Clicking this takes you back to the timeline view.
+- **Click on the heart.** Placing the mouse cursor over the photo, you will see two symbols: In the bottom-left of the photo is an outline of a ♥ and in the upper-right there is an ⓘ. Clicking the ♥ outline changes it to a solid ♥ to indicate that the photo is one of your favorites. 
+On the top of the screen, there is a `checkbox` with the text _Show only favorites_ next to it, and checking it will only show the photos that you have marked with the ♥.
+- **Click on the ⓘ** to open up a panel on the right side of the screen where you can see some metadata for that photo, such as when the photo was taken, with which camera, its exposure settings, etc. It also shows the _path to the album/folder_ where the photo is stored. Clicking on the album path allows you to see all the photos from that album. Furthermore, you can also see which faces that have been identified and the location where it was taken (if known). At the bottom of the panel, you have the option to download this photo to your computer or create a link that can be shared with others. More on that in [Share Albums and Media](/{{ locale }}/docs/usage-sharing).
+
+## Left-hand navigation panel ##
+On the left-hand side of the screen, you have more options for how to view your photos. These are:
+- **Timeline** - covered above.
+- **Albums** - allows you to view all photos that reside in an album on your server. In Photoview, an album is the same as a folder on your server. This means that you can have as many levels of albums as you wish (only limited by the file system of the server) and they get their names from the names of the folders in your filesystem. When in album view, you can choose the sort order of the photos in the following way:
+  - By Date shot
+  - By Date imported
+  - By Title
+  - By Kind (photos or videos)
+
+  Any of these sort orders can be reversed by clicking the little arrow to the right of the sort-order selection box.
+
+  In album view, when you click the ⓘ on the top right of a photo, you have the option to set this photo as the _album cover photo_ of that album.
+In album view, you will also see a ⚙️ button next right to the name of the album. Clicking this allows you to create a _share_, essentially a _link_ to that album that you can share with your friends. By copying the link and including it in an e-mail or some other messaging service you can invite your friends to have a look at the photos in that album. You can also choose to download the album to the computer you are using to view the photos. You have the option to download the photos in full resolution or different scaled-down versions.
+- **Places** - If this feature was enabled at installation time, this presents you with a map where your photos were taken (provided that they have geocoding information, which they normally have if they are taken with a mobile phone). You can zoom in and out of the map by using the scroll wheel of your mouse. As you scroll in, you can see that the level of information about the location is becoming more and more precise. Clicking one of the pictures allows you to see all the photos from that location, using the left and right arrows to switch between them. For more details, see [Places](/{{ locale }}/docs/usage-places).
+- **People** - If enabled at installation time, this presents you with an array of faces that have been identified in your photos. When you start there are no names assigned to the faces, this is something that you have to do. For more details click [People](/{{ locale }}/docs/usage-people).
+- **Settings** - The last button is for changing some settings, such as adding more paths to libraries of photos that you want Photoview to present. Note that these paths have to be accessible to Photoview, and if you installed Photoview as a Docker container, the libraries would have to be visible inside the container. This is normally done through Docker Volumes. You can read more about all settings on the [Settings Page](/{{ locale }}/docs/usage-settings/usage-settings/).
+
+

src/en/docs/usage-people.md

@@ -4,7 +4,26 @@ group: Usage
 translationKey: usage-people
 ---
 
-> TODO: Explain how the face recognition feature works, as well as
->
-> - How to label a person
-> - How to Merge, Detach and Move images between face groups.
+## Face recognition - the People tab ##
+Face recognition is an optional feature of Photoview that you can choose to enable at installation time. When enabled, a tab in the left-hand panel labeled "People" is present. Clicking on it will take you to the page where you can name the faces that Photoview has recognized.
+
+### Labeling people ###
+
+{% optimizedImage '../../assets/images/screenshot-unlabelled-people.png', 'Unlabelled faces', 'class="block w-4/5 mx-auto my-6"' %}
+
+The first time you click on the People tab, you will be presented with an array of faces that Photoview has detected in your photos. As Photoview has no way of knowing who these people are, you will have to name them. Under each face is a label. Initially, it says "`123` **Unlabeled**" where `123`is a number representing how many pictures this face was found in. Clicking on the text "Unlabeled" allows you to input a name for the person that this face belongs to. It is up to you if you want to state the full name, just the first name or a nickname. We recommend that you choose something unique for this person so that you can tell it apart from a different person who may have the same name. If you are unsure of who this person is, you may want to see all of the pictures belonging to that person. To do this, simply click on the face. This will take you to a page similar to this 
+{% optimizedImage '../../assets/images/screenshot-manage-person.png', 'Manage Person', 'class="block w-4/5 mx-auto my-6"' %}
+Here you can see all the pictures of that person. At the top of that page is the text "Unlabeled person". Under that are some buttons you can click. The first button reads "Change label". Click this to name the person. The "Unlabeled person" now has a name!
+
+### Merging faces ###
+After naming some persons, you may come across a picture that is from a person that you have already named. This is because Photoview could not determine that it is the same person so you would have to tell Photoview that they are. To do this, click on the yet unnamed picture to see all the photos of this person. 
+Instead of clicking the "Change Label" button, you should click "Merge face" to tell Photoview to merge the two sets of photos belonging to this person. Photoview will then display a list of all already named persons and ask you to select one of them. Click on the appropriate name or photo and then "Merge". Should you have a lot of named persons already, you may want to search for the name before you click it. There is a search box for this at the top of the list.
+
+After you have clicked "Merge", Photoview will sort all the new photos under the label (person name) that you selected. This can take a while and be quite taxing for your server, so please be patient.
+
+### Detaching faces ###
+Sometimes Photoview will make a mistake and sort a face from a different person in the same group as the correctly sorted faces. In this case, you can click the "Detach face" button. You will then be presented with a list of all the pictures from the current group. On the right side of each photo is a checkbox and the filename of that photo. Check the checkboxes of the photos that have been incorrectly categorized and then click "Detach image faces". Doing so will put the detached photos in the group of "Unlabeled faces". Follow the instructions above "Labeling people" or "Merging faces" to put them under the correct label. 
+
+### Moving faces ###
+Moving faces is the same as first detaching them and then either labeling them (for new faces) or merging them (for already named faces). If a face has been incorrectly sorted and belongs to a person you have already named, you should click the "Move faces" button and then select the photo(s) of the person that was incorrectly sorted. After clicking "Next" you will be presented with the same list as when merging faces. Click the name of the person that you want the photos to belong to and you are done.
+

src/en/docs/usage-places.md

@@ -4,4 +4,28 @@ group: Usage
 translationKey: usage-places
 ---
 
-> TODO: Explain how the Places page works and add a screenshot.
+The **Places** tab is visible if enabled at installation time. Clicking it takes you to a map where your photos are grouped together, based on where they were taken. The map may look something like this:
+{% optimizedImage '../../assets/images/screenshot-maps2.png', 'Maps in Photoview', 'class="block w-4/5 mx-auto my-6"' %}
+
+This of course only works if your photos are geotagged, that is the camera/phone you used stored the coordinates as EXIF metadata to your photo. There is a number in a blue circle in the top right of the thumbnails of most thumbnails. This number represents the number of photos available from that location.
+
+### Viewing photos from a location ###
+
+Clicking on one of the thumbnails allows you to view all the photos from that location, using left and right arrows to navigate between the photos. Clicking the "X" in the upper left corner takes you back to the map. 
+
+### Zooming in and out ###
+
+When you view the map, you can use the scroll wheel of your mouse (or a corresponding _gesture_ on your touchpad) to zoom in and out of the map. As you zoom in, you will see that some of the photos that were represented as being taken in one location will now split up and be shown in separate, nearby locations. Here is an example of a slightly zoomed-out view: {% optimizedImage '../../assets/images/screenshot-map-oneset.png', 'Zoomed-out map', 'class="block w-2/5 mx-auto my-6"' %} 
+
+Notice the group of 50 photos available from one location on the Swedish east coast. Zooming in further, these 50 photos split up into two groups of 25 photos each like this: {% optimizedImage '../../assets/images/screenshot-map-twoset.png', 'Zoomed-in map', 'class="block w-2/5 mx-auto my-30"' %} 
+
+This means that those 50 photos were taken at two slightly different locations. This is a way to narrow down how precise you want to be when viewing your photos. Zooming out a lot will perhaps allow you to view all photos from a particular country.
+
+### Moving on the map ###
+
+To move what part of the world you see on the map, just click and hold the left mouse button and drag, or use the corresponding gesture on your touchpad.  You can combine moving with zooming in or out. Zooming out enough, the map will become a globe, spinning when you click and hold.
+
+### What if photos are misplaced on the map or missing altogether? ###
+
+Photoview places photos on the map according to the coordinates stored as metadata (EXIF) in the file of the photo. If these coordinates are wrong, the photos will end up in the wrong place on the map and there is nothing Photoview can do about it. Similarly if a photo does not have any coordinates in its metadata, it will not show up on the map at all. You will have to find another tool that can add or change the coordinates in the photo to remedy this. Google for "tool for editing GPS coordinates in EXIF data" to get suggestions for such tools. After making changes, you will need to re-scan the library. This is done on the **Settings** tab in the main menu.
+

src/en/docs/usage-sharing.md

@@ -4,4 +4,22 @@ group: Usage
 translationKey: usage-sharing
 ---
 
-> TODO: Explain how to share albums and media, how to set a password and how to delete them again
+Photoview allows you to share individual photos/videos and albums. A share is a link that allows the viewer to see only those photos and videos that the share points to. A share can be password protected and in the future it can have an expiry date (this feature is not yet implemented). 
+
+*Note that in order for a share to function outside of your local network, you will have to make Photoview available from the Internet. How to set this up is outside the scope of this manual, but generally it involves providing a domain-name through your ISP or Registrar, then setting up a reverse proxy like Nginx, Traefik or Caddy to point that domain-name to the server in your local area network that provides the Photoview service.*
+
+Provided that you have set up your Photoview app to be available from the Internet - here is how to create a share:
+### Sharing a single photo or video ###
+In **Timeline**, **Albums** or **People** view, click the ⓘ on the top right of a photo and scroll down to _Sharing options_ in the panel that appears. Unless you have previously created a share for this photo, the text _"No shares found"_ will be present. Press the **+ Add shares** link. _"No shares found"_ will now be replaced with a link symbol and the text _"Public link"_ followed by a sequence of letters and numbers (a hexadecimal hash). To the right, you have three icons: 
+1. An icon that looks like two overlapping squares - this represents the "copy" action. Click this to copy the link so that you can paste it in an email or similar.
+2. An icon that looks like a waste paper basket - this represents the "delete" action. Click this to remove the share/link.
+3. Three dots - this represents "more actions". Clicking the three dots reveals a form that allows you to set a password to protect your share, and set an expiry date for the share. Setting an expiry date is a future feature of Photoview, it is currently not working. If you wish to password-protect the share, first enable this feature by clicking the checkbox next to the password field, then enter the password, and lastly click the little arrow to the right of the password field.
+
+### Sharing an album ###
+Sharing a complete album is similar to the above procedure. First, you need to select the album view. Do this by clicking the **Albums** tab in the left-hand menu and then selecting the album you wish to share. To the right of the title of the album, there is a gear button. Click it and a side panel will appear to the right. It has the title **"Sharing options"**. Follow the same procedure as for sharing a single photo or video above to create and optionally password-protect your share.
+### Deleting a share ###
+If you wish to delete a share, just navigate to the photo/video/album in question and click the waste paper basket icon next to the share link.
+### Password protection ###
+Shares can be protected by a password. This allows for a form of protection should the link to the share be spread to people who should not have access to your photos or videos. When protected by a password, the user clicking the link to the share will be presented with this form: {% optimizedImage '../../assets/images/screenshot-protected-share.png', 'Protected Share', 'class="block w-4/5 mx-auto my-6"' %} and need to enter the password before being allowed to view the photo/album/video. Should you change your mind about a password, you can disable it by navigating to the photo/album/video in question and unchecking the checkbox next to the password field.
+
+