image: support for inlining image content #1019

assets/css/theme.css

@@ -443,6 +443,7 @@ article .R-taxonomy.tags a.term-link:hover:after {
   z-index: 70;
 }
 
+#R-body svg,
 #R-body img,
 #R-body figure > figcaption > h4,
 #R-body figure > figcaption > p,
@@ -454,25 +455,30 @@ article .R-taxonomy.tags a.term-link:hover:after {
   text-align: center;
 }
 
+#R-body svg:not(.lightbox-image).left,
 #R-body img:not(.lightbox-image).left {
   margin-left: 0;
 }
 
+#R-body svg:not(.lightbox-image).right,
 #R-body img:not(.lightbox-image).right {
   margin-right: 0;
 }
 
+#R-body svg:not(.lightbox-image).border,
 #R-body img:not(.lightbox-image).border,
 #R-body .video-container.border {
   background-clip: padding-box;
   border: 1px solid rgba(134, 134, 134, 0.333);
 }
 
+#R-body svg:not(.lightbox-image).shadow,
 #R-body img:not(.lightbox-image).shadow,
 #R-body .video-container.shadow {
   box-shadow: 0 10px 30px rgba(176, 176, 176, 0.666);
 }
 
+#R-body svg:not(.lightbox-image).inline,
 #R-body img:not(.lightbox-image).inline {
   display: inline;
   margin: 0;
@@ -549,13 +555,20 @@ article a:focus,
 article a:hover .copy-to-clipboard,
 article a:active .copy-to-clipboard,
 article a:focus .copy-to-clipboard,
+article a.lightbox-back:hover > svg:only-child:empty,
+article a.lightbox-back:active > svg:only-child:empty,
+article a.lightbox-back:focus > svg:only-child:empty,
 article a.lightbox-back:hover > img:only-child:empty,
 article a.lightbox-back:active > img:only-child:empty,
-article a.lightbox-back:focus > img:only-child:empty article .btn > button:hover,
+article a.lightbox-back:focus > img:only-child:empty,
+article .btn > button:hover,
 article .btn > button:active,
 article .btn > button:focus {
   outline: none;
 }
