kontakt
/
www.kontakt-bamberg.de
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement gallery
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Luca 2023-03-13 00:59:21 +01:00
parent 0bd29fdf4f
commit bb76ddd61a
3 changed files with 68 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/_gallery.scss
View File

@ -6,7 +6,7 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
a { & > a {
&.blur-on-hover { &.blur-on-hover {
overflow: hidden; overflow: hidden;
@ -20,6 +20,13 @@
} }
} }
img {
display: block;
height: 280px;
object-fit: cover;
width: 280px;
}
p { p {
background: rgba($color-overlay, 0.9); background: rgba($color-overlay, 0.9);
color: $color-overlay-text; color: $color-overlay-text;
@ -31,10 +38,43 @@
} }
} }
img { .slide {
display: block; background: rgba($color-overlay, 0.7);
height: 280px; display: none;
object-fit: cover; height: 100vh;
width: 280px; justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 2;
&:target {
display: flex;
}
a {
color: $color-overlay-text;
display: block;
}
img {
display: block;
height: 100%;
object-fit: scale-down;
width: 100%;
}
p {
background: rgba($color-overlay, 0.9);
bottom: 0;
display: flex;
justify-content: space-between;
margin-bottom: 0;
padding: 0.5em 1.5em;
position: absolute;
width: 100vw;
z-index: 3;
}
} }
} }

13
layouts/galerie/single.html
View File

@ -2,8 +2,19 @@
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ .Content }} {{ .Content }}
<section class="gallery"> <section class="gallery">
{{ $prev := 0 }}
{{ $curr := 0 }}
{{ range .Resources.ByType "image" }} {{ range .Resources.ByType "image" }}
<img alt="{{ .Title }}" src="{{ (.Fill "560x560").RelPermalink }}"> <a href="#{{ .Name }}"><img alt="{{ .Title }}" src="{{ (.Fill "560x560").RelPermalink }}"></a>
{{ $next := . }}
{{ with $curr }}
{{ partial "gallery/slide.html" (dict "curr" $curr "prev" $prev "next" $next) }}
{{ $prev = $curr }}
{{ end }}
{{ $curr = . }}
{{ end }}
{{ with $curr }}
{{ partial "gallery/slide.html" (dict "curr" $curr "prev" $prev "next" 0) }}
{{ end }} {{ end }}
</section> </section>
{{ end }} {{ end }}

10
layouts/partials/gallery/slide.html Normal file
View File

@ -0,0 +1,10 @@
{{ $curr := index . "curr" }}
{{ $prev := index . "prev" }}
{{ $next := index . "next" }}
<article class="slide" id="{{ $curr.Name }}">
<a href="#-"><img alt="{{ $curr.Title }}" loading="lazy" src="{{ $curr.RelPermalink }}"></a>
<p>
<a{{ with $prev }} href="#{{ .Name }}"{{ end }}>{{ with $prev }}Zurück{{ end }}</a>
<a{{ with $next }} href="#{{ .Name }}"{{ end }}>{{ with $next }}Weiter{{ end }}</a>
</p>
</article>