internal/components/gallery/controller.go

@@ -12,6 +12,29 @@ type Gallery struct {
 	GridHeight int
 	Images     []Image
 }
+type Set struct {
+	SM  Gallery
+	LG  Gallery
+	XLG Gallery
+}
+
+func (s *Service) GetGallerySet(ctx context.Context) (gallerySet Set, err error) {
+	gallerySet.SM, err = s.GetGallery(ctx, 50)
+	if err != nil {
+		return
+	}
+	gallerySet.LG, err = s.GetGallery(ctx, 80)
+	if err != nil {
+		return
+	}
+
+	gallerySet.XLG, err = s.GetGallery(ctx, 120)
+	if err != nil {
+		return
+	}
+
+	return
+}
 
 func (s *Service) GetGallery(ctx context.Context, width int) (gallery Gallery, err error) {
 	imgs, err := s.GetImages(ctx)
@@ -19,7 +42,7 @@ func (s *Service) GetGallery(ctx context.Context, width int) (gallery Gallery, e
 		return
 	}
 
-	packer := binpack2d.Create(50, 999999)
+	packer := binpack2d.Create(width, 999999)
 
 	for len(imgs) > 0 {
 		unused := make([]Image, 0, len(imgs))

internal/handlers/restgallery/controller.go

@@ -8,11 +8,11 @@ import (
 )
 
 func (h *Handler) gallery(w http.ResponseWriter, r *http.Request) {
-	imgs, err := h.srv.GetGallery(r.Context(), 0)
+	imgs, err := h.srv.GetGallerySet(r.Context())
 	if err != nil {
 		slog.Error("could not get images", "err", err)
 		w.WriteHeader(http.StatusInternalServerError)
 		return
 	}
-	h.r.Render(r.Context(), w, r, pages.Gallery(imgs))
+	h.r.Render(r.Context(), w, r, pages.GallerySet(imgs))
 }

internal/handlers/restgallery/resource.go

@@ -33,7 +33,7 @@ func New(renderer renderer, srv galleryService, cfg *config.Gallery) *Handler {
 }
 
 type galleryService interface {
-	GetGallery(ctx context.Context, width int) (gallery gallery.Gallery, err error)
+	GetGallerySet(ctx context.Context) (gallerySet gallery.Set, err error)
 }
 type renderer interface {
 	Render(ctx context.Context, w io.Writer, r *http.Request, component templ.Component)

web/pages/gallery.templ

@@ -1,11 +1,36 @@
 package pages
 
-import "git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/components/gallery"
+import (
-import "fmt"
+	"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 }
+				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 m-5"
+		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 {