github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-11-25 06:10:40 +00:00
Code Issues Projects Releases Wiki Activity

feat: add profile size to img shortcode (#456)

Browse Source
This commit is contained in:
Robert Kaussow 2022-07-11 20:46:07 +02:00 committed by GitHub
parent 66d456f552
commit 3a26b6ed1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
layouts/shortcodes/img.html
View File

@ -1,44 +1,51 @@
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }} {{- $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
{{ $customAlt := .Get "alt" }} {{- $customAlt := .Get "alt" }}
{{ $customSize := .Get "size" }} {{- $customSize := .Get "size" | lower }}
{{ $lazyLoad := default (default true $.Site.Params.GeekdocImageLazyLoading) (.Get "lazy") }} {{- $lazyLoad := default (default true $.Site.Params.GeekblogImageLazyLoading) (.Get "lazy") }}
{{ with $source }} {{- with $source }}
{{ $caption := default .Title $customAlt }} {{- $caption := default .Title $customAlt }}
{{ $tiny := (.Resize "320x").Permalink }} {{- $profile := (.Fill "180x180 Center").Permalink }}
{{ $small := (.Resize "600x").Permalink }} {{- $tiny := (.Resize "320x").Permalink }}
{{ $medium := (.Resize "1200x").Permalink }} {{- $small := (.Resize "600x").Permalink }}
{{ $large := (.Resize "1800x").Permalink }} {{- $medium := (.Resize "1200x").Permalink }}
{{- $large := (.Resize "1800x").Permalink }}
{{ $size := dict "tiny" $tiny "small" $small "medium" $medium "large" $large }} {{- $size := dict "profile" $profile "tiny" $tiny "small" $small "medium" $medium "large" $large }}
<div class="flex justify-center"> <div class="flex justify-center">
<figure class="gdoc-markdown__figure"> <figure
class="gdoc-post__figure
{{- if eq $customSize "profile" }}{{ print " gdoc-post__figure--round" }}{{ end }}"
>
<a class="gdoc-markdown__link--raw" href="{{ .Permalink }}"> <a class="gdoc-markdown__link--raw" href="{{ .Permalink }}">
<picture> <picture>
<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 }}
/> />
<img <img
{{ if $lazyLoad }} {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
loading="lazy"
{{ end }}
src="{{ $size.large }}" src="{{ $size.large }}"
alt="{{ $caption }}" alt="{{ $caption }}"
/> />
</picture> </picture>
</a> </a>
{{ with $caption -}} {{- if not (eq $customSize "profile") }}
<figcaption> {{- with $caption }}
{{ . }}{{ with $source.Params.credits }}({{ . | $.Page.RenderString }}){{ end }} <figcaption>
</figcaption> {{ . }}
{{- with $source.Params.credits }}
{{ printf " (%s)" . | $.Page.RenderString }}
{{- end }}
</figcaption>
{{- end }}
{{- end }} {{- end }}
</figure> </figure>
</div> </div>
{{ end }} {{- end }}

5
src/sass/_markdown.scss
View File

@ -95,6 +95,11 @@
border-top-left-radius: $border-radius; border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius; border-top-right-radius: $border-radius;
&--round,
&--round img {
border-radius: 50% !important;
}
figcaption { figcaption {
display: table-caption; display: table-caption;
caption-side: bottom; caption-side: bottom;