52 lines
1.2 KiB
Templ
52 lines
1.2 KiB
Templ
package pages
|
|
|
|
import (
|
|
"fmt"
|
|
"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/components/gallery"
|
|
)
|
|
|
|
templ GallerySet(g gallery.Set) {
|
|
<div
|
|
class="grid gap-5 grid-cols-1 lg:hidden m-5"
|
|
>
|
|
for _,img := range g.SM.Images {
|
|
<img
|
|
src={ "/images/" + img.UID + "?w=600" }
|
|
loading="lazy"
|
|
class="w-full"
|
|
alt="Gallery item"
|
|
/>
|
|
}
|
|
</div>
|
|
<div class="hidden lg:block 3xl:hidden m-5">
|
|
@Gallery(g.SM)
|
|
</div>
|
|
<div class="hidden 3xl:block 6xl:hidden m-5">
|
|
@Gallery(g.LG)
|
|
</div>
|
|
<div class="hidden 6xl:block m-5">
|
|
@Gallery(g.XLG)
|
|
</div>
|
|
}
|
|
|
|
templ Gallery(g gallery.Gallery) {
|
|
<div
|
|
class="grid gap-5"
|
|
style={ fmt.Sprintf("grid-template-columns: repeat(%d, 1fr); grid-template-rows: repeat(%d, auto);", g.GridWith, g.GridHeight) }
|
|
>
|
|
for _, img := range g.Images {
|
|
<div
|
|
style={ fmt.Sprintf("grid-column: %d / span %d; grid-row: %d / span %d;aspect-ratio: %d / %d;", img.X+1, img.Width, img.Y+1, img.Height, img.Width, img.Height) }
|
|
class="overflow-hidden shadow-sm"
|
|
>
|
|
<img
|
|
src={ "/images/" + img.UID + "?w=800" }
|
|
loading="lazy"
|
|
class="w-full h-full object-cover"
|
|
alt="Gallery item"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|