images: allow option to apply image effects globally #623

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 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#further-image-formatting#lightbox)
+  - [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)

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 effects like sizing, shadow, border and alignment]({{%relref "cont/markdown#image-effects" %}})
-  - [Image lightbox]({{%relref "cont/markdown#further-image-formatting#lightbox" %}})
+  - [Image lightbox]({{%relref "cont/markdown#lightbox" %}})
 - **Shortcodes galore**
   - [Display files attached to page bundles]({{%relref "shortcodes/attachments" %}})
   - [Marker badges]({{%relref "shortcodes/badge" %}})

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

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.
 

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"}
+<img src="https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true" alt="Minion" class="bg-white border nolightbox noshadow">
+````
+
+
+## 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 %}}

exampleSite/content/cont/imageeffects.pir.md

@@ -0,0 +1,5 @@
++++
+title = "Image Effects"
+weight = 4
++++
+{{< piratify >}}

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
 

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
 +++
 ```
 

layouts/partials/shortcodes/image.html

@@ -6,8 +6,13 @@
 {{- $url := .url }}
 {{- $title := .title }}
 {{- $alt := .alt }}
-{{- $classes := slice }}
+{{- $effects := dict "border" false "lightbox" true "shadow" false }}
-{{- $lightbox := true }}
+{{- 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 }}
@@ -26,13 +31,27 @@
   {{- end }}
 {{- end }}
 {{- if $dest_url.RawQuery }}
-	{{- if $dest_url.Query.Get "classes" }}
+  {{- if $dest_url.Query.Has "classes" }}
-		{{- $classes = $classes | append (split ($dest_url.Query.Get "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 }}
-	{{- $lightbox = and (ne ($dest_url.Query.Get "lightbox") "false") (ne ($dest_url.Query.Get "featherlight") "false") }}
   {{- with $dest_url.Query.Get "height" }}
     {{ $height = . }}
   {{- end }}
@@ -40,14 +59,19 @@
     {{ $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 }}
 <a href="#image-{{ $id }}" class="lightbox-link">
 {{- end }}
 <img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }}{{ if len ($classes) }} class="{{ delimit $classes " " }}"{{ end }} style="height: {{ $height }}; width: {{ $width }};" loading="lazy">
-{{- if $lightbox }}
+{{- if $effects.lightbox }}
 </a>
-<a href="javascript:history.back();" class="lightbox" id="image-{{ $id }}">
+<a href="javascript:history.back();" class="lightbox-back" id="image-{{ $id }}">
 <img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="lightbox-image" loading="lazy">
 </a>
 {{- end }}

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); */
 	}
 

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;

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);
 }
 

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' );
 	}