lightgallery html5 video support. drinkrobotics page now using lightgallery macro.

input/projects/drinkrobotics.md

@@ -17,17 +17,17 @@ Here are some photos and videos of our tent at the CCCamp2019 summer hacker camp
 
 [Project page on camp wiki](https://web.archive.org/web/20201025144323/https://events.ccc.de/camp/2019/wiki/Projects:UbaBot). [Hackaday feature](https://web.archive.org/web/20201108013437/https://hackaday.com/2019/08/22/ubabot-mixes-up-50-cocktails-to-quench-cccamp-thirst/).
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/rzQB0l1Imt4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/CsiNMK3guS0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-
-<div class="lightgallery">
-    <a href="img/ubabot_camp19_1.jpg">
-        <img src="img/ubabot_camp19_1_small.jpg" alt="Steffen demonstrating the machine for Hackaday">
-    </a>
-    <a href="img/ubabot_camp19_2.jpg">
-        <img src="img/ubabot_camp19_2_small.jpg" alt="Side view of the pumps, from Hackaday">
-    </a>
-</div>
+<!--%
+lightgallery([
+    [ "https://www.youtube.com/watch?v=rzQB0l1Imt4", "img/camp_hackaday_small.jpg", "Steffen demonstrating the machine for Hackaday" ],
+
+    [ "https://www.youtube.com/watch?v=CsiNMK3guS0", "img/camp_machine_small.jpg", "One run of the machine at CCCamp2019" ],
+
+    [ "img/ubabot_camp19_1.jpg", "Steffen demonstrating the machine for Hackaday" ],
+
+    [ "img/ubabot_camp19_2.jpg", "Side view of the pumps, from Hackaday" ]
+])
+%-->
 
 [Source](https://hackaday.com/2019/08/22/ubabot-mixes-up-50-cocktails-to-quench-cccamp-thirst/), by Mike Szczys.
 
@@ -35,31 +35,19 @@ Here are some photos and videos of our tent at the CCCamp2019 summer hacker camp
 
 Here are some photos and a video from when we were invited to Verschwörläum 2018 in Ulm.
 
-<iframe src="https://commons.wikimedia.org/wiki/File:Ubabot,_Vslaeum_2018,_Ulm.webm?embedplayer=yes" width="560" height="315" frameborder="0" ></iframe>
-
-<div class="lightgallery">
-    <a href="img/ubabot_ulm_7.jpg">
-        <img src="img/ubabot_ulm_7_small.jpg" alt="Front view of the machine">
-    </a>
-    <a href="img/ubabot_ulm_2.jpg">
-        <img src="img/ubabot_ulm_2_small.jpg" alt="Side Front view of the machine">
-    </a>
-    <a href="img/ubabot_ulm_1.jpg">
-        <img src="img/ubabot_ulm_1_small.jpg" alt="Back view of the machine. The green PCB is the motor driver with my firmware.">
-    </a>
-    <a href="img/ubabot_ulm_3.jpg">
-        <img src="img/ubabot_ulm_3_small.jpg" alt="A drink is poured">
-    </a>
-    <a href="img/ubabot_ulm_4.jpg">
-        <img src="img/ubabot_ulm_4_small.jpg" alt="A drink is poured">
-    </a>
-    <a href="img/ubabot_ulm_5.jpg">
-        <img src="img/ubabot_ulm_5_small.jpg" alt="A drink is poured">
-    </a>
-    <a href="img/ubabot_ulm_6.jpg">
-        <img src="img/ubabot_ulm_6_small.jpg" alt="A drink is poured">
-    </a>
-</div>
+<!--%
+lightgallery([
+    [ "https://upload.wikimedia.org/wikipedia/commons/c/c3/Ubabot%2C_Vslaeum_2018%2C_Ulm.webm", "video/webm", "img/ulm_machine_small.jpg", "img/ulm_machine.jpg", "The machine in operation" ],
+
+    [ "img/ubabot_ulm_7.jpg", "Front view of the machine" ],
+    [ "img/ubabot_ulm_2.jpg", "Side Front view of the machine" ],
+    [ "img/ubabot_ulm_1.jpg", "Back view of the machine. The green PCB is the motor driver with my firmware." ],
+    [ "img/ubabot_ulm_3.jpg", "A drink is poured" ],
+    [ "img/ubabot_ulm_4.jpg", "A drink is poured" ],
+    [ "img/ubabot_ulm_5.jpg", "A drink is poured" ],
+    [ "img/ubabot_ulm_6.jpg", "A drink is poured" ]
+])
+%-->
 
 [Source](https://commons.wikimedia.org/wiki/Category:Ubabot), by [Matti Blume](https://commons.wikimedia.org/wiki/User:MB-one), [CC-BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/deed.en)
 
@@ -67,14 +55,12 @@ Here are some photos and a video from when we were invited to Verschwörläum 20
 
 In 2017, we rebuilt Ubabot as part of the Maker Challenge of the Makerfaire Friedrichshafen.
 
-<div class="lightgallery">
-    <a href="img/ubabot_makerfaire_1.jpg">
-        <img src="img/ubabot_makerfaire_1_small.jpg" alt="The winning teams with their cocktail machines">
-    </a>
-    <a href="img/ubabot_makerfaire_2.jpg">
-        <img src="img/ubabot_makerfaire_2_small.jpg" alt="Closer shot of this early Ubabot prototype">
-    </a>
-</div>
+<!--%
+lightgallery([
+    [ "img/ubabot_makerfaire_1.jpg", "The winning teams with their cocktail machines" ],
+    [ "img/ubabot_makerfaire_2.jpg", "Closer shot of this early Ubabot prototype" ]
+])
+%-->
 
 [A video of our machine in action can be found on heise online](https://www.heise.de/make/meldung/Maker-Faire-Bodensee-2017-Cocktails-Cosplay-und-Casemodding-3772515.html#nav_im_wettbewerb_0) (scroll down).
 
@@ -82,11 +68,11 @@ In 2017, we rebuilt Ubabot as part of the Maker Challenge of the Makerfaire Frie
 
 I designed a 3D model for a cap enclosing the large open glass bottles we have for some ingredients. It is a 2-color model that can be printed with a dual-nozzle printer, or you can just leave out the "filling" and print it with a single-nozzle printer. The design [can be found in my Git Repo](https://git.xythobuz.de/thomas/3d-print-designs/src/branch/master/cocktail-maschine).
 
-<div class="lightgallery">
-    <a href="img/drinkrobotics_deckel.png">
-        <img src="img/drinkrobotics_deckel_small.png" alt="The 3D design of the bottle cap.">
-    </a>
-</div>
+<!--%
+lightgallery([
+    [ "img/drinkrobotics_deckel.png", "The 3D design of the bottle cap." ]
+])
+%-->
 
 ## Arduino-Cocktail
 
@@ -98,53 +84,25 @@ The dispension is controlled by four solenoid valves, operated using relais.
 Custom built 3D printed [bottle cap adapters](https://www.thingiverse.com/thing:2445858) are used to pressurize coke bottles and take out the liquid.
 Everything is controlled by an Arduino, with a small OLED display and three buttons as the user interface.
 
-<div class="lightgallery">
-    <a href="img/arduino_cocktail_12.jpg">
-        <img src="img/arduino_cocktail_12_small.jpg" alt="Front Top view of the machine">
-    </a>
-    <a href="img/arduino_cocktail_11.jpg">
-        <img src="img/arduino_cocktail_11_small.jpg" alt="Top view of the machine">
-    </a>
-    <a href="img/arduino_cocktail_8.jpg">
-        <img src="img/arduino_cocktail_8_small.jpg" alt="Electronics">
-    </a>
-    <a href="img/arduino_cocktail_7.jpg">
-        <img src="img/arduino_cocktail_7_small.jpg" alt="Electronics">
-    </a>
-    <a href="img/arduino_cocktail_5.jpg">
-        <img src="img/arduino_cocktail_5_small.jpg" alt="Solenoid valves">
-    </a>
-    <a href="img/arduino_cocktail_6.jpg">
-        <img src="img/arduino_cocktail_6_small.jpg" alt="Solenoid valves">
-    </a>
-    <a href="img/arduino_cocktail_9.jpg">
-        <img src="img/arduino_cocktail_9_small.jpg" alt="The two boards fit the box neatly.">
-    </a>
-    <a href="img/arduino_cocktail_10.jpg">
-        <img src="img/arduino_cocktail_10_small.jpg" alt="There is still enough room for a battery and the pipework.">
-    </a>
-    <a href="img/arduino_cocktail_13.jpg">
-        <img src="img/arduino_cocktail_13_small.jpg" alt="Back view of the UI">
-    </a>
-    <a href="img/arduino_cocktail_14.jpg">
-        <img src="img/arduino_cocktail_14_small.jpg" alt="My very professional Co2 distribution">
-    </a>
-    <a href="img/arduino_cocktail_1.jpg">
-        <img src="img/arduino_cocktail_1_small.jpg" alt="Some old notes for the project">
-    </a>
-    <a href="img/arduino_cocktail_2.jpg">
-        <img src="img/arduino_cocktail_2_small.jpg" alt="Some old notes for the project">
-    </a>
-    <a href="img/arduino_cocktail_3.jpg">
-        <img src="img/arduino_cocktail_3_small.jpg" alt="Some old notes for the project">
-    </a>
-    <a href="img/arduino_cocktail_4.jpg">
-        <img src="img/arduino_cocktail_4_small.jpg" alt="Some old notes for the project">
-    </a>
-    <a href="img/co2_pressure_reducer.jpg">
-        <img src="img/co2_pressure_reducer_small.jpg" alt="Example of a sodastream compatible Co2 pressure reducer">
-    </a>
-</div>
+<!--%
+lightgallery([
+    [ "img/arduino_cocktail_12.jpg", "Front Top view of the machine" ],
+    [ "img/arduino_cocktail_11.jpg", "Top view of the machine" ],
+    [ "img/arduino_cocktail_8.jpg", "Electronics" ],
+    [ "img/arduino_cocktail_7.jpg", "Electronics" ],
+    [ "img/arduino_cocktail_5.jpg", "Solenoid valves" ],
+    [ "img/arduino_cocktail_6.jpg", "Solenoid valves" ],
+    [ "img/arduino_cocktail_9.jpg", "The two boards fit the box neatly." ],
+    [ "img/arduino_cocktail_10.jpg", "There is still enough room for a battery and the pipework." ],
+    [ "img/arduino_cocktail_13.jpg", "Back view of the UI" ],
+    [ "img/arduino_cocktail_14.jpg", "My very professional Co2 distribution" ],
+    [ "img/arduino_cocktail_1.jpg", "Some old notes for the project" ],
+    [ "img/arduino_cocktail_2.jpg", "Some old notes for the project" ],
+    [ "img/arduino_cocktail_3.jpg", "Some old notes for the project" ],
+    [ "img/arduino_cocktail_4.jpg", "Some old notes for the project" ],
+    [ "img/co2_pressure_reducer.jpg", "Example of a sodastream compatible Co2 pressure reducer" ]
+])
+%-->
 
 The Arduino firmware can be found on [Github](https://github.com/drinkrobotics/Arduino-Cocktail).
 

macros.py

@@ -9,17 +9,49 @@ from datetime import datetime
 DEFAULT_LANG = "en"
 BASE_URL = "https://www.xythobuz.de"
 
+# -----------------------------------------------------------------------------
+# lightgallery helper macro
+# -----------------------------------------------------------------------------
+
+# call this macro like this
+# lightgallery([
+#     [ "image-link", "description" ],
+#     [ "image-link", "thumbnail-link", "description" ],
+#     [ "youtube-link", "thumbnail-link", "description" ],
+#     [ "video-link", "mime", "thumbnail-link", "image-link", "description" ]
+# ])
+
 def lightgallery(links):
+    videos = [l for l in links if len(l) == 5]
+    v_i = 0
+    for v in videos:
+        link, mime, thumb, poster, alt = v
+        v_i += 1
+        print '<div style="display:none;" id="video' + str(v_i) + '">'
+        print '<video class="lg-video-object lg-html5" controls preload="none">'
+        print '<source src="' + link + '" type="' + mime + '">'
+        print 'Your browser does not support HTML5 video.'
+        print '</video>'
+        print '</div>'
+        
     print '<div class="lightgallery">'
+    v_i = 0
     for l in links:
-        link = img = alt = ""
-        if len(l) == 3:
-            link, img, alt = l
+        if (len(l) == 3) or (len(l) == 2):
+            link = img = alt = ""
+            if len(l) == 3:
+                link, img, alt = l
+            else:
+                link, alt = l
+                x = link.rfind('.')
+                img = link[:x] + '_small' + link[x:]
+            print '<div class="border" data-src="' + link + '"><a href="' + link + '"><img class="pic" src="' + img + '" alt="' + alt + '"></a></div>'
+        elif len(l) == 5:
+            v_i += 1
+            link, mime, thumb, poster, alt = v
+            print '<div class="border" data-poster="' + poster + '" data-sub-html="' + alt + '" data-html="#video' + str(v_i) + '"><a href="' + link + '"><img class="pic" src="' + thumb + '"></a></div>'
         else:
-            link, alt = l
-            x = link.rfind('.')
-            img = link[:x] + '_small' + link[x:]
-        print '<div class="border" data-src="' + link + '"><a href="' + link + '"><img class="pic" src="' + img + '" alt="' + alt + '"></a></div>'
+            raise NameError('Invalid number of arguments for lightgallery')
     print '</div>'
 
 # -----------------------------------------------------------------------------