diff --git a/src/site/pug/includes/post.pug b/src/site/pug/includes/post.pug index a8005b1..0677538 100644 --- a/src/site/pug/includes/post.pug +++ b/src/site/pug/includes/post.pug @@ -4,6 +4,10 @@ mixin post(post, headerWithNavigation) .post-page-divider(class={ "caption-on-right": settings.caption_side === "right" }) + - let willDisplayAlt = settings.display_alt && post.children.some(p => p.data.accessibility_caption) + - let willDisplayAltInDescription = willDisplayAlt && post.children.length === 1 + - let willDisplayAltInGallery = willDisplayAlt && post.children.length !== 1 + section.description-section .user-header header.user-header-inner @@ -18,14 +22,26 @@ mixin post(post, headerWithNavigation) img(src="/static/img/arrow-circled.svg" alt="Previous post.").icon.previous button(data-next).navigate-posts img(src="/static/img/arrow-circled.svg" alt="Next post.").icon + div.relative-box div.scrolling-box if post.getCaption() p.structured-text.description +display_structured(post.getStructuredCaption()) + + if willDisplayAltInDescription + each child in post.children + - let caption = child.data.accessibility_caption + if caption + p.description= caption + section.images-gallery for entry in post.children if entry.isVideo() video(src=entry.getVideoUrlP() controls preload="auto" width=entry.data.dimensions.width height=entry.data.dimensions.height).sized-video else img(src=entry.getDisplayUrlP() alt=entry.getAlt() width=entry.data.dimensions.width height=entry.data.dimensions.height).sized-image + if willDisplayAltInGallery + - let caption = entry.data.accessibility_caption + if caption + p.description.alt-in-gallery= caption diff --git a/src/site/pug/settings.pug b/src/site/pug/settings.pug index 63a6b63..b5e2274 100644 --- a/src/site/pug/settings.pug +++ b/src/site/pug/settings.pug @@ -81,7 +81,7 @@ html {value: "right", text: "Right (Instagram)"} ]) - +checkbox("display_alt", "Display alt text inline", "Display", true) + +checkbox("display_alt", "Display alt text inline", "Display", false) //- div //- Here are all the possible input styles. Uncomment to test styling. diff --git a/src/site/sass/includes/_main.sass b/src/site/sass/includes/_main.sass index 02e52c7..5de4bde 100644 --- a/src/site/sass/includes/_main.sass +++ b/src/site/sass/includes/_main.sass @@ -272,6 +272,20 @@ body .description-section order: 1 + .description + margin: 12px + white-space: pre-line + overflow-wrap: anywhere + font-size: 20px + line-height: 1.4 + unicode-bidi: plaintext + + @media screen and (min-width: $layout-b-min) + padding-bottom: 20px + + @media screen and (max-width: $layout-a-max) + font-size: 18px + .description-section display: grid align-items: stretch @@ -358,19 +372,6 @@ body display: grid align-items: center - .description - margin: 12px - white-space: pre-line - overflow-wrap: anywhere - font-size: 20px - line-height: 1.4 - unicode-bidi: plaintext - @media screen and (min-width: $layout-b-min) - padding-bottom: 20px - - @media screen and (max-width: $layout-a-max) - font-size: 18px - .images-gallery display: flex flex-direction: column @@ -400,6 +401,13 @@ body width: auto height: auto + .alt-in-gallery + color: map-get($theme, "foreground-gallery-alt") + padding: 0px 50px + margin: 0px 0px 50px + text-align: center + font-size: 20px + .error-page box-sizing: border-box min-height: 100vh