feat: add basic svg support to the img shortcode (#554)

This commit is contained in:
Robert Kaussow 2022-12-11 15:05:30 +01:00 committed by GitHub
parent 8a5e030dc8
commit 5d4370b617
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 141 additions and 19 deletions

View File

@ -36,6 +36,11 @@ resources:
title: Forest (7) title: Forest (7)
params: params:
credits: "[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)" credits: "[Asher Ward](https://unsplash.com/@the_asher_ward) on [Unsplash](https://unsplash.com/s/photos/forest)"
- name: forest-8
src: "forest-8.svg"
title: Forest (8)
params:
credits: "SVG Repo on [SVGRepo](https://www.svgrepo.com/svg/286078/forest)"
--- ---
If you need more flexibility for your embedded images, you could use the `img` shortcode. It is using Hugo's If you need more flexibility for your embedded images, you could use the `img` shortcode. It is using Hugo's
@ -144,3 +149,14 @@ copious quo ad. Stet probates in duo.
{{< img name="forest-7" lazy=true >}} {{< img name="forest-7" lazy=true >}}
<!-- spellchecker-enable --> <!-- spellchecker-enable -->
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates
investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts
feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious
copious quo ad. Stet probates in duo.
<!-- spellchecker-disable -->
{{< img name="forest-8" size=small lazy=true >}}
<!-- spellchecker-enable -->

View File

@ -0,0 +1,90 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<path style="fill:#2A5637;" d="M335.232,432.679c-9.883,0-17.895-8.012-17.895-17.895V262.08c0-9.883,8.012-17.895,17.895-17.895
c9.883,0,17.895,8.012,17.895,17.895v152.703C353.126,424.667,345.114,432.679,335.232,432.679z"/>
<path style="fill:#4E7F4B;" d="M335.232,432.679c-9.883,0-17.895-8.012-17.895-17.895V262.08c0-9.883,8.012-17.895,17.895-17.895
V432.679z"/>
<path style="fill:#2A5637;" d="M152.703,432.679c-9.883,0-17.895-8.012-17.895-17.895V262.08c0-9.883,8.012-17.895,17.895-17.895
s17.895,8.012,17.895,17.895v152.703C170.598,424.667,162.586,432.679,152.703,432.679z"/>
<path style="fill:#4E7F4B;" d="M152.703,432.679c-9.883,0-17.895-8.012-17.895-17.895V262.08c0-9.883,8.012-17.895,17.895-17.895
V432.679z"/>
<path style="fill:#007871;" d="M223.391,71.445c-14.8-26.697-36-49.045-61.306-64.626c-5.753-3.543-13.011-3.543-18.765,0
c-25.305,15.581-46.504,37.929-61.304,64.626C66.83,98.838,58.803,130.186,58.803,162.1s8.028,63.262,23.213,90.656
c14.8,26.697,36,49.045,61.306,64.626c2.876,1.772,6.13,2.657,9.382,2.657s6.505-0.885,9.382-2.657
c25.306-15.582,46.504-37.929,61.306-64.626c15.186-27.394,23.213-58.742,23.213-90.656S238.576,98.838,223.391,71.445z"/>
<path style="fill:#489B6D;" d="M152.705,4.162c-3.253,0-6.505,0.885-9.383,2.657c-25.306,15.581-46.505,37.929-61.306,64.626
C66.83,98.838,58.803,130.186,58.803,162.1s8.028,63.262,23.213,90.656c14.8,26.697,36,49.045,61.306,64.626
c2.876,1.772,6.13,2.657,9.382,2.657L152.705,4.162z"/>
<path style="fill:#007871;" d="M405.919,71.445c-14.8-26.697-36-49.045-61.306-64.626c-5.753-3.543-13.011-3.543-18.765,0
c-25.306,15.582-46.504,37.929-61.306,64.626c-15.186,27.394-23.213,58.742-23.213,90.656s8.028,63.262,23.213,90.656
c14.8,26.697,36,49.045,61.306,64.626c2.876,1.772,6.13,2.657,9.382,2.657c3.252,0,6.505-0.885,9.382-2.657
c25.306-15.582,46.504-37.929,61.306-64.626c15.186-27.394,23.213-58.742,23.213-90.656S421.104,98.838,405.919,71.445z"/>
<path style="fill:#489B6D;" d="M335.232,4.162c-3.253,0-6.505,0.885-9.383,2.657c-25.306,15.582-46.504,37.929-61.306,64.626
c-15.186,27.394-23.213,58.742-23.213,90.656s8.028,63.262,23.213,90.656c14.8,26.697,36,49.045,61.306,64.626
c2.876,1.772,6.13,2.657,9.382,2.657L335.232,4.162z"/>
<path style="fill:#2A5637;" d="M71.58,432.679c-9.883,0-17.895-8.012-17.895-17.895V305.028c0-9.883,8.012-17.895,17.895-17.895
s17.895,8.012,17.895,17.895v109.756C89.475,424.667,81.462,432.679,71.58,432.679z"/>
<path style="fill:#4E7F4B;" d="M71.58,432.679c-9.883,0-17.895-8.012-17.895-17.895V305.028c0-9.883,8.012-17.895,17.895-17.895
V432.679z"/>
<path style="fill:#007871;" d="M80.961,124.925c-5.753-3.543-13.011-3.543-18.765,0c-37.755,23.247-61.21,66.291-61.21,112.335
c0,46.042,23.454,89.087,61.21,112.334c2.876,1.772,6.13,2.657,9.382,2.657c3.252,0,6.505-0.885,9.382-2.657
c37.755-23.247,61.21-66.291,61.21-112.334C142.172,191.217,118.717,148.172,80.961,124.925z"/>
<path style="fill:#489B6D;" d="M71.58,122.269c-3.253,0-6.505,0.885-9.383,2.657c-37.755,23.247-61.21,66.291-61.21,112.335
c0,46.042,23.454,89.087,61.21,112.334c2.876,1.772,6.13,2.657,9.382,2.657L71.58,122.269z"/>
<path style="fill:#2A5637;" d="M256.494,432.679c-9.883,0-17.895-8.012-17.895-17.895V305.028c0-9.883,8.012-17.895,17.895-17.895
c9.883,0,17.895,8.012,17.895,17.895v109.756C274.389,424.667,266.377,432.679,256.494,432.679z"/>
<path style="fill:#4E7F4B;" d="M256.494,432.679c-9.883,0-17.895-8.012-17.895-17.895V305.028c0-9.883,8.012-17.895,17.895-17.895
V432.679z"/>
<path style="fill:#007871;" d="M265.876,124.925c-5.753-3.543-13.011-3.543-18.765,0c-37.755,23.247-61.21,66.291-61.21,112.335
c0,46.042,23.454,89.087,61.21,112.334c2.876,1.772,6.13,2.657,9.382,2.657c3.252,0,6.505-0.885,9.382-2.657
c37.755-23.247,61.21-66.291,61.21-112.334C327.086,191.217,303.632,148.172,265.876,124.925z"/>
<path style="fill:#489B6D;" d="M256.494,122.269c-3.253,0-6.505,0.885-9.383,2.657c-37.755,23.247-61.21,66.291-61.21,112.335
c0,46.042,23.454,89.087,61.21,112.334c2.876,1.772,6.13,2.657,9.382,2.657L256.494,122.269z"/>
<path style="fill:#2A5637;" d="M441.408,432.679c-9.883,0-17.895-8.012-17.895-17.895V305.028c0-9.883,8.012-17.895,17.895-17.895
c9.883,0,17.895,8.012,17.895,17.895v109.756C459.303,424.667,451.291,432.679,441.408,432.679z"/>
<path style="fill:#4E7F4B;" d="M441.408,432.679c-9.883,0-17.895-8.012-17.895-17.895V305.028c0-9.883,8.012-17.895,17.895-17.895
V432.679z"/>
<path style="fill:#007871;" d="M450.79,124.925c-5.753-3.543-13.011-3.543-18.765,0c-37.755,23.247-61.21,66.291-61.21,112.335
c0,46.042,23.454,89.087,61.21,112.334c2.876,1.772,6.13,2.657,9.382,2.657c3.252,0,6.505-0.885,9.382-2.657
c37.755-23.247,61.21-66.291,61.21-112.334C512,191.217,488.546,148.172,450.79,124.925z"/>
<path style="fill:#489B6D;" d="M441.408,122.269c-3.253,0-6.505,0.885-9.383,2.657c-37.755,23.247-61.21,66.291-61.21,112.335
c0,46.042,23.454,89.087,61.21,112.334c2.876,1.772,6.13,2.657,9.382,2.657L441.408,122.269z"/>
<path style="fill:#007871;" d="M493.9,419.556H17.895C8.012,419.556,0,427.568,0,437.451c0,9.883,8.012,17.895,17.895,17.895H493.9
c9.883,0,17.895-8.012,17.895-17.895C511.795,427.568,503.783,419.556,493.9,419.556z"/>
<path style="fill:#0EABD9;" d="M450.952,472.047H163.44c-9.883,0-17.895,8.012-17.895,17.895c0,9.883,8.012,17.895,17.895,17.895
h287.512c9.883,0,17.895-8.012,17.895-17.895C468.847,480.06,460.835,472.047,450.952,472.047z"/>
<path style="fill:#91C0F1;" d="M103.791,472.047H76.352c-9.883,0-17.895,8.012-17.895,17.895c0,9.883,8.012,17.895,17.895,17.895
h27.439c9.883,0,17.895-8.012,17.895-17.895C121.685,480.06,113.673,472.047,103.791,472.047z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -2,18 +2,26 @@
{{- $customAlt := .Get "alt" }} {{- $customAlt := .Get "alt" }}
{{- $customSize := .Get "size" | lower }} {{- $customSize := .Get "size" | lower }}
{{- $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }} {{- $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }}
{{- $data := newScratch }}
{{- with $source }} {{- with $source }}
{{- $caption := default .Title $customAlt }} {{- $caption := default .Title $customAlt }}
{{- $isSVG := (eq .MediaType.SubType "svg") }}
{{- $origin := .Permalink }} {{- $origin := .Permalink }}
{{- $profile := (.Fill "180x180 Center").Permalink }} {{ if $isSVG }}
{{- $tiny := (.Resize "320x").Permalink }} {{- $data.SetInMap "size" "profile" "180" }}
{{- $small := (.Resize "600x").Permalink }} {{- $data.SetInMap "size" "tiny" "320" }}
{{- $medium := (.Resize "1200x").Permalink }} {{- $data.SetInMap "size" "small" "600" }}
{{- $large := (.Resize "1800x").Permalink }} {{- $data.SetInMap "size" "medium" "1200" }}
{{- $data.SetInMap "size" "large" "1800" }}
{{- $size := dict "origin" $origin "profile" $profile "tiny" $tiny "small" $small "medium" $medium "large" $large }} {{ else }}
{{- $data.SetInMap "size" "profile" (.Fill "180x180 Center").Permalink }}
{{- $data.SetInMap "size" "tiny" (.Resize "320x").Permalink }}
{{- $data.SetInMap "size" "small" (.Resize "600x").Permalink }}
{{- $data.SetInMap "size" "medium" (.Resize "1200x").Permalink }}
{{- $data.SetInMap "size" "large" (.Resize "1800x").Permalink }}
{{ end }}
<div class="flex justify-center"> <div class="flex justify-center">
@ -23,21 +31,29 @@
> >
<a class="gdoc-markdown__link--raw" href="{{ .Permalink }}"> <a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
<picture> <picture>
{{- $size := $data.Get "size" }}
{{- if not $isSVG }}
<source <source
{{- with $customSize }} {{- with $customSize }}
srcset="{{ index $size $customSize }}" srcset="{{ index $size $customSize }}"
{{- else }} {{- else }}
srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw" srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
{{- end }} {{- end }}
/> />
{{- end }}
<img <img
{{- if $isSVG }}
src="{{ $origin }}" width="{{ index $size (default "medium" $customSize) }}"
{{- else }}
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }} {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
{{- if eq $customSize "origin" }} {{- if eq $customSize "origin" }}
src="{{ $size.origin }}" src="{{ $origin }}"
{{- else }} {{- else }}
src="{{ $size.large }}" src="{{ $size.large }}"
{{- end }} {{- end }}
alt="{{ $caption }}" alt="{{ $caption }}"
{{- end }}
/> />
</picture> </picture>
</a> </a>