+article a:hover > svg:only-child:empty,
+article a:active > svg:only-child:empty,
+article a:focus > svg:only-child:empty,
 article a:hover > img:only-child:empty,
 article a:active > img:only-child:empty,
 article a:focus > img:only-child:empty {
@@ -2246,6 +2259,7 @@ article ul > li > input[type='checkbox']:checked::before {
   display: flex;
 }
 
+.lightbox-back svg,
 .lightbox-back img {
   background-color: var(--INTERNAL-MAIN-BG-color);
   max-height: 95%;

docs/config/_default/params.toml

@@ -460,6 +460,10 @@ image.errorlevel = 'warning'
 
 # Default: false
 imageEffects.border = true
+# Default: false
+imageEffects.dataurl = false
+# Default: false
+imageEffects.inlinecontent = false
 # Default: true
 imageEffects.lazy = true
 # Default: true

docs/content/authoring/frontmatter/reference/frontmatter.toml

@@ -280,6 +280,10 @@ image.errorlevel = ''
 
 # Default: false
 imageEffects.border = true
+# Default: false
+imageEffects.dataurl = false
+# Default: false
+imageEffects.inlinecontent = false
 # Default: true
 imageEffects.lazy = true
 # Default: true

docs/content/authoring/imageeffects.en.md

@@ -13,8 +13,10 @@ You can [define additional custom image effects and set defaults](configuration/
 The default image effects shipped with the theme are
 
 | Name          | Description                                                       |
-| -------- | ----------------------------------------------------------------- |
+| ------------- | ----------------------------------------------------------------- |
 | border        | Draws a light thin border around the image                        |
+| dataurl       | if the linked image points to a resource, it is converted to a base64 encoded dataurl |
+| inlinecontent | if the linked image points to a SVG resource, the content will be used instead of an `<img>` element, this is useful for applying additional CSS styles to the elements inside of the SVG which is otherwise impossible |
 | lazy          | Lets the image be lazy loaded                                     |
 | lightbox      | The image will be clickable to show it enlarged                   |
 | shadow        | Draws a shadow around the image to make it appear hovered/glowing |
@@ -32,6 +34,8 @@ Without any settings in your `hugo.toml` `imageEffects` defaults to
 {{< multiconfig >}}
 [imageEffects]
   border = false
+  dataurl = false
+  inlinecontent = false
   lazy = true
   lightbox = true
   shadow = false
@@ -54,6 +58,8 @@ The settings applied to the above image would be
 
 {{< multiconfig >}}
 border = true
+dataurl = false
+inlinecontent = false
 lazy = true
 lightbox = false
 shadow = false

docs/content/configuration/customization/imageeffects.en.md

@@ -17,6 +17,8 @@ If you don't configure anything in your `hugo.toml`, the image effects default t
 {{< multiconfig >}}
 [imageEffects]
   border = false
+  dataurl = false
+  inlinecontent = false
   lazy = true
   lightbox = true
   shadow = false
@@ -40,6 +42,8 @@ This would result in
 [imageEffects]
   bg-white = true
   border = true
+  dataurl = false
+  inlinecontent = false
   lazy = false
   lightbox = true
   shadow = false

docs/content/introduction/releasenotes/7/4.en.md

@@ -35,6 +35,11 @@ weight = -4
 
   This helps to remove false negatives while still benefitting from the check for all other addresses.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} There are two new [image effects](authoring/imageeffects) that are usable if the linked image points to a resource:
+
+    - **dataurl**: resource is converted to a base64 encoded dataurl
+    - **inlinecontent**: in case of SVG resources, the content will be used instead of an `<img>` element, this is useful for applying additional CSS styles to the elements inside of the SVG which is otherwise impossible
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme supports the new [`source` output format](configuration/sitemanagement/outputformats/#source-support) which behaves similar in configuration as the `markdown` output format but allows the original Markdown source including the front matter of a page to be viewed.
 
   You can see this in action on the above linked page, accessible by clicking the {{% button style="transparent" icon="code" %}}{{% /button %}} topbar button.

layouts/partials/_relearn/imageAttributes.gotmpl

@@ -1,7 +1,7 @@
 {{- $attributes := .attributes | default dict }}
 {{- $height := "auto" }}
 {{- $width := "auto" }}
-{{- $effects := dict "border" false "lazy" true "lightbox" true "shadow" false }}
+{{- $effects := dict "border" false "dataurl" false "inlinecontent" false "lazy" true "lightbox" true "shadow" false }}
 {{- if .page.Site.Params.imageeffects }}
   {{- $effects = merge $effects .page.Site.Params.imageeffects }}
 {{- end }}
@@ -63,9 +63,17 @@
     {{- end }}
   {{- end }}
 {{- end }}
+{{- if and .linkObject $effects.inlinecontent }}
+  {{- $content := .linkObject.Content | replaceRE `(?s)^\s*<\?.*?\?>\s*` "" }}
+  {{- $attributes = merge $attributes (dict "content" $content) }}
+{{- else if and .linkObject $effects.dataurl }}
+  {{- $src := printf "data:%s;base64,%s" .linkObject.MediaType (.linkObject.Content | base64Encode) }}
+  {{- $attributes = merge $attributes (dict "src" $src) }}
+{{- else }}
+  {{- $attributes = merge $attributes (dict "src" .url) }}
+{{- end }}
 {{- if $attributes.class }}{{ $classes = $classes | append (split $attributes.class " ") }}{{ end }}
 {{- $attributes = merge $attributes (dict "class" (delimit $classes " ")) }}
-{{- $attributes = merge $attributes (dict "src" .url) }}
 {{- $attributes = merge $attributes (dict "style" (printf " height: %s; width: %s;%s" $height $width (index $attributes "style" | default ""))) }}
 {{- if $effects.lazy }}{{ $attributes = merge $attributes (dict "loading" "lazy") }}{{ end }}
 {{- return $attributes }}

layouts/partials/shortcodes/image.html

@@ -8,12 +8,13 @@
 {{- $title := .title }}
 {{- $alt := .alt }}
 {{- $attributes := .attributes | default dict }}
+{{- $linkObject := "" }}
 {{- $u := urls.Parse .url }}
 {{- $src := $u.String }}
 {{- if $u.IsAbs }}
   {{- partialCached "_relearn/urlExists.gotmpl" (dict "url" .url "page" $page "type" "image") $u.String }}
 {{- else }}
-  {{- $linkObject := partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page "searchPage" false) }}
+  {{- $linkObject = partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page "searchPage" false) }}
   {{- if $linkObject }}
     {{- $src = partial "_relearn/decoratedLink.gotmpl" (dict "url" .url "page" $page "linkObject" $linkObject "param" "image") }}
   {{- else }}
@@ -23,7 +24,7 @@
   {{- end }}
 {{- end }}
 {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "_relearn/makeRandomMd5.gotmpl" $page) .id }}
-{{- $attributes = merge $attributes (partial "_relearn/imageAttributes.gotmpl" (dict "url" $src "page" $page)) }}
+{{- $attributes = merge $attributes (partial "_relearn/imageAttributes.gotmpl" (dict "url" $src "page" $page "linkObject" $linkObject)) }}
 {{- $attributes = merge $attributes (dict "alt" $alt "title" ($title | transform.HTMLEscape)) }}
 {{- $classes := split $attributes.class " " }}
 {{- $isLightbox := in $classes "lightbox" }}
