Skip to content

Add image number above caption in Hosted Gallery#16207

Open
deedeeh wants to merge 1 commit into
mainfrom
dina/add-picture-index-hosted-gallery
Open

Add image number above caption in Hosted Gallery#16207
deedeeh wants to merge 1 commit into
mainfrom
dina/add-picture-index-hosted-gallery

Conversation

@deedeeh

@deedeeh deedeeh commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

What does this change?

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

Why?

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

Screenshots

Before After
before after
before2 after2
before3 after3

@deedeeh deedeeh added maintenance Departmental tracking: maintenance work, not a fix or a feature Commercial 💰 labels Jun 18, 2026
@deedeeh deedeeh changed the title Add image index in Hosted Gallery Add image number above caption in Hosted Gallery Jun 18, 2026
const emptyCaption = captionHtml === undefined || captionHtml.trim() === '';
const hideCredit =
displayCredit === false || credit === undefined || credit === '';
const shouldIncludeShareButton =

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed this to avoid repetition as we can use the same isHostedGallery with just the ! to exclude Share from Hosted Gallery.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👍

@deedeeh deedeeh marked this pull request as ready for review June 18, 2026 12:18
@github-actions

Copy link
Copy Markdown

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

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown

@deedeeh deedeeh force-pushed the dina/add-picture-index-hosted-gallery branch from d3723a3 to 099df65 Compare June 18, 2026 13:32

@dskamiotis dskamiotis left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

const emptyCaption = captionHtml === undefined || captionHtml.trim() === '';
const hideCredit =
displayCredit === false || credit === undefined || credit === '';
const shouldIncludeShareButton =

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👍

padding: ${space[2]}px 0 ${space[1]}px;
`}
>
{position - 1}/{imagesLength}

@dskamiotis dskamiotis Jun 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to clarify my understanding why this uses position - 1? The surrounding lightbox code makes position look 1-based:

const getPreviousPosition = (position: number, length: number): number =>
position <= 1
? // Cycle around to the end
length
: position - 1;

although local testing suggests the displayed counter is correct, so I may be missing where this value is normalised earlier?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't look into the Lightbox file but I looked how position is used in the GalleryCaption component where you can find in normal Gallery the share button got a hash property where the position is used and if you check the share button in the first image in the body of a normal Gallery it will have img-2 that's why I did position - 1.

@dskamiotis dskamiotis Jun 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes perfect sense now, thanks.
Happy to approve this as is nice work! 👍

Optional follow-up when convenient: maybe add a short inline comment noting that body image position is offset by main media (so the first body image is 2), which is why we render position - 1? It may help avoid future confusion?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Commercial 💰 maintenance Departmental tracking: maintenance work, not a fix or a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants