From 151c31e1423be6864947e0becf26d1f38f64d61b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Fri, 25 Aug 2023 19:09:50 +0200 Subject: [PATCH] images: allow option to apply image effects globally #623 --- README.md | 4 +- exampleSite/content/_index.en.md | 4 +- .../content/basics/configuration/_index.en.md | 5 ++ .../content/basics/migration/_index.en.md | 4 +- exampleSite/content/cont/imageeffects.en.md | 61 ++++++++++++++++ exampleSite/content/cont/imageeffects.pir.md | 5 ++ exampleSite/content/cont/markdown.en.md | 4 +- exampleSite/content/cont/pages/_index.en.md | 5 ++ layouts/partials/shortcodes/image.html | 72 ++++++++++++------- static/css/ie.css | 2 +- static/css/theme.css | 6 +- static/css/variant.css | 2 +- static/js/theme.js | 4 +- 13 files changed, 140 insertions(+), 38 deletions(-) create mode 100644 exampleSite/content/cont/imageeffects.en.md create mode 100644 exampleSite/content/cont/imageeffects.pir.md diff --git a/README.md b/README.md index e5302505ea..75f5d68c80 100644 --- a/README.md +++ b/README.md @@ -42,8 +42,8 @@ The Relearn theme is a fork of the great [Learn theme](https://github.com/matcor - [Search support for mixed language content](https://mcshelby.github.io/hugo-theme-relearn/cont/i18n#search) - **Additional Markdown features** - [Support for GFM (GitHub Flavored Markdown](https://mcshelby.github.io/hugo-theme-relearn/cont/markdown) - - [Image styling like sizing, shadow, border and alignment](https://mcshelby.github.io/hugo-theme-relearn/cont/markdown#further-image-formatting) - - [Image lightbox](https://mcshelby.github.io/hugo-theme-relearn/cont/markdown#further-image-formatting#lightbox) + - [Image effects like sizing, shadow, border and alignment](https://mcshelby.github.io/hugo-theme-relearn/cont/markdown#image-effects) + - [Image lightbox](https://mcshelby.github.io/hugo-theme-relearn/cont/markdown#lightbox) - **Shortcodes galore** - [Display files attached to page bundles](https://mcshelby.github.io/hugo-theme-relearn/shortcodes/attachments) - [Marker badges](https://mcshelby.github.io/hugo-theme-relearn/shortcodes/badge) diff --git a/exampleSite/content/_index.en.md b/exampleSite/content/_index.en.md index f045a02629..7547a35398 100644 --- a/exampleSite/content/_index.en.md +++ b/exampleSite/content/_index.en.md @@ -45,8 +45,8 @@ The theme is a fork of the great [Learn theme](https://github.com/matcornic/hugo - [Search support for mixed language content]({{%relref "cont/i18n#search" %}}) - **Additional Markdown features** - [Support for GFM (GitHub Flavored Markdown]({{%relref "cont/markdown" %}}) - - [Image styling like sizing, shadow, border and alignment]({{%relref "cont/markdown#further-image-formatting" %}}) - - [Image lightbox]({{%relref "cont/markdown#further-image-formatting#lightbox" %}}) + - [Image effects like sizing, shadow, border and alignment]({{%relref "cont/markdown#image-effects" %}}) + - [Image lightbox]({{%relref "cont/markdown#lightbox" %}}) - **Shortcodes galore** - [Display files attached to page bundles]({{%relref "shortcodes/attachments" %}}) - [Marker badges]({{%relref "shortcodes/badge" %}}) diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md index 98832bd2cb..f0092e1637 100644 --- a/exampleSite/content/basics/configuration/_index.en.md +++ b/exampleSite/content/basics/configuration/_index.en.md @@ -91,6 +91,11 @@ Note that some of these parameters are explained in details in other sections of disableExplicitIndexURLs = false # For external links you can define how they are opened in your browser; this setting will only be applied to the content area but not the shortcut menu externalLinkTarget = "_blank" + # Override default values for image effects, you can even add your own arbitrary effects to the list + [params.imageEffects] + border = false + lightbox = true + shadow = false ``` ## Serving your page from a subfolder diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 60dec87f5b..1e47636626 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -41,6 +41,8 @@ This document shows you what's new in the latest release. For a detailed list of For existing variants nothing has changed visually. +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The default values for the [image effects]({{% relref "cont/markdown#image-effects" %}}) are [now configurable]({{% relref "cont/imageeffects" %}}) for your whole site via `config.toml` or for each page thru frontmatter. + --- ## 5.19.0 (2023-08-12) {#5190} @@ -313,7 +315,7 @@ This document shows you what's new in the latest release. For a detailed list of - {{% badge style="note" title=" " %}}Change{{% /badge %}} The way images are processed has changed. Now images are lazy loaded by default which speeds up page load on slow networks and/or big pages and also the print preview. - For that the JavaScript code to handle the [lightbox and image effects]({{% relref "cont/markdown#further-image-formatting" %}}) on the client side was removed in favour for static generation of those effects on the server. + For that the JavaScript code to handle the [lightbox and image effects]({{% relref "cont/markdown#image-effects" %}}) on the client side was removed in favour for static generation of those effects on the server. If you have used HTML directly in your Markdown files, this now has the downside that it doesn't respect the effect query parameter anymore. In this case you have to migrate all your HTML `img` URLs manually to the respective HTML attributes. diff --git a/exampleSite/content/cont/imageeffects.en.md b/exampleSite/content/cont/imageeffects.en.md new file mode 100644 index 0000000000..7a9fae0606 --- /dev/null +++ b/exampleSite/content/cont/imageeffects.en.md @@ -0,0 +1,61 @@ ++++ +title = "Image Effects" +weight = 4 ++++ + +The theme supports non-standard [image effects]({{% relref "cont/markdown#image-effects" %}}). + +As described, you can add this to the URL query parameter, but this may be cumbersome to do it consistently for the whole page. + +Instead, you can configure the defaults in your `config.toml` aswell as overriding these default in the pages frontmatter. + +Explicitly set URL query parameter will override the defaults in effect for a page. + +Without any settings in your `config.toml` this defaults to + +````toml {title="config.toml"} +[params] + [params.imageEffects] + border = false + lightbox = true + shadow = false +```` + +This can be overridden in a pages frontmatter by eg. + +````toml {title="frontmatter"} ++++ +[imageEffects] + border = true ++++ +```` + +Or by explicitly override settings by URL query parameter + +````markdown {title="URL"} +![Minion](https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true) +```` + +The settings applied to the above image would be + +````toml {title="Result"} + border = true + lightbox = false + shadow = false + bg-white = true +```` + +This ends up in the following HTML where the parameter are converted to CSS classes. + +````html {title="HTML"} +Minion +```` + + +## Extending + +As you can see in the above example, the `bg-white` parameter is not initially supported in the themes default settings. Nevertheless you are free to define arbitrary parameter by just adding them to the URL query parameter or set them in your `config.toml` or pages frontmatter. + +{{% notice note %}} +If no extended parameter like `bg-white` in the example is set on the URL, a `classes="nobg-white"` in the HTML will only be generated if a default value was set in the `config.toml` or pages frontmatter. +{{% /notice %}} diff --git a/exampleSite/content/cont/imageeffects.pir.md b/exampleSite/content/cont/imageeffects.pir.md new file mode 100644 index 0000000000..a824ed00ed --- /dev/null +++ b/exampleSite/content/cont/imageeffects.pir.md @@ -0,0 +1,5 @@ ++++ +title = "Image Effects" +weight = 4 ++++ +{{< piratify >}} \ No newline at end of file diff --git a/exampleSite/content/cont/markdown.en.md b/exampleSite/content/cont/markdown.en.md index dee0c5e4cc..78480262a6 100644 --- a/exampleSite/content/cont/markdown.en.md +++ b/exampleSite/content/cont/markdown.en.md @@ -564,9 +564,9 @@ Images can also be linked by reference ID to later define the URL location. This [laforge]: https://octodex.github.com/images/trekkie.jpg?width=20vw "Geordi La Forge" {{% /notice %}} -### Further Image Formatting +### Image Effects -This theme allows additional non-standard formatting by setting query parameter at the end of the image URL. +This theme allows additional non-standard formatting by setting query parameter at the end of the image URL. The default [behavior is configurable]({{% relref "cont/imageeffects" %}}) thru your `config.toml` or frontmatter parameter. #### Resizing diff --git a/exampleSite/content/cont/pages/_index.en.md b/exampleSite/content/cont/pages/_index.en.md index 4e536a61b1..6e49c7e0dd 100644 --- a/exampleSite/content/cont/pages/_index.en.md +++ b/exampleSite/content/cont/pages/_index.en.md @@ -82,6 +82,11 @@ hidden = false LastModifierDisplayName = "" # Email of this page modifier. If set with LastModifierDisplayName, it will be displayed in the footer LastModifierEmail = "" +# Override default values for image effects, you can even add your own arbitrary effects to the list +[params.imageEffects] + border = false + lightbox = true + shadow = false +++ ``` diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html index 960760d591..96248b4348 100644 --- a/layouts/partials/shortcodes/image.html +++ b/layouts/partials/shortcodes/image.html @@ -6,48 +6,72 @@ {{- $url := .url }} {{- $title := .title }} {{- $alt := .alt }} -{{- $classes := slice }} -{{- $lightbox := true }} +{{- $effects := dict "border" false "lightbox" true "shadow" false }} +{{- if $page.Site.Params.imageeffects }} + {{- $effects = merge $effects $page.Site.Params.imageeffects }} +{{- end }} +{{- if $page.Params.imageEffects }} + {{- $effects = merge $effects $page.Params.imageEffects }} +{{- end }} {{- $height := "auto" }} {{- $width := "auto" }} {{- $dest_url := urls.Parse $url }} {{- $dest_path := $dest_url.Path }} {{- $image := $page.Resources.GetMatch $dest_path }} {{- if not $image }} - {{- $image = .Resources.GetMatch $dest_path }} + {{- $image = .Resources.GetMatch $dest_path }} {{- end }} {{- if not $image }} - {{- $image = .Resources.GetRemote $url }} + {{- $image = .Resources.GetRemote $url }} {{- end }} {{- if $image }} - {{- $url = $image.RelPermalink }} - {{- if $dest_url.RawQuery }} - {{- $url = printf "%s?%s" $url $dest_url.RawQuery }} - {{- end }} + {{- $url = $image.RelPermalink }} + {{- if $dest_url.RawQuery }} + {{- $url = printf "%s?%s" $url $dest_url.RawQuery }} + {{- end }} {{- end }} {{- if $dest_url.RawQuery }} - {{- if $dest_url.Query.Get "classes" }} - {{- $classes = $classes | append (split ($dest_url.Query.Get "classes") ",") }} - {{- end }} - {{- if $dest_url.Query.Has "featherlight" }} - {{- warnf "%q: DEPRECATED usage of 'featherlight' image CSS class found, use 'lightbox' instead; see https://mcshelby.github.io/hugo-theme-relearn/basics/migration/#5110" $page.File.Path }} - {{- end }} - {{- $lightbox = and (ne ($dest_url.Query.Get "lightbox") "false") (ne ($dest_url.Query.Get "featherlight") "false") }} - {{- with $dest_url.Query.Get "height" }} - {{ $height = . }} - {{- end }} - {{- with $dest_url.Query.Get "width" }} - {{ $width = . }} - {{- end }} + {{- if $dest_url.Query.Has "classes" }} + {{- $classes := slice | append (split ($dest_url.Query.Get "classes") ",") }} + {{- range $classes }} + {{- $k := . }} + {{- $v := true }} + {{- if strings.HasPrefix $k "no" }} + {{- $k := strings.TrimPrefix "no" $k }} + {{- $v := false }} + {{- end }} + {{- $effects = merge $effects (dict $k $v) }} + {{- end }} + {{- end }} + {{- if $dest_url.Query.Has "featherlight" }} + {{- warnf "%q: DEPRECATED usage of 'featherlight' image CSS class found, use 'lightbox' instead; see https://mcshelby.github.io/hugo-theme-relearn/basics/migration/#5110" $page.File.Path }} + {{- $effects = merge $effects (dict "lightbox" (ne ($dest_url.Query.Get "featherlight") "false")) }} + {{- end }} + {{- range $k, $v := $effects }} + {{- if $dest_url.Query.Has $k }} + {{- $effects = merge $effects (dict $k (ne ($dest_url.Query.Get $k) "false")) }} + {{- end }} + {{- end }} + {{- with $dest_url.Query.Get "height" }} + {{ $height = . }} + {{- end }} + {{- with $dest_url.Query.Get "width" }} + {{ $width = . }} + {{- end }} +{{- end }} +{{- $classes := slice }} +{{- range $k, $v := $effects }} + {{- $c := printf "%s%s" (cond $v "" "no") $k }} + {{- $classes = $classes | append $c }} {{- end }} {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }} -{{- if $lightbox }} +{{- if $effects.lightbox }} {{- end }} {{ $alt }} -{{- if $lightbox }} +{{- if $effects.lightbox }} - + {{ $alt }} {{- end }} \ No newline at end of file diff --git a/static/css/ie.css b/static/css/ie.css index 1baf914dc9..d5eea23c27 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -521,7 +521,7 @@ background-color: rgba( 255, 255, 255, 1 ); /* var(--INTERNAL-MAIN-BG-color) */ } - .lightbox img{ + .lightbox-back img{ background-color: rgba( 255, 255, 255, 1 ) /* var(--INTERNAL-MAIN-BG-color); */ } diff --git a/static/css/theme.css b/static/css/theme.css index a1287b1e7e..eb103e5626 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1780,7 +1780,7 @@ article ul > li > input[type="checkbox"]:checked::before { } /* CSS Lightbox https://codepen.io/gschier/pen/kyRXVx */ -.lightbox { +.lightbox-back { align-items: center; background: rgba( 0, 0, 0, .8 ); bottom: 0; @@ -1795,11 +1795,11 @@ article ul > li > input[type="checkbox"]:checked::before { z-index: 1999; } -.lightbox:target { +.lightbox-back:target { display: flex; } -.lightbox img { +.lightbox-back img { max-height: 95%; max-width: 95%; overflow: auto; diff --git a/static/css/variant.css b/static/css/variant.css index f15986ce95..26387dc064 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -245,7 +245,7 @@ table { background-color: var(--INTERNAL-MAIN-BG-color); } -.lightbox img{ +.lightbox-back img{ background-color: var(--INTERNAL-MAIN-BG-color); } diff --git a/static/js/theme.js b/static/js/theme.js index f442d3d06e..c188ff024e 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -987,7 +987,7 @@ function initSwipeHandler(){ } function initImage(){ - document.querySelectorAll( '.lightbox' ).forEach( function(e){ e.addEventListener("keydown", imageEscapeHandler); }, false); + document.querySelectorAll( '.lightbox-back' ).forEach( function(e){ e.addEventListener("keydown", imageEscapeHandler); }, false); } function clearHistory() { @@ -1098,7 +1098,7 @@ function mark() { topbarLinks[i].classList.add( 'highlight' ); } - var bodyInnerLinks = document.querySelectorAll( '#body-inner a:not(.lightbox-link):not(.btn):not(.lightbox)' ); + var bodyInnerLinks = document.querySelectorAll( '#body-inner a:not(.lightbox-link):not(.btn):not(.lightbox-back)' ); for( var i = 0; i < bodyInnerLinks.length; i++ ){ bodyInnerLinks[i].classList.add( 'highlight' ); }