From 7ef65d74004e251d85d424bf1a8df7b710b2d6ef Mon Sep 17 00:00:00 2001 From: Morgan Creekmore Date: Mon, 10 Jun 2024 13:44:17 -0500 Subject: [PATCH] Set image width/height, fix scaling of images, test viewport scaling --- themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_print.scss | 1 + themes/hyde-hyde-hyde-zola/sass/poole/_base.scss | 1 + themes/hyde-hyde-hyde-zola/templates/base.html | 2 +- themes/hyde-hyde-hyde-zola/templates/shortcodes/img.html | 4 +++- 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_print.scss b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_print.scss index 6b85f5d..12929e0 100644 --- a/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_print.scss +++ b/themes/hyde-hyde-hyde-zola/sass/hyde-hyde/_print.scss @@ -25,6 +25,7 @@ body { } img { max-width: 100%; + height: auto; } blockquote, ul { diff --git a/themes/hyde-hyde-hyde-zola/sass/poole/_base.scss b/themes/hyde-hyde-hyde-zola/sass/poole/_base.scss index 724067a..a944de1 100644 --- a/themes/hyde-hyde-hyde-zola/sass/poole/_base.scss +++ b/themes/hyde-hyde-hyde-zola/sass/poole/_base.scss @@ -50,6 +50,7 @@ a { img { display: block; max-width: 100%; + height: auto; margin: 0 0 1rem; border-radius: 5px; } diff --git a/themes/hyde-hyde-hyde-zola/templates/base.html b/themes/hyde-hyde-hyde-zola/templates/base.html index 294a4dd..3021077 100644 --- a/themes/hyde-hyde-hyde-zola/templates/base.html +++ b/themes/hyde-hyde-hyde-zola/templates/base.html @@ -4,7 +4,7 @@ - + {% block title %} diff --git a/themes/hyde-hyde-hyde-zola/templates/shortcodes/img.html b/themes/hyde-hyde-hyde-zola/templates/shortcodes/img.html index 07b8177..434c583 100644 --- a/themes/hyde-hyde-hyde-zola/templates/shortcodes/img.html +++ b/themes/hyde-hyde-hyde-zola/templates/shortcodes/img.html @@ -1,6 +1,8 @@ <figure {% if align %}class={{ align }}{% endif %}> {% if link %}<a href="{{ link }}">{% endif %} - <img src="{{ get_url(path=page.colocated_path ~ src) }}" {% if alt %}alt="{{ alt }}"{% elif caption %}alt="{{ text }}"{% endif %} style="max-width:100%"> + {%- set image_path = page.colocated_path ~ src %} + {%- set image_meta = get_image_metadata(path=image_path) %} + <img width="{{ image_meta.width }}" height="{{ image_meta.height }}" src="{{ get_url(path=image_path) }}" {% if alt %}alt="{{ alt }}"{% elif caption %}alt="{{ text }}"{% endif %}> {% if link %}</a>{% endif %} {% if text %} <figcaption>