mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-02-15 16:23:32 +00:00
image: support for inlining image content #1019
This commit is contained in:
Sören Weber
parent
adb82b040f
commit
fb96c34e7f
10 changed files with 89 additions and 32 deletions
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
@ -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,30 +34,40 @@
|
|||
{{- $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")) -}}
|
||||
<img
|
||||
{{- range $k, $v := $attributes_figure }}
|
||||
{{- if $v }}
|
||||
{{- if eq (printf "%T" $v) "bool" }}
|
||||
{{- printf " %s" $k | safeHTMLAttr }}
|
||||
{{- else }}
|
||||
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}>
|
||||
{{- 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" "") -}}
|
||||
<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 }}
|
||||
{{- 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 }}
|
||||
{{- end }}></a>
|
||||
{{- printf (.attributes.content | replaceRE "^<svg" (printf "<svg%s" $attrs)) | safeHTML }}
|
||||
{{- else -}}
|
||||
<img
|
||||
{{- range $k, $v := .attributes }}
|
||||
{{- if $v }}
|
||||
{{- if eq (printf "%T" $v) "bool" }}
|
||||
{{- printf " %s" $k | safeHTMLAttr }}
|
||||
{{- else }}
|
||||
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
7.3.2+a3e0b7f4f469703ed2fec432b332f17e0066d70a
|
||||
7.3.2+adb82b040f7cda6de4d78892bb580a62f248d5ef
|
||||
Loading…
Add table
Reference in a new issue