Merge pull request #81 from markdumay/develop

Develop

.markdownlint-cli2.jsonc

@@ -5,7 +5,8 @@
     "MD024": false,
     "MD026": false,
     "MD033": false,
-    "MD034": false
+    "MD034": false,
+    "MD053": false
   },
   "ignores": ["node_modules", "CHANGELOG.md"]
 }

content/en/blog/code-highlighting.md

@@ -30,9 +30,9 @@ Use code fencing to highlight the syntax of a specific language.
 </div>
 ```
 
-## Highlight Partial
+## Highlight Shortcode
 
-Use the `highlight` partial to customize the layout of a specific code block.
+Use the `highlight` shortcode to customize the layout of a specific code block.
 
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 // GetTitleFunc returns a func that can be used to transform a string to
@@ -56,129 +56,3 @@ func GetTitleFunc(style string) func(s string) string {
   }
 }
 {{< / highlight >}}
-
-## Command Prompt Shortcode
-
-The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages.
-
-### Bash (default shell)
-
-Use the `command` shortcode to generate a block with a default bash command prompt.
-
-```html
-{{%/* command */%}}
-export MY_VAR=123
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command %}}
-export MY_VAR=123
-{{% /command %}}
-
-Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
-
-```html
-{{%/* command user="user" host="localhost" */%}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command user="user" host="localhost" %}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{% /command %}}
-
-### PowerShell
-
-Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
-
-```html
-{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{% /command %}}
-
-### SQL
-
-Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
-
-```html
-{{%/* command prompt="mysql>" shell="sql" */%}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{%/* /command */%}}
-```
-
-The result looks like this:
-{{% command prompt="mysql>" shell="sql" %}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{% /command %}}

content/en/blog/custom-shortcodes.md

@@ -46,14 +46,148 @@ The result looks like this:
   {{< img src="img/dunes.jpg" caption="slide 3" >}}
 {{< /carousel >}}
 
+## Command Prompt Shortcode
+
+The `command` shortcode generates terminal output for either `bash`, `powershell`, or `sql` shell languages. The shortcode supports the following arguments:
+
+| Argument  | Required | Description |
+|-----------|----------|-------------|
+| user      | No | Optional user to add to the prompt, e.g. "user". |
+| host      | No | Optional host to add to the prompt, e.g. "localhost". |
+| prompt    | No | Optional prompt override, e.g. "PS C:\Users\User>". |
+| shell     | No | Type of shell, either "bash" (default), "powershell", or "sql". |
+{.table}
+
+### Bash (default shell)
+
+Use the `command` shortcode to generate a block with a default bash command prompt.
+
+```html
+{{%/* command */%}}
+export MY_VAR=123
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command %}}
+export MY_VAR=123
+{{% /command %}}
+
+Specify `user` and `host` to add the user context to the prompt. In addition, use `(out)` to specify an output line and use `\` to denote a line continuation.
+
+```html
+{{%/* command user="user" host="localhost" */%}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command user="user" host="localhost" %}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{% /command %}}
+
+### PowerShell
+
+Set the `shell` argument to `powershell` to generate a PowerShell terminal. Override the `prompt` to add a directory if needed. Use the backtick `` ` `` symbol to denote a line continuation.
+
+```html
+{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{% /command %}}
+
+### SQL
+
+Set the `shell` argument to `sql` to generate a SQL terminal. Use the `(con)` suffix to denote a line continuation.
+
+```html
+{{%/* command prompt="mysql>" shell="sql" */%}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{%/* /command */%}}
+```
+
+The result looks like this:
+{{% command prompt="mysql>" shell="sql" %}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{% /command %}}
+
 ## Image Shortcode
 
-Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set][mozilla_image] to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. The shortcode supports the following arguments:
+Use the `image` shortcode to display a responsive image with a specific aspect ratio. The source link can refer to either an image available in the `/assets/img` folder of your site or a public web location. The shortcode renders the image as a so-called [image set][mozilla_image] to optimize the image for different screen sizes and resolutions. Behind the scenes, Hugo renders the images in `WebP` format and stores them in a local folder (`resources` or `public`). The images are processed using the quality setting specified in the `[imaging]` section of the main [config file][hugo_imaging] (defaults to 75). Supported image types are `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp`, and `.webp`. A fallback image of type `.jpeg` is provided for older browsers.The shortcode supports the following arguments:
 
 | 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  | Aspect ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9". |
+| 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. |
 | 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. |
