Spike Image Carousel to figure out how much work it is

[JamieB-gu]

Notes on the Image Carousel spike: https://docs.google.com/document/d/1YVzvcqsmQIcTFWPEolMCzYqxLQIEjbhUc69Ys7IrPnk/edit?usp=sharing

Spike branch: https://github.com/guardian/dotcom-rendering/tree/jm/spike-image-carousel

[arelra]

@jamesmockett fyi previously raised carousel bugs which might factor into this estimate:

https://github.com/guardian/dotcom-rendering/issues/11466 https://github.com/guardian/dotcom-rendering/issues/10246 https://github.com/guardian/dotcom-rendering/issues/8070

[jamesmockett]

Product / design questions

• Is this intended to replace the existing slideshow completely or will they co-exist so you can use either?
• Does it need any Dynamo styling changes? (Fairground removed Dynamo styling everywhere, but then reinstated it so I'm not sure of the state of this.) The current slideshow component simply relocates the image caption from the bottom to the top, but we now also have pagination indicators and controls sitting below the image.
• What are the boost, boosted, mega boosted and giga boosted sizes mentioned in the designs? Are these new container types? Are there any other related Fairground changes we need to be aware of?
• Is the slideshow intended to be only used for the main story, or will it also appear at smaller sizes further down the page? If so, what happens with the pagination indicators and controls as space will be constrained?

Technical questions

• Is it okay to use CSS scroll snap so the browser handles much of the complexity of scrolling and swiping? This is used for carousel functionality elsewhere on the page, although these do have some bugs and this is more prominent on the page.
  • Is the browser default scrolling animation acceptable? It seems to match the example shown in the ticket.
  • Using scrollIntoView() appears to shift the page horizontally if the carousel is not fully in the viewport so we may need to calculate image offsets and scroll to an absolute position with scrollTo() like the existing Carousel component.
  • Does swiping and hiding scroll bars work reliably across browsers and devices?
• The prototype hasn’t tried to implement the scrolling dots animation. The animation is quite subtle, but likely to be fairly fiddly to implement. Could we use something simpler if we need this sooner? (And add the nicer animation later.)
• Navigation needs to be themed based on the container type. Is this dependent on Fairground changes to containers?

[jamesmockett]

Response from Charlotte:

1. Does it need any Dynamo styling changes? (Fairground removed Dynamo styling everywhere, but then reinstated it so I'm not sure of the state of this.) The current slideshow component simply relocates the image caption from the bottom to the top, but we now also have pagination indicators and controls sitting below the image.

Dynamo does still exist as a concept but some of the dynamo special styling has been removed in work the Fairground team have done in relation to card designs.

To clarify, the "dynamo" is the first or main story in a dynamic/package container. The equivalent to this in the new world is flexible/special.

2. What are the boost, boosted, mega boosted and giga boosted sizes mentioned in the designs? Are these new container types? Are there any other related Fairground changes we need to be aware of?

There is a new, optional field available on the DCRFrontCard type in DCR called "boostLevel". The legacy field is called "isBoosted". boostLevel has the following options: "default", "boost", "megaboost", "gigaboost":

export type BoostLevel = 'default' | 'boost' | 'megaboost' | 'gigaboost';

The boost level determines the size of the headline and image for cards. You can think of megaboost as a proxy for the legacy combination of "isBoosted" and "showBoostedHeadline".

gigaboost is only available on splash cards (the main story) for the new flexible/general and flexible/special containers (which exist in DCR but are not yet production-ready).

You can find the designs here https://www.figma.com/design/uNL0UL65eoC80JPrglYrAx/Flexible-Containers?node-id=6307-21824 but I'm very happy to talk the WebEx team through these if needed!

There is a document here https://docs.google.com/presentation/d/1SXME3h3QiXVhgGWvz3bu4MwZ5lSFB1wqcpZvizE80kc/edit?usp=sharing created to aid knowledge-sharing between the WebEx and Fairground teams.

3. Is the slideshow intended to be only used for the main story (e.g. biggest card in the container), or will it also appear at smaller sizes further down the page? If so, what happens with the pagination indicators and controls as space will be constrained?

I think that slideshow will be possible in the following scenarios for all breakpoints:

• flexible/general container splash (main story, any boost level)
• flexible/general container standard card (only if boosted or mega boosted)
• flexible/special container splash (main story)
• flexible/special container standard card

[jamesmockett]

And a further clarification:

Standard cards are not large enough to have a slideshow in as a standard card must be boosted in order to be large enough to show a slideshow. It is not possible to boost standard cards in a flexible/special container.