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

48
assets/_gallery.scss
View File

@ -6,7 +6,7 @@
flex-wrap: wrap;
gap: 1rem;
a {
& > a {
&.blur-on-hover {
overflow: hidden;
@ -20,6 +20,13 @@
}
}
img {
display: block;
height: 280px;
object-fit: cover;
width: 280px;
}
p {
background: rgba($color-overlay, 0.9);
color: $color-overlay-text;
@ -31,10 +38,43 @@
}
}
.slide {
background: rgba($color-overlay, 0.7);
display: none;
height: 100vh;
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: 280px;
object-fit: cover;
width: 280px;
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>
{{ .Content }}
<section class="gallery">
{{ $prev := 0 }}
{{ $curr := 0 }}
{{ 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 }}
</section>
{{ 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>