Set image width/height, fix scaling of images, test viewport scaling

gamingrobot · Jun 10, 2024 · 7ef65d7 · 7ef65d7
1 parent 58e848f
commit 7ef65d7
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 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
@@ -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
@@ -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
@@ -4,7 +4,7 @@
     <head>
         <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
         <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport"/>
+        <meta content="width=device-width, initial-scale=1.0, maximum-scale=5" name="viewport"/>
         <meta name="theme-color" content="#0d3a58"/>
         <title>
             {% block title %}

diff --git 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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,6 +25,7 @@ body { @@
     }
     img {
       max-width: 100%;
+      height: auto;
     }
     blockquote,
     ul {
@@ Expand Down @@