Option to show alt text if available (closes #49)

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

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.

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