@@ -68,5 +202,5 @@ As an example, the following shortcode displays an image with rounded corners an
 The result looks like this:
 {{< image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded">}}
 
-<!-- MARKDOWN MAINTAINED LINKS -->
 [mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

content/nl/blog/code-highlighting.md

@@ -32,9 +32,9 @@ Gebruik code fencing om de syntax voor een specifieke taal te markeren.
 </div>
 ```
 
-## Highlight Partial
+## Highlight Shortcode
 
-Gebruik de `highlight` partial om de lay-out van een taalfragment aan te passen.
+Gebruik de `highlight` shortcode om de lay-out van een taalfragment aan te passen.
 
 {{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
 // GetTitleFunc returns a func that can be used to transform a string to
@@ -58,129 +58,3 @@ func GetTitleFunc(style string) func(s string) string {
   }
 }
 {{< / highlight >}}
-
-## Command Prompt Shortcode
-
-De `command` shortcode simuleert een terminal voor `bash`, `powershell` of `sql` shell talen.
-
-### Bash (standaard shell)
-
-Gebruik de `command` shortcode om een bash terminal te simuleren.
-
-```html
-{{%/* command */%}}
-export MY_VAR=123
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command %}}
-export MY_VAR=123
-{{% /command %}}
-
-Gebruik `user` en `host` om de gebruikerscontext mee te geven aan de prompt. Maak daarnaast gebruik van `(out)` om output aan te geven, met `\` als markering van een bijbehorende regel.
-
-```html
-{{%/* command user="user" host="localhost" */%}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command user="user" host="localhost" %}}
-export MY_VAR=123
-echo "hello"
-(out)hello
-echo one \
-two \
-three
-(out)one two three
-echo "goodbye"
-(out)goodbye
-{{% /command %}}
-
-### PowerShell
-
-Geef `powershell` op als waarde voor het argument `shell` om een PowerShell terminal te simuleren. Je kunt `prompt` aanpassen om een eventule directory aan te geven. Het backtick `` ` `` symbool geeft aan dat het commando doorgaat op de volgende regel.
-
-```html
-{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
-Write-Host `
-'Hello' `
-'from' `
-'PowerShell!'
-(out)Hello from PowerShell!
-Write-Host 'Goodbye from PowerShell!'
-(out)Goodbye from PowerShell!
-{{% /command %}}
-
-### SQL
-
-Geef `sql` op als waarde voor het argument `shell` om een SQL terminal te simuleren. Gebruik `(con)` als markering van een bijbehorende regel.
-
-```html
-{{%/* command prompt="mysql>" shell="sql" */%}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{%/* /command */%}}
-```
-
-Het resultaat ziet er als volgt uit:
-{{% command prompt="mysql>" shell="sql" %}}
-set @my_var = 'foo';
-set @my_other_var = 'bar';
-CREATE TABLE people ((con)
-first_name VARCHAR(30) NOT NULL,(con)
-last_name VARCHAR(30) NOT NULL(con)
-);
-(out)Query OK, 0 rows affected (0.09 sec)
-insert into people(con)
-values ('John', 'Doe');
-(out)Query OK, 1 row affected (0.02 sec)
-select *(con)
-from people(con)
-order by last_name;
-(out)+------------+-----------+
-(out)| first_name | last_name |
-(out)+------------+-----------+
-(out)| John       | Doe       |
-(out)+------------+-----------+
-(out)1 row in set (0.00 sec)
-{{% /command %}}

content/nl/blog/custom-shortcodes.md

@@ -47,14 +47,148 @@ Het resultaat ziet er als volgt uit:
   {{< img src="img/dunes.jpg" caption="slide 3" >}}
 {{< /carousel >}}
 
+## Command Prompt Shortcode
+
+De `command` shortcode simuleert een terminal voor `bash`, `powershell` of `sql` shell talen. De shortcode ondersteunt de volgende parameters:
+
+| Parameter | Verplicht | Toelichting |
+|-----------|----------|-------------|
+| user      | Nee | Optionele gebruiker om toe te voegen aan de prompt, bijvoorbeeld "user". |
+| host      | Nee | Optionele omgeving om toe te voegen aan de prompt, bijvoorbeeld "localhost". |
+| prompt    | Nee | Optionele vervanging van de prompt, bijvoorbeeld "PS C:\Users\User>". |
+| shell     | Nee | Type shell, met ondersteuning voor "bash" (standaard), "powershell", of "sql". |
+{.table}
+
+### Bash (standaard shell)
+
+Gebruik de `command` shortcode om een bash terminal te simuleren.
+
+```html
+{{%/* command */%}}
+export MY_VAR=123
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command %}}
+export MY_VAR=123
+{{% /command %}}
+
+Gebruik `user` en `host` om de gebruikerscontext mee te geven aan de prompt. Maak daarnaast gebruik van `(out)` om output aan te geven, met `\` als markering van een bijbehorende regel.
+
+```html
+{{%/* command user="user" host="localhost" */%}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command user="user" host="localhost" %}}
+export MY_VAR=123
+echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+echo "goodbye"
+(out)goodbye
+{{% /command %}}
+
+### PowerShell
+
+Geef `powershell` op als waarde voor het argument `shell` om een PowerShell terminal te simuleren. Je kunt `prompt` aanpassen om een eventule directory aan te geven. Het backtick `` ` `` symbool geeft aan dat het commando doorgaat op de volgende regel.
+
+```html
+{{%/* command prompt="PS C:\Users\User>" shell="powershell" */%}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command prompt="PS C:\Users\User>" shell="powershell" %}}
+Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!
+{{% /command %}}
+
+### SQL
+
+Geef `sql` op als waarde voor het argument `shell` om een SQL terminal te simuleren. Gebruik `(con)` als markering van een bijbehorende regel.
+
+```html
+{{%/* command prompt="mysql>" shell="sql" */%}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{%/* /command */%}}
+```
+
+Het resultaat ziet er als volgt uit:
+{{% command prompt="mysql>" shell="sql" %}}
+set @my_var = 'foo';
+set @my_other_var = 'bar';
+CREATE TABLE people ((con)
+first_name VARCHAR(30) NOT NULL,(con)
+last_name VARCHAR(30) NOT NULL(con)
+);
+(out)Query OK, 0 rows affected (0.09 sec)
+insert into people(con)
+values ('John', 'Doe');
+(out)Query OK, 1 row affected (0.02 sec)
+select *(con)
+from people(con)
+order by last_name;
+(out)+------------+-----------+
+(out)| first_name | last_name |
+(out)+------------+-----------+
+(out)| John       | Doe       |
+(out)+------------+-----------+
+(out)1 row in set (0.00 sec)
+{{% /command %}}
+
 ## Image Shortcode
 
-Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set][mozilla_image] om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. De shortcode ondersteunt de volgende parameters:
+Gebruik de `image` shortcode om een adaptief plaatje met een specifieke verhouding te tonen. De bron kan verwijzen naar een bestand in de `/assets/img` folder van je website of naar een publieke weblocatie. De shortcode genereert het plaatje als een zogenaamde [image set][mozilla_image] om deze te optimaliseren voor meerdere schermformaten en verschillende resoluties. Achter de schermen converteert Hugo de plaatjes naar een `WebP` bestandsformaat en slaat deze op in een lokale folder (`resources` of `public`). De kwaliteit van het plaatje kan worden opgegeven in de sectie `[imaging]` van de site [configuratie][hugo_imaging] (75 is de standaardwaarde). De geschikte bestandsformaten zijn `.png`, `.jpeg`, `.gif`, `.tiff`, `.bmp` en `.webp`. Een plaatje in het formaat `.jpeg` is beschikbaar voor oudere browsers. De shortcode ondersteunt de volgende parameters:
 
 | 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" (standaard), "16x9", en "21x9". |
+| 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. |
 | 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. |
@@ -69,5 +203,5 @@ Ter illustratie toont de volgende shortcode een plaatje met afgeronde hoeken en
 Het resultaat ziet er als volgt uit:
 {{< image src="img/flowers.jpg" ratio="21x9" caption="Onderschrift" class="rounded">}}
 
-<!-- MARKDOWN MAINTAINED LINKS -->
 [mozilla_image]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+[hugo_imaging]: https://gohugo.io/content-management/image-processing/#imaging-configuration

layouts/partials/image.html

@@ -5,15 +5,18 @@
     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":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+                    Instead, the original aspect ratio of the image is preserved.
     "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.
     "caption":      Optional figure caption.
 -->
 
