Set html size attributes for images

content/posts/adventofctf/challenge_3.md

@@ -33,24 +33,25 @@ When opening the website we're provided with a login form. If we fill in the for
 Let's open the source and take a look at the form. Here we can see that when the form is submitted, a javascript function called `checkPass()` is called.
 
 ```html
-<form action="/index.php" onsubmit='checkPass(); return false'>
+<form action="/index.php" onsubmit="checkPass(); return false"></form>
 ```
 
 To find this funtion, enter `checkPass` in the devtools console and click on the three dots at the bottom of the output.
 
 ```js
-function checkPass()
-{
-    var username = document.getElementById('username').value;
-    var password = document.getElementById('password').value;
+function checkPass() {
+  var username = document.getElementById("username").value;
+  var password = document.getElementById("password").value;
 
-    var novi = '-NOVI';
+  var novi = "-NOVI";
 
-    if (password == btoa(username + novi)) {
-        window.setTimeout(function() {
-            window.location.assign('inde' + 'x.php?username='+ username +'&password=' + password);
-        }, 500);
-    }
+  if (password == btoa(username + novi)) {
+    window.setTimeout(function () {
+      window.location.assign(
+        "inde" + "x.php?username=" + username + "&password=" + password
+      );
+    }, 500);
+  }
 }
 ```
 

themes/maik-blog/assets/scss/_main.scss

@@ -90,6 +90,8 @@ a {
 
 img {
   display: block;
+  width: auto;
+  height: auto;
   max-width: 100%;
 
   &.left {

themes/maik-blog/layouts/_default/list.html

@@ -37,11 +37,14 @@
 
             {{ if .Params.Cover }}
             <figure class="post-cover">
+                {{ $img := imageConfig (printf "static/%s" .Params.Cover) }}
+
                 {{ if .Params.UseRelativeCover }}
-                <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}"
-                    alt="{{ .Title | plainify | default " " }}" />
+                <img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}"
+                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
                 {{ else }}
-                <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}" />
+                <img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}"
+                    width="{{ $img.Width }}" height="{{ $img.Height }}" />
                 {{ end }}
 
                 {{ if .Params.CoverCaption }}

themes/maik-blog/layouts/posts/single.html

@@ -34,9 +34,11 @@
     <hr />
     {{- end }}
 
-    {{ with .Params.Cover }}
-    <img src="/{{ . }}" class="post-cover" />
-    {{ end }}
+    {{- if .Params.Cover }}
+    {{ $img := imageConfig (printf "static/%s" .Params.Cover) }}
+    <img src="/{{ .Params.Cover }}" class="post-cover" alt="{{ .Title | plainify | default " " }}"
+      width="{{ $img.Width }}" height="{{ $img.Height }}" />
+    {{- end }}
 
     <div class="post-content">
       {{ .Content }}