@@ -33,8 +34,33 @@
 {{- $attributes_figure := $attributes }}
 {{- $attributes_figure = merge $attributes_figure (dict "class" (delimit ((split $attributes_figure.class " ") | append "figure-image") " ")) }}
 {{- $attributes_figure = merge $attributes_figure (dict "style" (index $attributes_figure "style")) -}}
+{{- partial "partials/inline/img" (dict "attributes" $attributes_figure) }}
+{{- if $isLightbox -}}
+</a>
+<a href="javascript:history.back();" class="lightbox-back" id="R-image-{{ $id }}">
+{{- $attributes_lightbox := $attributes }}
+{{- $attributes_lightbox = merge $attributes_lightbox (dict "class" (delimit ((split $attributes_lightbox.class " ") | append "lightbox-image") " ")) }}
+{{- $attributes_lightbox = merge $attributes_lightbox (dict "style" "") -}}
+{{- partial "partials/inline/img" (dict "attributes" $attributes_lightbox) }}</a>
+{{- end }}
+
+{{- define "partials/inline/img" }}
+  {{- if .attributes.content }}
+    {{- $attrs := ""}}
+    {{- range $k, $v := .attributes }}
+      {{- if eq $k "content" }}
+      {{- else if $v }}
+        {{- if eq (printf "%T" $v) "bool" }}
+          {{- $attrs = printf "%s %s" $attrs $k | safeHTMLAttr }}
+        {{- else }}
+          {{- $attrs = printf "%s %s=%q" $attrs $k $v | safeHTMLAttr }}
+        {{- end }}
+      {{- end }}
+    {{- end }}
+    {{- printf (.attributes.content | replaceRE "^<svg" (printf "<svg%s" $attrs)) | safeHTML }}
+  {{- else -}}
     <img
-  {{- range $k, $v := $attributes_figure }}
+      {{- range $k, $v := .attributes }}
         {{- if $v }}
           {{- if eq (printf "%T" $v) "bool" }}
             {{- printf " %s" $k | safeHTMLAttr }}
@@ -43,20 +69,5 @@
           {{- end }}
         {{- end }}
       {{- end }}>
-{{- if $isLightbox -}}
-</a>
-<a href="javascript:history.back();" class="lightbox-back" id="R-image-{{ $id }}">
-{{- $attributes_lightbox := $attributes }}
-{{- $attributes_lightbox = merge $attributes_lightbox (dict "class" (delimit ((split $attributes_lightbox.class " ") | append "lightbox-image") " ")) }}
-{{- $attributes_lightbox = merge $attributes_lightbox (dict "style" "") -}}
-<img
-  {{- range $k, $v := $attributes_lightbox }}
-    {{- if $v }}
-      {{- if eq (printf "%T" $v) "bool" }}
-        {{- printf " %s" $k | safeHTMLAttr }}
-      {{- else }}
-        {{- printf " %s=%q" $k $v | safeHTMLAttr }}
   {{- end }}
 {{- end }}
-  {{- end }}></a>
-{{- end }}

layouts/partials/shortcodes/link.html

@@ -16,12 +16,13 @@
 {{- $content := .content }}
 {{- /* target will be boolean false if no user defined value was set and effect default should be applied */}}
 {{- $target := false }}
+{{- $linkObject := "" }}
 {{- $u := urls.Parse .url }}
 {{- $href := $u.String }}
 {{- if $u.IsAbs }}
   {{- partialCached "_relearn/urlExists.gotmpl" (dict "url" .url "page" $page "type" "link") $u.String }}
 {{- else }}
-  {{- $linkObject := partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page) }}
+  {{- $linkObject = partial "_relearn/linkObject.gotmpl" (dict "url" .url "page" $page) }}
   {{- if $linkObject }}
     {{- $href = partial "_relearn/decoratedLink.gotmpl" (dict "url" .url "page" $page "linkObject" $linkObject "param" "link") }}
   {{- else }}
@@ -30,7 +31,7 @@
     {{- partial "_relearn/urlErrorReport.gotmpl" (dict "url" .url "page" $page "param" "link" "msg" $msg) }}
   {{- end }}
 {{- end }}
-{{- $attributes = merge $attributes (partial "_relearn/linkAttributes.gotmpl" (dict "url" $href "page" $page "target" .target)) -}}
+{{- $attributes = merge $attributes (partial "_relearn/linkAttributes.gotmpl" (dict "url" $href "page" $page "linkObject" $linkObject "target" .target)) -}}
 <a
   {{- range $k, $v := $attributes }}
     {{- if $v }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.3.2+a3e0b7f4f469703ed2fec432b332f17e0066d70a
+7.3.2+adb82b040f7cda6de4d78892bb580a62f248d5ef