diff options
| -rw-r--r-- | internal/glightbox/block.go | 1 | ||||
| -rw-r--r-- | internal/glightbox/html_renderer.go | 31 | ||||
| -rw-r--r-- | internal/glightbox/parser.go | 16 | ||||
| -rw-r--r-- | static/input.css | 16 | ||||
| -rw-r--r-- | views/pages/global-map.html | 2 |
5 files changed, 57 insertions, 9 deletions
diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go index 696f328..e53e67b 100644 --- a/internal/glightbox/block.go +++ b/internal/glightbox/block.go @@ -15,6 +15,7 @@ type GLightboxBlock struct { type GLightboxImage struct { URL string + Tags []string Caption []byte } diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index 43d4790..3da98eb 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -78,11 +78,26 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, dataDescriptionAttribute = fmt.Sprintf("data-description=\".%s\"", glightboxDescId) } + tagClassList := make([]string, 0, len(img.Tags)) + for _, tag := range img.Tags { + switch tag { + case "2x": + tagClassList = append(tagClassList, "grid-item-2x") + } + } + elements = append(elements, fmt.Sprintf(` - <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item grid-item-%s" + <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s" data-gallery="gallery-%s" data-title="%s" %s> - <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-1" alt="webp thumbnail" /> - </a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt)) + <picture> + <source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" /> + <source media="(width < 1120px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" /> + <source media="(width < 1600px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" /> + <source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" /> + <source media="(width >= 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" /> + <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" /> + </picture> + </a>`, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt)) if glightboxDescId != "" { elements = append(elements, fmt.Sprintf(` @@ -114,10 +129,14 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, percentPosition: true }); - imagesLoaded('.masonry-grid-%s', function() { - msnry_%s.layout(); + var imgLoad_%s_timer; + var imgLoad_%s = imagesLoaded('.masonry-grid-%s', () => msnry_%s.layout()); + + imgLoad_%s.on('progress', function() { + clearTimeout(imgLoad_%s_timer); + imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500); }); -</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID)) +</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID)) } return ast.WalkContinue, nil diff --git a/internal/glightbox/parser.go b/internal/glightbox/parser.go index ba3f22e..6780090 100644 --- a/internal/glightbox/parser.go +++ b/internal/glightbox/parser.go @@ -4,6 +4,7 @@ import ( "bytes" "log/slog" "regexp" + "strings" "time" "github.com/yuin/goldmark/ast" @@ -60,16 +61,27 @@ func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser. gallery := node.(*GLightboxBlock) - parts := bytes.SplitN(trimmed, []byte{'|'}, 2) + parts := bytes.SplitN(trimmed, []byte{'|'}, 3) url := bytes.TrimSpace(parts[0]) caption := make([]byte, 0) - if len(parts) > 1 { + tagsRaw := "" + if len(parts) == 2 { caption = bytes.TrimSpace(parts[1]) } + if len(parts) >= 3 { + tagsRaw = string(parts[1]) + caption = bytes.TrimSpace(parts[2]) + } + + tags := strings.Split(tagsRaw, ",") + for i := range tags { + tags[i] = strings.TrimSpace(tags[i]) + } gallery.Images = append(gallery.Images, GLightboxImage{ URL: string(url), + Tags: tags, Caption: caption, }) diff --git a/static/input.css b/static/input.css index d766049..8080d13 100644 --- a/static/input.css +++ b/static/input.css @@ -331,22 +331,38 @@ a:hover { width: 50%; } +.grid-item-2x { + width: 100%; +} + @media (width >= 32rem) { .grid-item, .grid-sizer { width: 33%; } + + .grid-item-2x { + width: 66%; + } } @media (width >= 40rem) { .grid-item, .grid-sizer { width: 25%; } + + .grid-item-2x { + width: 50%; + } } @media (width >= 48rem) { .grid-item, .grid-sizer { width: 20%; } + + .grid-item-2x { + width: 40%; + } } .map-container .leaflet-container { diff --git a/views/pages/global-map.html b/views/pages/global-map.html index d595e07..9b67514 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>{{ .L.GlobalMap.Header }} // SAYA TODAY </title> + <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |