github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-28 07:50:34 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Robert Kaussow 2022-07-11 15:46:49 +02:00 committed by GitHub
parent bf9cf7578a
commit 1e1da86618
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
layouts/shortcodes/img.html
View File

@ -1,42 +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.GeekblogImageLazyLoading) (.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="gblog-post__figure"> <figure
class="gblog-post__figure
{{- if eq $customSize "profile" }}{{ print " gblog-post__figure--round" }}{{ end }}"
>
<a class="gblog-markdown__link--raw" href="{{ .Permalink }}"> <a class="gblog-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 }}loading="lazy"{{ end }} {{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- 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> {{ . }}
{{ end }} {{- with $source.Params.credits }}
{{ printf " (%s)" . | $.Page.RenderString }}
{{- end }}
</figcaption>
{{- end }}
{{- end }}
</figure> </figure>
</div> </div>
{{ end }} {{- end }}

5
src/sass/_base.scss
View File

@ -428,6 +428,11 @@ svg.gblog-icon {
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;