Add image number above caption in Hosted Gallery

[deedeeh]

What does this change?

This PR adds the image number above the caption in Hosted Content Gallery.

Tested locally with multiple Hosted Galleries and it works as expected.

Why?

Migrating Hosted Content to DCAR and Hosted Gallery is the last page to migrate. The new designs require this change.

Screenshots

Before	After

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1215810866963288

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[github-actions]

Deploy build 28359 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 28359 of dotcom:rendering-all to CODE
• Deploy parts of build 28359 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[dskamiotis]

This looks good to me Dina, nice move with the isHostedContent to be the gate the share button inclusion

[github-actions]

Deploy build 1928 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 1928 of dotcom:ab-testing to CODE
• Deploy parts of build 1928 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[cemms1]

This is great! Though I think we can re-use position here instead of creating imageIndex for brevity. I left a comment explaining what I'm thinking. Let me know if you want to chat about it

[cemms1]

Shall we add a description to these props to indicate that they are only used to display the image number in hosted gallery pages?

[cemms1]

we already have position so it might be worth trying to reuse that. The problem with position is that this takes into account mainMedia, which we omit in HostedGallery pages.

If we strip mainMedia out of the hosted gallery data (which we should do anyway as we throw it away at the rendering stage) we should be able to just use position here.

To do that, we'd add a condition to the enhance step to omit main media for hosted gallery pages

dotcom-rendering/dotcom-rendering/src/model/enhance-images.ts

Lines 424 to 460 in 7ee19c9

	const enhance =
	(
	isPhotoEssay: boolean,
	imagesForLightbox: ImageForLightbox[],
	isPhotoEssayMainMedia = false,
	) =>
	(elements: FEElement[]): FEElement[] => {
	if (isPhotoEssay) {
	if (isPhotoEssayMainMedia) {
	return new Enhancer(elements)
	.addMultiImageElements()
	.addTitles()
	.addCaptionsToMultis()
	.addCaptionsToImages()
	.addImagePositions(imagesForLightbox).elements;
	}
	return new Enhancer(elements)
	.stripCaptions()
	.removeCredit()
	.addMultiImageElements()
	.addTitles()
	.addCaptionsToMultis()
	.addCaptionsToImages()
	.addImagePositions(imagesForLightbox).elements;
	}
	return (
	new Enhancer(elements)
	// Replace pairs of halfWidth images with MultiImageBlockElements
	.addMultiImageElements()
	// If any MultiImageBlockElement is followed by a ul/l caption, delete the special caption
	// element and use the value for the multi image `caption` prop
	.addCaptionsToMultis()
	.addImagePositions(imagesForLightbox).elements
	);
	};

[cemms1]

@deedeeh I'm happy to do this in a separate PR, then you can use position in this PR to simplify things

[dskamiotis]

Nice refactor for the image position index - looks good to me 👍

[dskamiotis]

nice approach, a bit easier to follow but still as affective 👍