Merge pull request #84 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/en/blog/rich-content.md

@@ -3,7 +3,7 @@ author: "Hugo Authors"
 title: "Rich Content"
 date: 2021-07-13
 description: "A brief description of Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
 photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>

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. |

content/nl/blog/rich-content.md

@@ -4,7 +4,7 @@ slug: "multimedia"
 title: "Multimedia"
 date: 2021-07-13
 description: "Een overzicht van enkele Hugo Shortcodes"
-tags: ["shortcodes", "privacy"]
+tags: ["shortcode", "privacy"]
 thumbnail: img/flowers.jpg # https://picsum.photos/id/106/2592/1728
 photoCredits: <a href="https://unsplash.com/@flutterhappy">Arvee Marie</a>
 photoSource: <a href="https://unsplash.com/photos/YnfGtpt2gf4">Unsplash</a>

layouts/partials/assets/blog-card.html

@@ -10,8 +10,8 @@
                 {{- partial "utilities/date.html" (dict "date" .Date "format" "long") -}}
                 • {{ .ReadingTime }} {{ i18n "minutesShort" }} {{ i18n "read" }}
                 {{ if isset .Params "tags" -}}
-                    {{ range first 1 .Params.tags -}}
-                        &bull; <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>
+                    {{ range first 1 (.GetTerms "tags") -}}
+                        &bull; <a href="{{ (path.Join .Page.RelPermalink) | relURL }}" class="text-decoration-none text-primary" aria-label="Tag: {{ .LinkTitle }}">{{ .LinkTitle }}</a>
                     {{ end -}}
                 {{ end -}}
             </small>

layouts/partials/assets/project-card.html

@@ -9,9 +9,9 @@
             
                 {{ if isset .Params "tags" }}
                     <small class="text-muted text-uppercase">
-                        {{ range $index, $element := .Params.tags }}
+                        {{ range $index, $element := (.GetTerms "tags") }}
                             {{ if gt $index 0 }}&bull; {{ end }}
-                            <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-decoration-none text-primary" aria-label="Tag: {{ . }}">{{ . }}</a>
+                            <a href="{{ (path.Join .Page.RelPermalink) | relURL }}" class="text-decoration-none text-primary" aria-label="Tag: {{ .LinkTitle }}">{{ .LinkTitle }}</a>
                         {{ end }}
                     </small>
                 {{ end }}            

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.
-                    Instead, the original aspect ratio of the image is preserved.
+    "ratio":        Optional 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.
     "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)) -}}
-    {{ $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)) -}}
+    {{- $sm := "" -}}
+    {{ $md := "" -}}
+    {{ $lg := "" -}}
+    {{ $xl := "" -}}
+    {{ $xxl := "" -}}
+    {{ $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">

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/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.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@markdumay/hugo-theme-hinode",
-      "version": "0.7.2",
+      "version": "0.7.6",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {

package.json

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