✨ feat: add dual image support for switching themes

welpo · Feb 25, 2023 · b3dc539 · b3dc539
1 parent 1496f0c
commit b3dc539
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 1 deletion.
diff --git a/content/shortcodes.md b/content/shortcodes.md
@@ -7,9 +7,20 @@ tags = ["showcase", "shortcodes"]
 
 ## Image shortcodes
 
+### Dual theme images
+
+Useful if you want to use a different image for the light and dark themes:
+
+{{ dual_theme_image(light_src="$BASE_URL/img/paris_day.webp", dark_src="$BASE_URL/img/paris_night.webp" alt="The Eiffel tower") }}
+
+Usage:
+```
+{{/* dual_theme_image(light_src="$BASE_URL/img/paris_day.webp", dark_src="$BASE_URL/img/paris_night.webp" alt="The Eiffel tower") */}}
+```
+
 ### Invertible image
 
-You can use this shortcode for graphs, line drawings, diagrams…
+Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme.
 
 {{ invertible_image(src="$BASE_URL/img/graph.webp", alt="Invertible graph") }}
 

diff --git a/sass/parts/_image.scss b/sass/parts/_image.scss
@@ -37,3 +37,16 @@ figure h4::before {
 svg {
   max-height: 15px;
 }
+
+.img-dark {
+  display: none;
+}
+
+[data-theme="dark"] {
+  .img-dark {
+    display: block;
+  }
+  .img-light {
+    display: none;
+  }
+}
diff --git a/static/img/paris_day.webp b/static/img/paris_day.webp
diff --git a/static/img/paris_night.webp b/static/img/paris_night.webp
diff --git a/templates/shortcodes/dual_theme_image.html b/templates/shortcodes/dual_theme_image.html
@@ -0,0 +1,2 @@
+<img src="{{ light_src | safe | replace(from="$BASE_URL" , to=config.base_url) }}" {% if alt %}alt="{{ alt }}" {% endif %} class="img-light">
+<img src="{{ dark_src | safe | replace(from="$BASE_URL" , to=config.base_url) }}" {% if alt %}alt="{{ alt }}" {% endif %} class="img-dark">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<img src="{{ light_src \| safe \| replace(from="$BASE_URL" , to=config.base_url) }}" {% if alt %}alt="{{ alt }}" {% endif %} class="img-light">
		<img src="{{ dark_src \| safe \| replace(from="$BASE_URL" , to=config.base_url) }}" {% if alt %}alt="{{ alt }}" {% endif %} class="img-dark">