Unify image and video figure shortcodes (#1553)

Author: tautropfli

.github/newsletter-issue-template.md

@@ -104,7 +104,7 @@ but here are the most important rules:
   - The image should come before the text, and must have alt text for accessibility.
   - Prefer static images to GIFs/videos, to keep the page load times down.
   - To include a video, encode it as `H.264` in an `mp4` container and use
-    the `embed_video()` shortcode; videos autoplay in a loop (muted).
+    the `video_figure()` shortcode; videos autoplay in a loop (muted).
 - Each section should be under 1000 characters, and under 6 paragraphs.
   - This only applies to the rendered text, not the markup.
 - Keep formatting minimal - no bold/italics/etc.
@@ -118,13 +118,16 @@ Please use these templates as a starting point:
 ### [Game name]
 
 {{ image_figure(
-    alt="alt text"
-    src="https://github.com/%3Cspan%20class="x x-first x-last">img"
-    caption="optional image label") }}
+    alt="image/GIF description",
+    src="https://github.com/%3Cspan%20class="x x-first x-last">image link",
+    caption="image caption") }}
 
 OR
 
-{{ embed_video(type="video/mp4", src="my-video.mp4", caption="optional video caption") }}
+{{ video_figure(
+    type="video/mp4", 
+    src="my-video.mp4", 
+    caption="optional video caption") }}
 
 [Game name] ([GitHub], [Discord], [Twitter]) by [@nickname]
 is... {short project description in one sentence}.
@@ -142,13 +145,16 @@ _Discussions: [/r/rust_gamedev](link), [Twitter](link), [etc](link)_
 ### [Article name]
 
 {{ image_figure(
-    alt="alt text"
-    src="https://github.com/%3Cspan%20class="x x-first x-last">img"
-    caption="optional image label") }}
+    alt="image/GIF description",
+    src="https://github.com/%3Cspan%20class="x x-first x-last">image link",
+    caption="image caption") }}
 
 OR
 
-{{ embed_video(type="video/mp4", src="my-video.mp4", caption="optional video caption") }}
+{{ video_figure(
+    type="video/mp4", 
+    src="my-video.mp4", 
+    caption="optional video caption") }}
 
 [@nickname] published an [article] about...
 {overview what the resource is about}.

.github/newsletter-template.md

@@ -51,13 +51,16 @@ Ideal section structure is:
 ### [Title]
 
 {{ image_figure(
-    alt="image/GIF description"
-    src="https://github.com/image%20link"
+    alt="image/GIF description",
+    src="https://github.com/image%20link",
     caption="image caption") }}
 
 OR
 
-{{ embed_video(type="video/mp4", src="my-video.mp4", caption="optional video caption") }}
+{{ video_figure(
+    type="video/mp4", 
+    src="my-video.mp4", 
+    caption="optional video caption") }}
 
 A paragraph or two with a summary and [useful links].
 

CONTRIBUTING.md

@@ -57,9 +57,16 @@ your GitHub notifications for any further review comments from the editors.
 ### [Game name]
 
 {{ image_figure(
-    alt="alt text"
-    src="img"
-    caption="optional image label") }}
+    alt="image/GIF description",
+    src="image link",
+    caption="image caption") }}
+
+OR
+
+{{ video_figure(
+    type="video/mp4", 
+    src="my-video.mp4", 
+    caption="optional video caption") }}
 
 [Game name] ([GitHub], [Discord], [Twitter]) by [@nickname]
 is... {short project description in one sentence}.
@@ -77,13 +84,16 @@ _Discussions: [/r/rust_gamedev](link), [Twitter](link), [etc](link)_
 ### [Article name]
 
 {{ image_figure(
-    alt="alt text"
-    src="https://github.com/%3Cspan%20class="x x-first x-last">img"
-    caption="optional image label") }}
+    alt="image/GIF description",
+    src="https://github.com/%3Cspan%20class="x x-first x-last">image link",
+    caption="image caption") }}
 
 OR
 
-{{ embed_video(type="video/mp4", src="my-video.mp4", caption="optional video caption") }}
+{{ video_figure(
+    type="video/mp4", 
+    src="my-video.mp4", 
+    caption="optional video caption") }}
 
 [@nickname] published an [article] about...
 {overview what the resource is about}.
@@ -113,7 +123,7 @@ _Discussions: [/r/rust_gamedev](link), [Twitter](link), [etc](link)_
   - Unless essential to demonstrating your project, prefer static images
     over GIFs/videos, to keep the file size down.
   - To include a video, encode it as `H.264` in an `mp4` container and use
-    the `embed_video()` shortcode; videos autoplay in a loop (muted).
+    the `video_figure()` shortcode; videos autoplay in a loop (muted).
 - Use singular 'they' if you’re not sure what someone's pronouns are.
 - If a project has been featured in previous newsletters, try to focus on
   what's new rather than repeating previous content.

content/news/052/index.md

@@ -82,7 +82,7 @@ We will switch this to an actual @gamedev.rs address in the future. Please tell
 
 ### [Untitled Pixel Wizards Game][pixel-wizards]
 
-{{ embed_video(
+{{ video_figure(
     type="video/mp4", 
     src="untitled-pixel-wizards-game.mp4", 
     caption="Enemies now perceive, pursue, and attack... and occasionally get burned to death.") }}
@@ -337,7 +337,7 @@ You can get started by reading the [bevy_lunex book][bevy-lunex-book].
 
 ### [haalka]
 
-{{ embed_video(type="video/mp4", src="https://github.com/haalka.mp4", caption="A Minecraft-like UI made with haalka") }}
+{{ video_figure(type="video/mp4", src="https://github.com/haalka.mp4", caption="A Minecraft-like UI made with haalka") }}
 
 হালকা: _in bengali, haalka means "light" (e.g. not heavy) and can also be used to mean "easy"_
 

content/news/053/index.md

@@ -51,10 +51,17 @@ Ideal section structure is:
 ### [Title]
 
 {{ image_figure(
-    alt="image/GIF description"
-    src="https://github.com/image%20link"
+    alt="image/GIF description",
+    src="https://github.com/image%20link",
     caption="image caption") }}
 
+OR
+
+{{ video_figure(
+    type="video/mp4", 
+    src="my-video.mp4", 
+    caption="optional video caption") }}
+
 A paragraph or two with a summary and [useful links].
 
 _Discussions:
@@ -77,8 +84,8 @@ If needed, a section can be split into subsections with a "------" delimiter.
 ### [Chuột][chuot-website]
 
 {{ image_figure(
-    alt="Bunnymark example"
-    src="https://github.com/chuot.png"
+    alt="Bunnymark example",
+    src="https://github.com/chuot.png",
     caption="[Bunnymark example](https://tversteeg.nl/chuot/examples/bunnymark/)") }}
 
 Chuột ([Website][chuot-website], [GitHub][chuot-github]) by [@tversteeg]

templates/shortcodes/embed_video.html templates/shortcodes/video_figure.htmltemplates/shortcodes/embed_video.html renamed to templates/shortcodes/video_figure.html

@@ -1,7 +1,10 @@
 {# <!--
 Embed a video into a markdown file. Example usage:
 
-    {{ embed_video(type="video/mp4", src="my-video.mp4", caption="Some caption.") }}
+    {{ video_figure(
+        type="video/mp4", 
+        src="my-video.mp4", 
+        caption="Some caption.") }}
 
 --> #}
 <figure>