diff --git a/inc/processJsonPost.js b/inc/processJsonPost.js index b3cd784..d57711d 100644 --- a/inc/processJsonPost.js +++ b/inc/processJsonPost.js @@ -278,6 +278,7 @@ async function processJsonPost(json, parsed, user_preferences) { post.media_metadata[id].p.length - 1 ].u ), + caption: post.gallery_data.items[i].caption || false, }; } obj.gallery_items.push(item); diff --git a/routes/preferences.js b/routes/preferences.js index 9d7169b..e36c28b 100644 --- a/routes/preferences.js +++ b/routes/preferences.js @@ -17,6 +17,7 @@ function resetPreferences(res) { res.clearCookie('domain_instagram'); res.clearCookie('videos_muted'); res.clearCookie('prefer_frontpage'); + res.clearCookie('show_large_gallery_images'); } preferenceRoutes.get('/preferences', (req, res, next) => { @@ -91,6 +92,7 @@ preferenceRoutes.post('/saveprefs', (req, res, next) => { let domain_instagram = req.body.domain_instagram; let videos_muted = req.body.videos_muted; let prefer_frontpage = req.body.prefer_frontpage; + let show_large_gallery_images = req.body.show_large_gallery_images; res.cookie('theme', theme, { maxAge: 365 * 24 * 60 * 60 * 1000, @@ -174,6 +176,12 @@ preferenceRoutes.post('/saveprefs', (req, res, next) => { httpOnly: true, }); + if (show_large_gallery_images === 'on') show_large_gallery_images = 'true'; + res.cookie('show_large_gallery_images', show_large_gallery_images, { + maxAge: 365 * 24 * 60 * 60 * 1000, + httpOnly: true, + }); + return res.redirect('/preferences'); }); diff --git a/static/css/styles.css b/static/css/styles.css index 4a0c7a4..971c2fc 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1647,6 +1647,36 @@ body.homepage.clean .sublinks a { } } +/* Large gallery items */ +.gallery .item.large { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + position: relative; + margin-right: 0.3rem; +} + +.gallery .item.large img { + max-height: 90vh; + position: relative; +} + +.gallery .item.large .caption { + position: absolute; + width: calc(100% - 0.6rem); + color: white; + background: rgba(0, 0, 0, 0.7); + padding: 0.3rem; + bottom: 0; +} + +@media only screen and (max-width: 768px) { + .gallery .item.large img { + max-height: unset; + max-width: 100%; + } +} + /* Fix spoiler texts not showing without JS */ .md .md-spoiler-text:not(.revealed):active,.md .md-spoiler-text:not(.revealed):focus,.md .md-spoiler-text:not(.revealed):hover { color: black; diff --git a/views/post.pug b/views/post.pug index cd607bc..cd419e1 100644 --- a/views/post.pug +++ b/views/post.pug @@ -137,12 +137,19 @@ html if post.gallery .gallery each item in post.gallery_items - .item - div + if user_preferences.show_large_gallery_images == 'true' + .item.large a(href="" + item.large + "", target="_blank") - img(src=""+ item.thumbnail +"", alt="") - a(href="" + item.source + "", target="_blank", class="source-link") - small source + img(src="" + item.large + "", title="" + item.caption + "") + if item.caption + span.caption !{item.caption} + else + .item + div + a(href="" + item.large + "", target="_blank") + img(src=""+ item.thumbnail +"", alt="") + a(href="" + item.source + "", target="_blank", class="source-link") + small source if post.images .image a(href="" + post.images.source + "") diff --git a/views/preferences.pug b/views/preferences.pug index 8a0d220..08c935b 100644 --- a/views/preferences.pug +++ b/views/preferences.pug @@ -126,6 +126,12 @@ html input(type="checkbox", name="videos_muted", id="videos_muted", checked="checked") else input(type="checkbox", name="videos_muted", id="videos_muted") + .setting + label(for="show_large_gallery_images") Show large gallery images with captions: + if (user_preferences.show_large_gallery_images == 'true') + input(type="checkbox", name="show_large_gallery_images", id="show_large_gallery_images", checked="checked") + else + input(type="checkbox", name="show_large_gallery_images", id="show_large_gallery_images") small(class="notice") Preferences are stored client-side using cookies without any personal information. br input(type="submit", value="Save preferences")