Merge pull request #1038 from gethinode/develop

Fix image portrait mode

assets/scss/components/_table.scss

@@ -7,6 +7,7 @@
 }
 
 .datatable-sorter {
+    padding-left: 0;
     padding-right: 1rem;
 }
 

config/postcss.config.js

@@ -27,6 +27,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
       './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
+      './_vendor/github.com/gethinode/mod-simple-datatables/dist/simple-datatables.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_modal.scss',

exampleSite/content/en/blog/bootstrap-elements.md

@@ -255,11 +255,12 @@ As an example, the following shortcodes show a square check, a brand logo, a cir
 
 ## Image
 
-As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+As an example, the following shortcode displays an image with rounded corners and a 4x3 aspect ratio in portrait mode.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
+{{</* image src="img/flowers.jpg" ratio="4x3" caption="Figure caption" class="rounded col-md-6"
+  portrait=true wrapper="text-center" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 

exampleSite/hugo_stats.json

@@ -145,6 +145,7 @@
       "col-md-2",
       "col-md-3",
       "col-md-4",
+      "col-md-6",
       "col-md-8",
       "col-md-9",
       "col-md-auto",

i18n/de.yaml

@@ -28,7 +28,7 @@
 - id: shareLink
   translation: "Diese Seite teilen per {{ . }}"
 - id: shareSystem
-  translation: "Betriebssystem"
+  translation: "System"
 - id: copyToClipboard
   translation: "In die Zwischenablage kopieren"
 - id: copiedToClipboard
@@ -52,7 +52,7 @@
 
 # Navigation
 - id: colorMode
-  translation: "Thema umschalten"
+  translation: "Modus umschalten"
 - id: colorLight
   translation: "Light"
 - id: colorDark
@@ -76,7 +76,7 @@
 
 # Sidebar
 - id: toggleSidebar
-  translation: "Menünavigation anzuzeigen oder auszublenden"
+  translation: "Menünavigation anzeigen oder ausblenden"
 
 # Feature
 - id: addedFeature

layouts/partials/assets/helpers/image-definition.html

@@ -31,6 +31,7 @@
     "page" $page
     "url" .url
     "ratio" $ratio
+    "portrait" $portrait
     "plain" $plain 
     "imageset" true
 ) }}

layouts/partials/assets/helpers/image-dimension.html

@@ -2,6 +2,7 @@
 {{- $page := .page -}}
 {{- $url := .url -}}
 {{- $ratio := .ratio -}}
+{{- $portrait := .portrait -}}
 {{- $height := .height -}}
 {{- $width := .width -}}
 {{- $plain := .plain | default false }}
@@ -84,10 +85,27 @@
 
 <!-- Derive image width and height -->
 {{ if not $plain }}
-    {{ with $dims }}
+    {{ if $portrait }}
-        {{ range $dim := (. | last 1) }}
+        {{ with $dims }}
-            {{ $width = (int (index (split $dim "x") 0)) }}
+            {{ $newDims := slice }}
-            {{ $height = (int (index (split $dim "x") 1)) }}
+            {{ range $dim := . }}
+                {{ $width = (int (index (split $dim "x") 1)) }}
+                {{ $height = (int (index (split $dim "x") 0)) }}
+                {{- $newDims = $newDims | append (printf "%dx%d" (int $width) $height ) -}}
+            {{ end }}
+            {{ $dims = $newDims }}
+        {{ end }}
+
+        {{ $newWidth := $height }}
+        {{ $newHeight := $width }}
+        {{ $width = $newWidth }}
+        {{ $height = $newHeight }}
+    {{ else  }}
+        {{ with $dims }}
+            {{ range $dim := (. | last 1) }}
+                {{ $width = (int (index (split $dim "x") 0)) }}
+                {{ $height = (int (index (split $dim "x") 1)) }}
+            {{ end }}
         {{ end }}
     {{ end }}
 {{ end }}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.14",
+  "version": "0.24.15",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.14",
+  "version": "0.24.15",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",