github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-24 14:00:42 +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

49
layouts/shortcodes/img.html
View File

@ -1,42 +1,51 @@
{{ $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
{{ $customAlt := .Get "alt" }}
{{ $customSize := .Get "size" }}
{{ $lazyLoad := default (default true $.Site.Params.GeekblogImageLazyLoading) (.Get "lazy") }}
{{- $source := ($.Page.Resources.ByType "image").GetMatch (printf "%s" (.Get "name")) }}
{{- $customAlt := .Get "alt" }}
{{- $customSize := .Get "size" | lower }}
{{- $lazyLoad := default (default true $.Site.Params.GeekblogImageLazyLoading) (.Get "lazy") }}
{{ with $source }}
{{ $caption := default .Title $customAlt }}
{{- with $source }}
{{- $caption := default .Title $customAlt }}
{{ $tiny := (.Resize "320x").Permalink }}
{{ $small := (.Resize "600x").Permalink }}
{{ $medium := (.Resize "1200x").Permalink }}
{{ $large := (.Resize "1800x").Permalink }}
{{- $profile := (.Fill "180x180 Center").Permalink }}
{{- $tiny := (.Resize "320x").Permalink }}
{{- $small := (.Resize "600x").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">
<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 }}">
<picture>
<source
{{ with $customSize }}
{{- with $customSize }}
srcset="{{ index $size $customSize }}"
{{ else }}
{{- else }}
srcset="{{ $size.small }} 600w, {{ $size.medium }} 1200w" sizes="100vw"
{{ end }}
{{- end }}
/>
<img
{{ if $lazyLoad }}loading="lazy"{{ end }}
{{- if $lazyLoad }}{{ print " loading=\"lazy\"" | safeHTMLAttr }}{{- end }}
src="{{ $size.large }}"
alt="{{ $caption }}"
/>
</picture>
</a>
{{ with $caption }}
{{- if not (eq $customSize "profile") }}
{{- with $caption }}
<figcaption>
{{ . }}{{ with $source.Params.credits }} ({{ . | $.Page.RenderString }}){{ end }}
{{ . }}
{{- with $source.Params.credits }}
{{ printf " (%s)" . | $.Page.RenderString }}
{{- end }}
</figcaption>
{{ end }}
{{- end }}
{{- end }}
</figure>
</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-right-radius: $border-radius;
&--round,
&--round img {
border-radius: 50% !important;
}
figcaption {
display: table-caption;
caption-side: bottom;