diff options
| author | Francesco Tomaselli <tomaselli.fr@gmail.com> | 2024-11-18 22:14:35 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-11-18 22:14:35 +0100 |
| commit | bd2e58d4b89d5f641af339636f6d2c78210fa1dd (patch) | |
| tree | 80978b106d16221e1cc7da3a1f857c808c634d53 | |
| parent | f025f972e0b1ffb8df288be632bb3c34a58b66e8 (diff) | |
| parent | 97936e3070c707fd2db6aa1c3db092aa159563f2 (diff) | |
Merge pull request #48 from runofthemillgeek/feat/img-width-height-attrs
Add width and height attrs for local images
| -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> |