Add download links to thumbnails in photo viewer

frontend/css/app.css

@@ -1,7 +1,6 @@
 @import url("../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
 @import url("../node_modules/vuetify/dist/vuetify.min.css");
 @import url("../node_modules/leaflet/dist/leaflet.css");
-
 @import url("photo.css");
 
 #app div.loading {
@@ -17,7 +16,7 @@
     width: 100%;
     height: 100%;
     z-index: 100;
-    background-color: rgba(0,0,0,0.2);
+    background-color: rgba(0, 0, 0, 0.2);
 }
 
 body {
@@ -65,10 +64,10 @@ main {
 }
 
 div.leaflet-container .leaflet-marker-photo {
-    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12) !important;
-    background-color: rgba(0,0,0,0.3);
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
+    background-color: rgba(0, 0, 0, 0.3);
     border-color: #fff;
-    color: rgba(0,0,0,0.87);
+    color: rgba(0, 0, 0, 0.87);
     display: block;
     border-radius: 50%;
 }

frontend/src/common/gallery.js

@@ -15,6 +15,8 @@ class Gallery {
         const result = {
             title: photo.PhotoTitle,
             download_url: photo.getDownloadUrl(),
+            original_w: photo.FileWidth,
+            original_h: photo.FileHeight,
         };
 
         const thumbs = window.appConfig.thumbnails;
@@ -58,7 +60,11 @@ class Gallery {
 
 
         const shareButtons = [
-            {id: "download", label: "Download image", url: "{{raw_image_url}}", download: true},
+            {id: "fit_720", template: "Tiny (size)", label: "Tiny", url: "{{raw_image_url}}", download: true},
+            {id: "fit_1280", template: "Small (size)", label: "Small", url: "{{raw_image_url}}", download: true},
+            {id: "fit_2048", template: "Medium (size)", label: "Medium", url: "{{raw_image_url}}", download: true},
+            {id: "fit_2560", template: "Large (size)", label: "Large", url: "{{raw_image_url}}", download: true},
+            {id: "original", template: "Original (size)", label: "Original", url: "{{raw_image_url}}", download: true},
         ];
 
         const options = {
@@ -76,7 +82,17 @@ class Gallery {
             counterEl: false,
             arrowEl: true,
             preloaderEl: true,
-            getImageURLForShare: function() { return gallery.currItem.download_url;},
+            getImageURLForShare: function (button) {
+                const photo = gallery.currItem;
+
+                if(button.id === "original") {
+                    button.label = button.template.replace("size", photo.original_w + " × " + photo.original_h);
+                    return photo.download_url;
+                } else {
+                    button.label = button.template.replace("size", photo[button.id].w + " × " + photo[button.id].h);
+                    return photo[button.id].src + "?download=1";
+                }
+            },
         };
 
         let photosWithSizes = this.photosWithSizes();

internal/api/download.go

@@ -39,7 +39,7 @@ func GetDownload(router *gin.RouterGroup, conf *config.Config) {
 			return
 		}
 
-		downloadFileName := file.DownloadFileName(conf.Db())
+		downloadFileName := file.DownloadFileName()
 
 		c.Header("Content-Disposition", fmt.Sprintf("attachment; filename=%s", downloadFileName))
 

internal/api/thumbnails.go

@@ -50,6 +50,12 @@ func GetThumbnail(router *gin.RouterGroup, conf *config.Config) {
 		}
 
 		if thumbnail, err := photoprism.ThumbnailFromFile(fileName, file.FileHash, conf.ThumbnailsPath(), thumbType.Width, thumbType.Height, thumbType.Options...); err == nil {
+			if c.Query("download") != "" {
+				downloadFileName := file.DownloadFileName()
+
+				c.Header("Content-Disposition", fmt.Sprintf("attachment; filename=%s", downloadFileName))
+			}
+
 			c.File(thumbnail)
 		} else {
 			log.Errorf("could not create thumbnail: %s", err)

internal/models/file.go

@@ -2,6 +2,7 @@ package models
 
 import (
 	"fmt"
+	"strings"
 
 	"github.com/gosimple/slug"
 	"github.com/jinzhu/gorm"
@@ -32,14 +33,22 @@ type File struct {
 	FileNotes        string `gorm:"type:text"`
 }
 
-func (f *File) DownloadFileName(db *gorm.DB) string {
-	var photo Photo
+func (f *File) DownloadFileName() string {
+	if f.Photo == nil {
+		return fmt.Sprintf("%s.%s", f.FileHash, f.FileType)
+	}
 
-	db.Model(f).Related(&photo)
+	var name string
 
-	name := slug.MakeLang(photo.PhotoTitle, "en")
+	if f.Photo.PhotoTitle != "" {
+		name = strings.Title(slug.Make(f.Photo.PhotoTitle))
+	} else {
+		name = string(f.PhotoID)
+	}
 
-	result := fmt.Sprintf("%s.%s", name, f.FileType)
+	taken := f.Photo.TakenAt.Format("20060102-150405")
+
+	result := fmt.Sprintf("%s-%s.%s", taken, name, f.FileType)
 
 	return result
 }

internal/models/file_test.go

@@ -0,0 +1,17 @@
+package models
+
+import (
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestFile_DownloadFileName(t *testing.T) {
+	photo := &Photo{TakenAt: time.Date(2019, 01, 15, 0, 0, 0, 0, time.UTC), PhotoTitle: "Berlin / Morning Mood"}
+	file := &File{Photo: photo, FileType: "jpg"}
+
+	filename := file.DownloadFileName()
+
+	assert.Equal(t, "20190115-000000-Berlin-Morning-Mood.jpg", filename)
+}

internal/models/models_test.go

@@ -0,0 +1,14 @@
+package models
+
+import (
+	"os"
+	"testing"
+
+	log "github.com/sirupsen/logrus"
+)
+
+func TestMain(m *testing.M) {
+	log.SetLevel(log.DebugLevel)
+	code := m.Run()
+	os.Exit(code)
+}