Skip to content

Insert ads in Galleries #14299

Merged
deedeeh merged 21 commits intomainfrom
md/insert-galleries-ads
Aug 6, 2025
Merged

Insert ads in Galleries #14299
deedeeh merged 21 commits intomainfrom
md/insert-galleries-ads

Conversation

@deedeeh
Copy link
Contributor

@deedeeh deedeeh commented Jul 29, 2025

What does this change?

This PR inserts ads in Galleries DCR. Check issue #12293

The changes includes:

  • top-above-nav slot for desktop which appears as the first element on the page.
  • All inline ads in the body of the Gallery which renders after every 4 images for desktop.
  • top-above-nav--mobile as the first slot in the body of the Gallery and then inline1, inline2, etc... for mobile which still renders after every 4 images similar to desktop.
  • merchandising-high for mobile and desktop but in the Labs Galleries migration we are not showing this slot so I already added the condition for it in this PR.
  • merchandising for mobile and desktop. Also not showing in Labs Galleries after migration.
  • All the styling should be correct (ad label, borders, light mode palette, dark mode palette, etc...)

At the moment merchandising-high and merchandising are stacked because the "Related stories" and "Most popular" containers are not added yet.

All the screenshots are captured in light mode because we are still haven't worked on ads in App. That will be next step after we are done with Web.

To-do:

  • Insert most-pop slot for desktop which should be added as part of the "Most popular" container. We don't show it for mobile breakpoint. See hide mostpop ad slot #9642

Why?

This is part of the Galleries migration from Frontend to DCR.

Screenshots

PROD DEV
before after
before2 after2
before3 after3
before4 after4
before5 after5
before6 after6
before7 after7
before8 after8

@deedeeh deedeeh force-pushed the md/insert-galleries-ads branch from bc5212c to 8ecd2ce Compare July 29, 2025 12:48
@deedeeh deedeeh changed the title Md/insert galleries ads Insert ads in Galleries Jul 29, 2025
@github-actions
Copy link

github-actions bot commented Jul 29, 2025

@github-actions
Copy link

github-actions bot commented Jul 29, 2025

@deedeeh deedeeh marked this pull request as ready for review July 29, 2025 14:04
@deedeeh deedeeh requested a review from a team as a code owner July 29, 2025 14:04
@github-actions
Copy link

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.

@deedeeh deedeeh requested a review from a team July 29, 2025 14:04
@deedeeh deedeeh force-pushed the md/insert-galleries-ads branch from 8ecd2ce to c3036a6 Compare July 29, 2025 14:13
Copy link
Contributor

@cemms1 cemms1 left a comment

Choose a reason for hiding this comment

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

Really great work here @deedeeh 👏
Have left a couple of comments but nothing huge

@deedeeh
Copy link
Contributor Author

deedeeh commented Jul 30, 2025

Really great work here @deedeeh 👏 Have left a couple of comments but nothing huge

Thank you Charlotte ☺️ I addressed your comments and resolved the ones that I am sure about as I made the changes requested but I left unresolved the ones that had a bit of discussion until you believe it's resolved and you can mark it.

@JamieB-gu JamieB-gu linked an issue Jul 30, 2025 that may be closed by this pull request
@deedeeh deedeeh force-pushed the md/insert-galleries-ads branch from fd7e504 to 4d9ab48 Compare July 30, 2025 13:21
Copy link
Contributor

@cemms1 cemms1 left a comment

Choose a reason for hiding this comment

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

👏 Fantastic work Dina!

@deedeeh deedeeh force-pushed the md/insert-galleries-ads branch from e057695 to 18f1e74 Compare July 31, 2025 14:50
@deedeeh deedeeh added the run_chromatic Runs chromatic when label is applied label Aug 5, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 5, 2025
@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label Aug 5, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 5, 2025
@deedeeh deedeeh added the run_chromatic Runs chromatic when label is applied label Aug 6, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Aug 6, 2025
@deedeeh deedeeh merged commit b41424c into main Aug 6, 2025
31 checks passed
@deedeeh deedeeh deleted the md/insert-galleries-ads branch August 6, 2025 08:25
@prout-bot
Copy link

Seen on PROD (merged by @deedeeh 10 minutes and 7 seconds ago) Please check your changes!

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Include Ads On Galleries

4 participants