image: support for inlining image content #1019

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

@@ -12,12 +12,14 @@ 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                        |
-| 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 |
+| 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 |
 
 One way to use them is to add them as URL query parameter to each individually linked image.
 
@@ -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.