diff options
| -rw-r--r-- | assets/css/main.css | 17 | ||||
| -rw-r--r-- | assets/css/vars.css | 1 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-image.html | 7 |
3 files changed, 21 insertions, 4 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index d95ca04..57d9066 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -394,6 +394,20 @@ footer a { /* images */ +figure > div { + width: 100%; + display: flex; + justify-content: center; +} + +figure img { + max-width: 100%; + max-height: var(--figure-img-max-height); + width: auto; + height: auto; + margin-inline: auto; +} + .dark .img-light { display: none !important; } @@ -419,6 +433,7 @@ footer a { } .img-full img { + height: auto; width: 100vw !important; max-width: 100vw !important; } @@ -527,4 +542,4 @@ blockquote { blockquote p { margin-left: 1rem; margin-right: 1rem; -}
\ No newline at end of file +} diff --git a/assets/css/vars.css b/assets/css/vars.css index 837acf7..9a6584f 100644 --- a/assets/css/vars.css +++ b/assets/css/vars.css @@ -53,6 +53,7 @@ /* Content */ --content-height: calc(100vh - var(--footer-height)); + --figure-img-max-height: 500px; /* Tables */ --table-cell-padding: .5rem; diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 0930316..679fd76 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -5,9 +5,9 @@ https://github.com/gohugoio/hugo/blob/89bd02/tpl/tplimpl/embedded/templates/_def */}} {{- $u := urls.Parse .Destination -}} {{- $url := $u.String -}} +{{- $imgResource := .Page.Scratch.Get "typoNilVariable" -}} {{- if not $u.IsAbs -}} {{- $path := strings.TrimPrefix "./" $u.Path -}} - {{- $imgResource := .Page.Scratch.Get "typoNilVariable" -}} {{/* Check if this is a page bundle or standalone page */}} {{- if .PageInner.Resources -}} {{- $imgResource = .PageInner.Resources.Get $path -}} @@ -42,11 +42,12 @@ and build the img class string as "img-tag1 img-tag2 ..." {{ $classes = printf "%s img-%s" $classes $tag}} {{ end }} + {{/* Use the computed classes on the rendered figure */}} <figure class="{{ $classes }}"> <div> - <img loading="lazy" alt="{{ .Text }}" src="{{ $url }}"> + <img loading="lazy" alt="{{ .Text }}" src="{{ $url }}" {{ with $imgResource }}width="{{ .Width }}px" height="{{ .Height }}px"{{ end }}> </div> {{ with .Title }} @@ -54,4 +55,4 @@ and build the img class string as "img-tag1 img-tag2 ..." <figcaption> {{ . | markdownify}} </figcaption> </div> {{ end }} -</figure>
\ No newline at end of file +</figure> |