-{{- $url := .url -}}
+
+{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" }}
 {{ $ratio := .ratio -}}
+{{ $url := .url -}}
 {{ $outerClass := .outerClass -}}
 {{ $innerClass := .innerClass -}}
 {{ $title := .title -}}
@@ -22,14 +25,18 @@
 
 {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
 {{ with $img -}}
-    <!-- default ratio 4x3 -->
+    {{ $smDim := "" -}}
-    {{ $smDim := "576x432" -}}
+    {{ $mdDim := "" -}}
-    {{ $mdDim := "768x576" -}}
+    {{ $lgDim := "" -}}
-    {{ $lgDim := "992x744" -}}
+    {{ $xlDim := "" -}}
-    {{ $xlDim := "1200x900" -}}
+    {{ $xxlDim := "" -}}
-    {{ $xxlDim := "1400x1050" -}}
+    {{ if eq $ratio "4x3" -}}
-
+        {{ $smDim = "576x432" -}}
-    {{ if eq $ratio "1x1" -}}
+        {{ $mdDim = "768x576" -}}
+        {{ $lgDim = "992x744" -}}
+        {{ $xlDim = "1200x900" -}}
+        {{ $xxlDim = "1400x1050" -}}
+    {{ else if eq $ratio "1x1" -}}
         {{ $smDim = "576x576" -}}
         {{ $mdDim = "768x768" -}}
         {{ $lgDim = "992x992" -}}
@@ -47,6 +54,12 @@
         {{ $lgDim = "992x425" -}}
         {{ $xlDim = "1200x514" -}}
         {{ $xxlDim = "1400x600" -}}
+    {{ else }}
+        {{ $smDim = printf "576x%d" (int (math.Round (mul (div 576.0 $img.Width) $img.Height))) -}}
+        {{ $mdDim = printf "768x%d" (int (math.Round (mul (div 768.0 $img.Width) $img.Height))) -}}
+        {{ $lgDim = printf "992x%d" (int (math.Round (mul (div 992.0 $img.Width) $img.Height))) -}}
+        {{ $xlDim = printf "1200x%d" (int (math.Round (mul (div 1200.0 $img.Width) $img.Height))) -}}
+        {{ $xxlDim = printf "1400x%d" (int (math.Round (mul (div 1400.0 $img.Width) $img.Height))) -}}
     {{ end -}}
 
     {{- $sm := ($img.Fill (printf "%s webp" $smDim)) -}}
@@ -72,7 +85,7 @@
             {{ $inner }}
         </figure>
     {{- else -}}
-        <div class="ratio ratio-{{ $ratio }} {{ $outerClass }}">
+        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }} {{ $outerClass }}">
             <img class="img-fluid {{ $innerClass }}"
                 srcset="
                     {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}

layouts/shortcodes/carousel.html

@@ -1,10 +1,11 @@
 <!-- 
     Displays a carousel of several responsive images (see the image shortcode for more details). Add inner <img> 
     elements to define individual image slides. The shortcode supports the following arguments:
-    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+                    Instead, the original aspect ratio of the image is preserved.
 -->
 
-{{ $ratio := "4x3" -}}
+{{ $ratio := "" -}}
 {{ $class := "" -}}
 {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
 {{ with .Get "class" }}{{ $class = . }}{{ end -}}

layouts/shortcodes/image.html

@@ -4,21 +4,28 @@
     section of the main config file (defaults to 75). A fallback image is provided for older browsers. The partial
     supports the following arguments:
     "src":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Leave empty to keep the
+                    original aspect ratio of the image.
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
 -->
 
-{{ if isset .Params "src" }}
+{{- if isset .Params "src" -}}
-    {{ $url := .Get "src" }}
+    {{ $url := .Get "src" -}}
-    {{ $ratio := "4x3" }}
+    {{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
-    {{ with .Get "ratio" }}{{ $ratio = . }}{{ end }}
+    {{ $ratio := .Get "ratio" -}}
-    {{ $class := .Get "class" }}
+    {{ if $ratio -}}
-    {{ $title := .Get "title" }}
+        {{ if not (in $validRatios $ratio) -}}
-    {{ $caption := .Get "caption" }}
+            {{ errorf "Invalid value for param 'ratio': %s" .Position -}}
+        {{ end -}}
+    {{ end -}}
     
-    {{ partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}}    
+    {{- $class := .Get "class" -}}
-{{ else }}
+    {{ $title := .Get "title" -}}
-    {{ errorf "Missing value for param 'src': %s" .Position }}
+    {{ $caption := .Get "caption" -}}
-{{ end }}
+
+    {{- partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}} 
+{{ else -}}
+    {{ errorf "Missing value for param 'src': %s" .Position -}}
+{{ end -}}

layouts/shortcodes/img.html

@@ -2,13 +2,14 @@
     Renders a carousel item with a responsive image (see the image shortcode for more details). The shortcode
     supports the following arguments:
     "src":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Bootstrap ratio of the image, either "1x1", "4x3" (default), "16x9", or "21x9".
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
+                    Instead, the original aspect ratio of the image is preserved.
     "caption":      Optional carousel slide caption.
 -->
 
 {{- $src := .Get "src" -}}
 {{ $caption := .Get "caption" -}}
-{{- $ratio := "4x3" -}}
+{{- $ratio := "" -}}
 {{ with .Parent -}}
     {{ with .Get "ratio" }}{{ $ratio = . }}{{ end -}}
 {{ else }}

package-lock.json

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

package.json

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