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 + "")