From 65916e989979b60f5ae0bf7baba3d92311ca62ba Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 26 Jul 2020 18:27:35 +0200
Subject: Make figure shortcode resize large images somwhat smart.

Images higher than 500px will be resized to not be any higher. Also we
check for images that will be less than 400px wide after resizing, and
float them to the left on wide displays.
---
 sass/styles.scss                 | 14 ++++++++++++++
 templates/shortcodes/figure.html | 29 +++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/sass/styles.scss b/sass/styles.scss
index ef2ea26..b662254 100644
--- a/sass/styles.scss
+++ b/sass/styles.scss
@@ -58,6 +58,14 @@ pre {
     padding-bottom: 0.5em;
 }
 
+.prefer-left {
+  @media(min-width: 960px) {
+    float: left;
+    width: 400px;
+    margin: 0.5rem;
+  }
+}
+
 .license {
     display: flex;
     border-top: 1px solid #aaa;
@@ -79,8 +87,14 @@ pre {
     }
 }
 
+.post {
+  clear: both;
+  margin-top: 2em;
+}
+
 .post-title {
     margin-bottom: 0;
+    font-size: 150%;
 }
 
 .post-meta {
diff --git a/templates/shortcodes/figure.html b/templates/shortcodes/figure.html
index 98332a0..e56957e 100644
--- a/templates/shortcodes/figure.html
+++ b/templates/shortcodes/figure.html
@@ -1,5 +1,30 @@
-<div class="figure">
-	<img src="{{ get_url(path=page.path ~ img) | safe }}" {% if alt %}alt="[{{ alt }}]"{% endif %}>
+{% if img is matching("\.(jpg|jpeg|png)$") -%}
+	{% for asset in page.assets %}
+		{% if asset is ending_with(img) %}
+			{% set_global img = asset %}
+			{% break %}
+		{% endif %}
+	{% endfor %}
+	{% set meta = get_image_metadata(path=img) %}
+	{% set scale = meta.height / 500 %}
+	{% if scale > 1 %}
+		{% set size_y = 500 %}
+		{% set size_x = meta.width / scale %}
+	{% else %}
+		{% set size_y = meta.height %}
+		{% set size_x = meta.width %}
+	{% endif %}
+	{% set img_url = resize_image(path=img, height=size_y, op="fit_height") %}
+	{% if size_x < 400 %}
+		{% set xclass = "prefer-left" %}
+	{% endif %}
+{% else %}
+	{% set img_url = get_url(path=page.path ~ img) %}
+{% endif %}
+<div class="figure {% if xclass %}{{ xclass }}{% endif %}">
+	<img src="{{ img_url | safe }}"
+			{% if alt %}alt="[{{ alt }}]"{% endif %}
+			>
 	<div class="caption">
 		{{ body | markdown | safe}}
 	</div>
-- 
cgit v1.2.3