maik/Personal-Website
1
0
Fork 0
mirror of https://github.com/maikka39/Personal-Website.git synced 2026-10-02 14:46:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add image enlargement

Browse Source
This commit is contained in:
maik
2021-11-10 23:15:13 +01:00
parent a6d96dbdc2
commit 9ab6b65570
6 changed files with 126 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/maik-blog/layouts/partials/image.html
+34 -5
View File
@@ -1,5 +1,34 @@
{{- $img := resources.Get .path }}
{{- $img = $img.Resize (printf "%dx%d webp" $img.Width $img.Height) }}
<img src="{{ $img.Permalink }}" alt="{{ .alt | default "" }}" width="{{ .width | default $img.Width }}"
height="{{ .height | default $img.Height }}" {{- if .class}}class="{{ .class }}" {{end}}
{{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
{{- $orignal := resources.Get .path }}
{{- $png := $orignal.Resize (printf "%dx%d png q50" $orignal.Width $orignal.Height) }}
{{- $webp := $orignal.Resize (printf "%dx%d webp q50" $orignal.Width $orignal.Height) }}
{{- $pngFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }}
{{- $webpFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }}
<picture>
<source type="image/webp" srcset="{{ $webp.Permalink }}">
<img
src="{{ $png.Permalink }}"
alt="{{ .alt | default "" }}"
title="{{ .alt }}"
width="{{ .width | default $png.Width }}"
height="{{ .height | default $png.Height }}"
{{- if .class}}class="{{ .class }}" {{end}}
{{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
</picture>
<div class="enlarged_image">
<picture>
<source type="image/webp" srcset="{{ $webpFull.Permalink }}">
<img
src="{{ $pngFull.Permalink }}"
alt="{{ .alt | default "" }}"
loading="lazy"
title="{{ .alt }}"
width="{{ .width | default $pngFull.Width }}"
height="{{ .height | default $pngFull.Height }}"
{{- if .class}}class="{{ .class }}" {{end}}
{{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
</picture>
{{- with .alt }}
<p class="caption">{{ . }}</p>
{{- end }}
</div>
themes/maik-blog/layouts/partials/javascript.html
+2 -1
View File
@@ -2,7 +2,8 @@
{{- $menu := resources.Get "js/menu.js" }}
{{- $theme := resources.Get "js/theme.js" }}
{{- $nav := resources.Get "js/nav.js" }}
{{- $secureJS := slice $main $menu $theme $nav | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
{{- $image_enlargement := resources.Get "js/image_enlargement.js" }}
{{- $secureJS := slice $main $menu $theme $nav $image_enlargement | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
{{- if .Site.GoogleAnalytics }}
themes/maik-blog/layouts/shortcodes/figure.html
+3 -3
View File
@@ -1,4 +1,4 @@
<figure{{ with .Get "class" }} class="{{ . }}" {{ end }}{{ with .Get "id" }} id="{{ . }}" {{ end }}>
<figure class="enlargable {{- with .Get "class" }} {{ . }}{{ end }}" {{ with .Get "id" }} id="{{ . }}" {{ end }}>
{{- if .Get "link" -}}
<a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}"
{{ end }}>
@@ -9,7 +9,7 @@
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" {{- end -}}
width="{{ .Get "width" | default $img.Width }}" height="{{ .Get "height" | default $img.Height }}" />
{{- else }}
{{- partial "image.html" (dict "path" (.Get "src") "alt" (or (.Get "alt") (.Get "caption" | markdownify | plainify)) "width" (.Get "width") "height" (.Get "height")) }}
{{- partial "image.html" (dict "path" (.Get "src") "alt" (or (.Get "alt") (or (.Get "caption" | markdownify | plainify) (.Get "title"))) "width" (.Get "width") "height" (.Get "height")) }}
{{- end }}
{{- if .Get "link" }}</a>{{ end -}}
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
@@ -33,4 +33,4 @@
{{- end -}}
</figcaption>
{{- end }}
</figure>
</figure>