figures with lightbox

README.md

@@ -389,7 +389,7 @@ Renders into:
 
 ```html
 <figure class="nice">
-  <a href="images/myimage.jpg">
+  <a href="images/myimage.jpg target="_blank">
     <img src="images/myimage.jpg" alt="an image" />
   </a>
   <figcaption>
@@ -407,13 +407,88 @@ Renders into:
 `title` (keyword only)
 : image title attribute
 
+`lightbox` (bool)
+: whether to open a lightbox on click or not
+
 `*args`
 : additional classes for root `<figure>` tag
 
 `**kwds`
 : additional attributes for root `<figure>` tag
 
-TODO: Thumbnails, lightbox, figure enumeration, fetch external images.
+In order `lightbox` to work you must add the following css to your page:
+
+```css
+/* this is aesthetic */
+figure {
+ border: 1pt solid lightgrey;
+ background: #efefef;
+ color: #111;
+ padding: 3pt;
+}
+figure {
+ display: inline-block;
+}
+figure figcaption {
+ width: 100%;
+ text-align: center;
+}
+figure img {
+ object-fit: contain;
+ margin: auto 0;
+ max-width: 100%;
+ max-height: 100%;
+ width: 100%;
+}
+figure.centered {
+ display: block;
+ margin: auto;
+ text-align: center;
+}
+figure.lightbox {
+ transition: 0.5s;
+ transition-property: background;
+}
+figure.lightbox:target {
+ transition: 0.5s;
+ transition-property: background;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: black;
+ background: rgba(0,0,0,.98);
+ color: grey;
+ height: 100% !important;
+ width: 100% !important;
+ padding: 0;
+ margin: 0;
+}
+figure.lightbox .lightbox-background {
+ display: none;
+}
+figure.lightbox:target .lightbox-background {
+ position: fixed;
+ display: block;
+ width: 100%;
+ position: absolute;
+ height: 100%;
+}
+figure.lightbox:target img {
+ display: block;
+ margin: 2% auto;
+ width: 100vw;
+ height: auto;
+ max-width: 90%;
+ max-height: 80%;
+}
+
+```
+
+
+
+TODO: Thumbnails, figure enumeration, fetch external images.
 
 ### Link card (`customblocks.generators.linkcard`)
 

customblocks/generators.py

@@ -1,5 +1,6 @@
 from bs4 import BeautifulSoup
 from yamlns import namespace as ns
+import uuid
 
 from .utils import E, Markdown
 from .utils import PageInfo
@@ -22,14 +23,24 @@ def admonition(ctx, title=None, *args, **kwds):
         **kwds
     )
 
-def figure(ctx, url, *args, **kwds):
+def figure(ctx, url, *args, lightbox:bool=None, **kwds):
     title = kwds.pop('title', None)
     alt = kwds.pop('alt', None)
+    id = kwds.pop('id',None) or (str(uuid.uuid4()) if lightbox else None)
+    classes = list(args)
+    print("lightbox", lightbox)
+    if lightbox: classes.append('lightbox')
     return E('figure',
         dict(
-            _class = ' '.join(args) or None,
+            _class = ' '.join(classes) or None,
+            id = id,
         ),
-        E('a', dict(href = url),
+        E('a.lightbox-background', href="javascript:history.back()") if lightbox else '',
+        E('a',
+            dict(
+                href = f'#{id}' if lightbox else url,
+                target = None if lightbox else '_blank'
+            ),
             E('img',
                 src=url,
                 title=title,

customblocks/generators_test.py

@@ -446,7 +446,7 @@ def test_figure(self):
                 This figure is awsome
             """,
             "<figure>"
-            """<a href="https://via.placeholder.com/300.png"><img src="https://via.placeholder.com/300.png" /></a>"""
+            """<a href="https://via.placeholder.com/300.png" target="_blank"><img src="https://via.placeholder.com/300.png" /></a>"""
             "<figcaption>\n"
             "<p>This figure is awsome</p>\n"
             "</figcaption>\n"
@@ -459,7 +459,7 @@ def test_figure_title(self):
                 This figure is awsome
             """,
             "<figure>"
-            '<a href="https://via.placeholder.com/300.png">'
+            '<a href="https://via.placeholder.com/300.png" target="_blank">'
             '<img '
                 'src="https://via.placeholder.com/300.png" '
                 'title="This is a title" '
@@ -476,7 +476,7 @@ def test_figure_alt(self):
                 This figure is awsome
             """,
             "<figure>"
-            '<a href="https://via.placeholder.com/300.png">'
+            '<a href="https://via.placeholder.com/300.png" target="_blank">'
             '<img '
                 'alt="This is a title" '
                 'src="https://via.placeholder.com/300.png" '
@@ -493,7 +493,7 @@ def test_figure_classes(self):
                 This figure is awsome
             """,
             '<figure class="left-align">'
-            '<a href="https://via.placeholder.com/300.png">'
+            '<a href="https://via.placeholder.com/300.png" target="_blank">'
             '<img '
                 'src="https://via.placeholder.com/300.png" '
             '/></a>'
@@ -510,7 +510,24 @@ def test_figure_attributes_toFigure(self):
                 This figure is awsome
             """,
             '<figure style="background: red">'
-            '<a href="https://via.placeholder.com/300.png">'
+            '<a href="https://via.placeholder.com/300.png" target="_blank">'
+            '<img '
+                'src="https://via.placeholder.com/300.png" '
+            '/></a>'
+            "<figcaption>\n"
+            "<p>This figure is awsome</p>\n"
+            "</figcaption>\n"
+            "</figure>"
+            )
+
+    def test_figure_lightbox(self):
+        self.assertMarkdown("""
+            ::: figure "https://via.placeholder.com/300.png" lightbox id=myimage
+                This figure is awsome
+            """,
+            '<figure class="lightbox" id="myimage">' # added id
+            '<a class="lightbox-background" href="javascript:history.back()"></a>' # this is new
+            '<a href="#myimage">' # No target, href is the id
             '<img '
                 'src="https://via.placeholder.com/300.png" '
             '/></a>'