diff options
| -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> |