Merge pull request #56 from syeopite/image-alt-text

Add widget to show alt text on images
syeopite · Jul 10, 2024 · 8bb7917 · 8bb7917
2 parents d1e4f00 + c0f0341
commit 8bb7917
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 18 deletions.
diff --git a/assets/css/base.css b/assets/css/base.css
@@ -99,6 +99,9 @@ body {
     --color-ask-header: var(--light, var(--color-gray-800)) var(--dark, var(--color-dt-gray-225));
     --color-ask-bg: var(--light, var(--color-gray-200)) var(--dark, var(--color-dt-gray-525));
 
+    --color-post-img-alt-text-widget-bg: var(--light, var(--color-gray-900)) var(--dark, var(--color-dt-gray-600));
+    --color-post-img-alt-text-widget-text: var(--light, var(--color-gray-100)) var(--dark, var(--color-text));
+
     --color-poll-text-color: var(--light, var(--color-gray-800)) var(--dark, var(--color-gray-200));
     --color-poll-winner-bg: var(--light, var(--color-primary-300)) var(--dark, var(--color-primary-700));
     --color-poll-proportion-bar-bg: var(--light, var(--color-gray-250)) var(--dark, var(--color-dt-gray-300));

diff --git a/assets/css/post-layout.css b/assets/css/post-layout.css
@@ -179,12 +179,39 @@ a.toggle-poll-results {
   font-size: 12px;
 }
 
-
 @media (max-width: 590px) {
   .poll-metadata {
     flex-direction: column;
   }
   .poll-metadata .separator {
     display: none;
   }
+}
+
+/* Priviblur extensions */
+.img-alt-text {
+  position: absolute;
+  z-index: 3;
+  bottom: 0;
+  margin: 10px;
+  opacity: 25%;
+  max-height: 100%;
+  overflow: scroll;
+}
+
+.image-block:hover .img-alt-text, .img-alt-text:has(details[open=""]) {
+  opacity: 100%;
+}
+
+.img-alt-text details {
+  color: var(--color-post-img-alt-text-widget-text);
+  background: var(--color-post-img-alt-text-widget-bg);
+  border-radius: 10px;
+  padding: 5px 10px;
+}
+
+.img-alt-text summary {
+  border-radius: 10px;
+  font-weight: bold;
+  list-style: none;
 }
diff --git a/src/helpers/ext_npf_renderer.py b/src/helpers/ext_npf_renderer.py
@@ -110,22 +110,6 @@ def __init__(self, content, layout=None, blog_name=None, post_id=None, *, url_ha
         self.blog_name = blog_name
         self.post_id = post_id
 
-    def _linkify_images(self, element):
-        try:
-            image_element = element.getElementsByTagName("img")
-            image_container = element.get(cls="image-container")
-
-            if image_container and image_element:
-                image_container = image_container[0]
-                image_element = image_element[0]
-
-                index_of_image = image_container.children.index(image_element)
-                image_container[index_of_image] = dominate.tags.a(image_element, href=image_element.src)
-        except (ValueError, IndexError):
-            pass
-
-        return element
-
     def _format_poll(self, block):
         poll_html = super()._format_poll(block)
         poll_html["data-poll-id"] = block.poll_id
@@ -150,7 +134,41 @@ def _format_poll(self, block):
 
     def _format_image(self, block, row_length=1, override_padding=None):
         image_html = super()._format_image(block, row_length, override_padding)
-        return self._linkify_images(image_html)
+
+        try:
+            image_element = image_html.getElementsByTagName("img")
+            image_container = image_html.get(cls="image-container")
+
+            if not (image_container and image_element):
+                return image_html
+
+            image_container = image_container[0]
+            image_element = image_element[0]
+
+            self._add_alt_text_element(block, image_container)
+            self._linkify_images(image_container, image_element)
+        except (ValueError, IndexError):
+            pass
+
+        return image_html
+
+    def _linkify_images(self, image_container, image_element):
+        """Wraps the given image element in a link"""
+        index_of_image = image_container.children.index(image_element)
+        image_container[index_of_image] = dominate.tags.a(image_element, href=image_element.src)
+
+    def _add_alt_text_element(self, block, image_container):
+        """Adds widget to show image alt text on image blocks"""
+        if block.alt_text and block.alt_text != "image":
+            image_container.add(
+                dominate.tags.div(
+                    dominate.tags.details(
+                        dominate.tags.summary("ALT", title=f"{block.alt_text}"),
+                        dominate.tags.p(block.alt_text)
+                    ),
+                    cls="img-alt-text"
+                )
+            )
 
 
 async def format_npf(contents, layouts=None, blog_name=None, post_id=None,*, poll_callback=None):