Carousel of our supporters

[swantzter]

We'd like to add a carousel showcasing our supporting organisations just before the footer (I'd say on the homepage only, maybe) If we don't have the logo for a supporter we should fallback to text

I would envision doing it as follows:

extract content/pages/acknowledgements.md into a YAML file say config/supporters.yml looking something like this

- name: Sponsor A
  link: https://example.com
  logo: /static/img/logos/sponsor-a.svg
- name: Sponsor B
  link: https://example.com

include that in config.yml

SPONSORS:
  !include config/supporters.yml

Then, of course, us that to generate the list in acknowledgements.md as well as the new carousel. You can look at how this is done in templates/footer.yml Possibly make the acknowledgements.md page a grid or use the carousel there too.

Then I'd be interested in doing this with only css if possible using things like scroll-snap-type, but with that auto-scroll might be difficult so it might make more sense to make an animation with keyframes, or give in and do the scrolling with js

CSS Tricks has god articles on both these approaches

• https://css-tricks.com/css-only-carousel/
• https://css-tricks.com/infinite-all-css-scrolling-slideshow/

Things to consider

• @media (prefers-reduced-motion: reduce) needs to be respected
• Might want to use a wee bit of js to randomise the start position of the carousel so we don't risk never showing some sponsors
• Given it would be placed just before the footer we can most likely take advantage of <img loading=lazy>