Add descriptions

public/generated_albums_config.json

@@ -1 +1 @@
-[{"name":"Album 1 name","description":"Album 2 description","protected":false,"coverFileName":"IMG_20200811_060850.jpg","folderName":"album_1","files":["IMG_20200811_060850.jpg","IMG_20200811_074445.jpg","IMG_20200811_080037.jpg","IMG_20200811_081746.jpg","IMG_20200811_084017.jpg"],"files_360":["photo.jpg"]}]
+[{"name":"Album 1 name","description":"Album 2 description","protected":false,"coverFileName":"IMG_20200811_060850.jpg","photoDescription":{"IMG_20200811_060850.jpg":"Description 1","IMG_20200811_074445.jpg":"Description 2"},"folderName":"album_1","files":["IMG_20200811_060850.jpg","IMG_20200811_074445.jpg","IMG_20200811_080037.jpg","IMG_20200811_081746.jpg","IMG_20200811_084017.jpg"],"files_360":["photo.jpg"]}]

public/pictures/albums/album_1/album.yml

@@ -3,3 +3,7 @@ description: Album 2 description
 protected: false
 
 coverFileName: 'IMG_20200811_060850.jpg'
+
+photoDescription:
+  IMG_20200811_060850.jpg: 'Description 1'
+  IMG_20200811_074445.jpg: 'Description 2'

scripts/collect-static-data.ts

@@ -59,7 +59,17 @@ function processAlbum(folderName: string) {
         } else {
           console.error(red(`Error: File ${albumPath}/album.yml does not contains "${item}" key!`));
         }
-      })
+      });
+
+      if (parsedData['photoDescription']) {
+        Object.keys(parsedData['photoDescription']).forEach(item => {
+          if (!photos.includes(item)) {
+            console.warn(yellow(`Warning: Description for ${albumPath}/photos/${item} , but it doesn't exist!`));
+          }
+        });
+
+        config['photoDescription'] = parsedData['photoDescription'];
+      }
     }
   } else {
     console.error(red(`Error: File ${albumPath}/album.yml does not exists!`));

src/store/albums/state.ts

@@ -5,7 +5,11 @@ export interface IAlbum {
   protected: boolean;
 
   folderName: string;
+
   files: string[];
+  files_360: string[];
+
+  photoDescription: {[key: string]: string};
 }
 
 export default class AlbumsState {

src/views/Album.vue

@@ -81,7 +81,13 @@ export default class AlbumPage extends Vue {
 
   get images() {
     return this.album!.files
-      .map(item => `/pictures/albums/${this.album!.folderName}/photos/${item}`);
+      .map((item, index) => {
+        return {
+          id: `${this.album!.folderName}/${item}`,
+          href: `/pictures/albums/${this.album!.folderName}/photos/${item}`,
+          description: this.album!.photoDescription[item] || ' ',
+        };
+      });
   }
 
   updateFiles() {
@@ -145,4 +151,10 @@ export default class AlbumPage extends Vue {
   background: none;
   color: white!important;
 }
+
+.blueimp-gallery-controls > .description {
+  margin-top: calc(100vh - 5em);
+  width: 100vw;
+  text-align: center;
+}
 </style>