diff options
| author | Your Name <you@example.com> | 2020-07-26 18:27:35 +0200 |
|---|---|---|
| committer | Your Name <you@example.com> | 2020-07-26 18:27:35 +0200 |
| commit | 65916e989979b60f5ae0bf7baba3d92311ca62ba (patch) | |
| tree | 7b603113e936e974c8f4b783376f15e87f043d94 | |
| parent | 3787bc2049de0c4454a0b519289e819c9e6806cf (diff) | |
| download | rabalderz-65916e989979b60f5ae0bf7baba3d92311ca62ba.tar.gz rabalderz-65916e989979b60f5ae0bf7baba3d92311ca62ba.tar.bz2 rabalderz-65916e989979b60f5ae0bf7baba3d92311ca62ba.zip | |
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.
| -rw-r--r-- | sass/styles.scss | 14 | ||||
| -rw-r--r-- | 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> |