mirror of
https://github.com/thegeeklab/hugo-geekdoc.git
synced 2024-11-28 15:40:36 +00:00
feat: add basic svg support to the img shortcode (#554)
This commit is contained in:
GitHub
parent
8a5e030dc8
commit
5d4370b617
@ -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 -->
|
||||||
|
|||||||
90
exampleSite/content/en/shortcodes/images/forest-8.svg
Normal file
90
exampleSite/content/en/shortcodes/images/forest-8.svg
Normal 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 |
@ -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>
|
||||||
<source
|
{{- $size := $data.Get "size" }}
|
||||||
{{- with $customSize }}
|
{{- if not $isSVG }}
|
||||||
srcset="{{ index $size $customSize }}"
|
<source
|
||||||
{{- else }}
|
{{- with $customSize }}
|
||||||
srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
|
srcset="{{ index $size $customSize }}"
|
||||||
{{- end }}
|
{{- else }}
|
||||||
/>
|
srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
|
||||||
|
{{- end }}
|
||||||
|
|
||||||
|
/>
|
||||||
|
{{- end }}
|
||||||
<img
|
<img
|
||||||
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
|
{{- if $isSVG }}
|
||||||
{{- if eq $customSize "origin" }}
|
src="{{ $origin }}" width="{{ index $size (default "medium" $customSize) }}"
|
||||||
src="{{ $size.origin }}"
|
|
||||||
{{- else }}
|
{{- else }}
|
||||||
src="{{ $size.large }}"
|
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
|
||||||
|
{{- if eq $customSize "origin" }}
|
||||||
|
src="{{ $origin }}"
|
||||||
|
{{- else }}
|
||||||
|
src="{{ $size.large }}"
|
||||||
|
{{- end }}
|
||||||
|
alt="{{ $caption }}"
|
||||||
{{- end }}
|
{{- end }}
|
||||||
alt="{{ $caption }}"
|
|
||||||
/>
|
/>
|
||||||
</picture>
|
</picture>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user