Carousel for images bundled with each post
Owner:
Ivan Hawkes
Post image carousel
Render the images bundled with a post as a responsive carousel.
Replace the stub be-best/layouts/_partials/components/carousel.html, which
prints a CAROUSEL label and a bare <img> per resource with an empty alt,
and which no layout includes. Retire the matching TODO.md line, “Prep work for
implementing a carousel again”.
Post image carousel
- Enumerate the images of the page in filename order, excluding
featured.webp. - Render each slide with the same
<picture>markup asbe-best/layouts/_markup/render-image.html: webp and jpeg srcsets built from the 320, 640, 960, 1280, 1600 and 1920 widths the resource can supply, a 640px jpeg fallbacksrc,widthandheight,loading="lazy", and theimgB-<md5>-LQIPbackground class. - Set
altfrom the resource filename stem:carousel-03.webpbecomescarousel 03. - Add previous and next controls, keyboard arrow-key support, and a slide
counter in the form
3 / 9. - Include the partial from
be-best/layouts/post/page.html. - A post with no image resource renders no carousel markup; a post with one renders the image with no controls and no counter.
Acceptance Criteria
public/post/garden/spring-2021-try-again/index.htmlholds nine<picture>elements orderedcarousel-01.webptocarousel-09.webp, excludesfeatured.webp, and shows a counter reading1 / 9.content/post/general/building-a-joystick/yields four slides,arcade-joystick-01.jpegtoarcade-joystick-04.jpeg.grep -r 'CAROUSEL' public/prints nothing.- Every carousel
<img>has a non-emptyalt,width,heightandloading="lazy". pnpm run testpasses, including the singleh1heading check andpnpm run test:kanban.