From f7da50cc7387b27b4e83ceca1110c9f78472edcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tau=20G=C3=A4rtli?= Date: Sun, 7 Jul 2024 20:08:39 +0200 Subject: [PATCH] Unify image and video figure shortcodes (#1553) --- .github/newsletter-issue-template.md | 24 ++++++++++------- .github/newsletter-template.md | 9 ++++--- CONTRIBUTING.md | 26 +++++++++++++------ content/news/052/index.md | 4 +-- content/news/053/index.md | 15 ++++++++--- .../{embed_video.html => video_figure.html} | 5 +++- 6 files changed, 56 insertions(+), 27 deletions(-) rename templates/shortcodes/{embed_video.html => video_figure.html} (73%) diff --git a/.github/newsletter-issue-template.md b/.github/newsletter-issue-template.md index a344b40eb..ec9566cd3 100644 --- a/.github/newsletter-issue-template.md +++ b/.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="img" - caption="optional image label") }} + alt="image/GIF description", + src="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="img" - caption="optional image label") }} + alt="image/GIF description", + src="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}. diff --git a/.github/newsletter-template.md b/.github/newsletter-template.md index 8a18415b4..35158343f 100644 --- a/.github/newsletter-template.md +++ b/.github/newsletter-template.md @@ -51,13 +51,16 @@ Ideal section structure is: ### [Title] {{ image_figure( - alt="image/GIF description" - src="image link" + alt="image/GIF description", + src="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") }} A paragraph or two with a summary and [useful links]. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5aa9421d2..ef174b4f2 100644 --- a/CONTRIBUTING.md +++ b/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="img" - caption="optional image label") }} + alt="image/GIF description", + src="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. diff --git a/content/news/052/index.md b/content/news/052/index.md index 578f73735..f9ff6e576 100644 --- a/content/news/052/index.md +++ b/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="haalka.mp4", caption="A Minecraft-like UI made with haalka") }} +{{ video_figure(type="video/mp4", src="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"_ diff --git a/content/news/053/index.md b/content/news/053/index.md index 10169b979..c077ac177 100644 --- a/content/news/053/index.md +++ b/content/news/053/index.md @@ -51,10 +51,17 @@ Ideal section structure is: ### [Title] {{ image_figure( - alt="image/GIF description" - src="image link" + alt="image/GIF description", + src="image link", 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="chuot.png" + alt="Bunnymark example", + src="chuot.png", caption="[Bunnymark example](https://tversteeg.nl/chuot/examples/bunnymark/)") }} Chuột ([Website][chuot-website], [GitHub][chuot-github]) by [@tversteeg] diff --git a/templates/shortcodes/embed_video.html b/templates/shortcodes/video_figure.html similarity index 73% rename from templates/shortcodes/embed_video.html rename to templates/shortcodes/video_figure.html index c9590466e..f951b15ce 100644 --- a/templates/shortcodes/embed_video.html +++ b/templates/shortcodes/video_figure.html @@ -1,7 +1,10 @@ {# #}