Merge pull request #82 from markdumay/develop

Develop

content/en/blog/custom-shortcodes.md

@@ -187,7 +187,7 @@ Use the `image` shortcode to display a responsive image with a specific aspect r
 | Argument  | Required | Description |
 |-----------|----------|-------------|
 | src       | Yes | Required url of the image, e.g. "img/boots.jpg" or "https://picsum.photos/id/27/3264/1836". |
-| ratio     | No  | Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". It not specified the original aspect ratio of the image is preserved. |
+| ratio     | No  | Optional aspect ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is resized and cropped to match the ratio. Else the original aspect ratio of the image is kept. |
 | class     | No  | Optional class attribute of the inner `img` element, e.g. "rounded". |
 | title     | No  | Optional alternate text of the image. |
 | caption   | No  | Optional figure caption. |

content/nl/blog/custom-shortcodes.md

@@ -188,7 +188,7 @@ Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhoudi
 | Parameter | Verplicht | Toelichting |
 |-----------|----------|-------------|
 | src       | Ja  | Verplichte url van het plaatje, bijvoorbeeld "img/boots.jpg" of "https://picsum.photos/id/27/3264/1836". |
-| ratio     | Nee | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3", "16x9", en "21x9". Als de verhouding niet is opgegeven dan wordt de verhouding van het originele bestand gebruikt. |
+| ratio     | Nee | Verhouding van het plaatje, de mogelijke waarden zijn "1x1", "4x3", "16x9", en "21x9". Indien opgegeven wordt het plaatje bijgesneden en verkleind om te voldoen aan de ratio. Als de verhouding niet is opgegeven dan wordt de verhouding van het originele bestand gebruikt. |
 | class     | Nee | Optionele `class` waarde van het `img` element, bijvoorbeeld "rounded". |
 | title     | Nee | Optionele beschrijving van het plaatje. |
 | caption   | Nee | Optioneel onderschrift van het plaatje. |

layouts/partials/image.html

@@ -5,8 +5,8 @@
     wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
     partial supports the following arguments:
     "url":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
-                    Instead, the original aspect ratio of the image is preserved.
+                    resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
     "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
@@ -62,12 +62,27 @@
         {{ $xxlDim = printf "1400x%d" (int (math.Round (mul (div 1400.0 $img.Width) $img.Height))) -}}
     {{ end -}}
 
-    {{- $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
+    {{- $sm := "" -}}
-    {{ $md := ($img.Fill (printf "%s webp" $mdDim)) -}}
+    {{ $md := "" -}}
-    {{ $lg := ($img.Fill (printf "%s webp" $lgDim)) -}}
+    {{ $lg := "" -}}
-    {{ $xl := ($img.Fill (printf "%s webp" $xlDim)) -}}
+    {{ $xl := "" -}}
-    {{ $xxl := ($img.Fill (printf "%s webp" $xxlDim)) -}}
+    {{ $xxl := "" -}}
-    {{ $fallback := ($img.Fill (printf "%s jpg" $xxlDim)) -}}
+    {{ $fallback := "" -}}
+    {{ if $ratio }}
+        {{- $sm = ($img.Fill (printf "%s webp" $smDim)) -}}
+        {{ $md = ($img.Fill (printf "%s webp" $mdDim)) -}}
+        {{ $lg = ($img.Fill (printf "%s webp" $lgDim)) -}}
+        {{ $xl = ($img.Fill (printf "%s webp" $xlDim)) -}}
+        {{ $xxl = ($img.Fill (printf "%s webp" $xxlDim)) -}}
+        {{ $fallback = ($img.Fill (printf "%s jpg" $xxlDim)) -}}
+    {{ else }}
+        {{- $sm = ($img.Fit (printf "%s webp" $smDim)) -}}
+        {{ $md = ($img.Fit (printf "%s webp" $mdDim)) -}}
+        {{ $lg = ($img.Fit (printf "%s webp" $lgDim)) -}}
+        {{ $xl = ($img.Fit (printf "%s webp" $xlDim)) -}}
+        {{ $xxl = ($img.Fit (printf "%s webp" $xxlDim)) -}}
+        {{ $fallback = ($img.Fit (printf "%s jpg" $xxlDim)) -}}
+    {{ end}}
 
     {{- with $caption -}}
         <figure class="figure">

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@markdumay/hugo-theme-hinode",
-      "version": "0.7.4",
+      "version": "0.7.5",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {