Skip to content

Add MastHead to the GalleryLayout #13988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 27, 2025
Merged

Add MastHead to the GalleryLayout #13988

merged 1 commit into from
May 27, 2025

Conversation

marjisound
Copy link
Contributor

What does this change?

Adding MastHead to the GalleryLayout

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.

@marjisound marjisound changed the title add MastHead to the GalleryLayout Add MastHead to the GalleryLayout May 21, 2025
Copy link

Size Change: 0 B

Total Size: 1.04 MB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1032.client.web.********************.js 3.31 kB
dotcom-rendering/dist/117.client.web.********************.js 2.88 kB
dotcom-rendering/dist/1209.client.web.********************.js 3.13 kB
dotcom-rendering/dist/1656.client.web.********************.js 49.5 kB
dotcom-rendering/dist/1662.client.web.********************.js 7.97 kB
dotcom-rendering/dist/2045.client.web.********************.js 2.63 kB
dotcom-rendering/dist/2161.client.web.********************.js 3.9 kB
dotcom-rendering/dist/223.client.web.********************.js 527 B
dotcom-rendering/dist/2270.client.web.********************.js 3.65 kB
dotcom-rendering/dist/2309.client.web.********************.js 3.27 kB
dotcom-rendering/dist/2360.client.web.********************.js 19.8 kB
dotcom-rendering/dist/3031.client.web.********************.js 2.77 kB
dotcom-rendering/dist/3292.client.web.********************.js 2.11 kB
dotcom-rendering/dist/3384.client.web.********************.js 3.86 kB
dotcom-rendering/dist/3473.client.web.********************.js 3.67 kB
dotcom-rendering/dist/3485.client.web.********************.js 4.67 kB
dotcom-rendering/dist/3598.client.web.********************.js 3.65 kB
dotcom-rendering/dist/3605.client.web.********************.js 15.1 kB
dotcom-rendering/dist/3619.client.web.********************.js 4.45 kB
dotcom-rendering/dist/3929.client.web.********************.js 3.45 kB
dotcom-rendering/dist/4063.client.web.********************.js 5.47 kB
dotcom-rendering/dist/4221.client.web.********************.js 2.63 kB
dotcom-rendering/dist/4258.client.web.********************.js 4.08 kB
dotcom-rendering/dist/4306.client.web.********************.js 22.7 kB
dotcom-rendering/dist/4308.client.web.********************.js 3.57 kB
dotcom-rendering/dist/4324.client.web.********************.js 619 B
dotcom-rendering/dist/4457.client.web.********************.js 6.23 kB
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/5118.client.web.********************.js 5.82 kB
dotcom-rendering/dist/5140.client.web.********************.js 5.42 kB
dotcom-rendering/dist/5144.client.web.********************.js 2.55 kB
dotcom-rendering/dist/5448.client.web.********************.js 4.37 kB
dotcom-rendering/dist/545.client.web.********************.js 531 B
dotcom-rendering/dist/562.client.web.********************.js 11.8 kB
dotcom-rendering/dist/5715.client.web.********************.js 3.48 kB
dotcom-rendering/dist/5880.client.web.********************.js 3.13 kB
dotcom-rendering/dist/5923.client.web.********************.js 2.68 kB
dotcom-rendering/dist/6038.client.web.********************.js 2.76 kB
dotcom-rendering/dist/6217.client.web.********************.js 3.75 kB
dotcom-rendering/dist/6238.client.web.********************.js 3.1 kB
dotcom-rendering/dist/6262.client.web.********************.js 11.8 kB
dotcom-rendering/dist/6501.client.web.********************.js 65.6 kB
dotcom-rendering/dist/6555.client.web.********************.js 5.45 kB
dotcom-rendering/dist/6562.client.web.********************.js 439 B
dotcom-rendering/dist/6722.client.web.********************.js 3.06 kB
dotcom-rendering/dist/6750.client.web.********************.js 10.6 kB
dotcom-rendering/dist/6873.client.web.********************.js 4.13 kB
dotcom-rendering/dist/695.client.web.********************.js 4.51 kB
dotcom-rendering/dist/7017.client.web.********************.js 157 B
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB
dotcom-rendering/dist/732.client.web.********************.js 3.09 kB
dotcom-rendering/dist/7398.client.web.********************.js 3.57 kB
dotcom-rendering/dist/7708.client.web.********************.js 5.05 kB
dotcom-rendering/dist/7735.client.web.********************.js 16.5 kB
dotcom-rendering/dist/7927.client.web.********************.js 2.76 kB
dotcom-rendering/dist/8068.client.web.********************.js 2.88 kB
dotcom-rendering/dist/808.client.web.********************.js 3.28 kB
dotcom-rendering/dist/8151.client.web.********************.js 4.17 kB
dotcom-rendering/dist/8212.client.web.********************.js 5.04 kB
dotcom-rendering/dist/8348.client.web.********************.js 20.5 kB
dotcom-rendering/dist/8385.client.web.********************.js 3.88 kB
dotcom-rendering/dist/8436.client.web.********************.js 3.63 kB
dotcom-rendering/dist/8602.client.web.********************.js 3.39 kB
dotcom-rendering/dist/8610.client.web.********************.js 3.9 kB
dotcom-rendering/dist/8619.client.web.********************.js 4.44 kB
dotcom-rendering/dist/864.client.web.********************.js 3.17 kB
dotcom-rendering/dist/8942.client.web.********************.js 4.44 kB
dotcom-rendering/dist/9120.client.web.********************.js 2.89 kB
dotcom-rendering/dist/9135.client.web.********************.js 3.54 kB
dotcom-rendering/dist/9376.client.web.********************.js 2.52 kB
dotcom-rendering/dist/967.client.web.********************.js 2.87 kB
dotcom-rendering/dist/9822.client.web.********************.js 7.67 kB
dotcom-rendering/dist/9870.client.web.********************.js 4.77 kB
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.42 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.61 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.69 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.6 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.61 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.89 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.68 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.57 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.3 kB
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.87 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.4 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.46 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.45 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.98 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.31 kB
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.26 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 364 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.43 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.51 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.29 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.12 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.9 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B
dotcom-rendering/dist/index.client.web.********************.js 46.3 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 852 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.82 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.78 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.69 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.19 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.84 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.58 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.56 kB
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.49 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.84 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.7 kB
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 3.67 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.68 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.97 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.24 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.35 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.69 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.56 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.14 kB
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.6 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.16 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.09 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.16 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.21 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.21 kB
dotcom-rendering/dist/sentry.client.web.********************.js 802 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.91 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 487 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.18 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 897 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 919 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 1.11 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 2.6 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 4.99 kB
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.56 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.91 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.14 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.66 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.6 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.85 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.5 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.92 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.06 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.33 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 843 B

compressed-size-action

@marjisound marjisound added the run_chromatic Runs chromatic when label is applied label May 21, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 21, 2025
@marjisound marjisound linked an issue May 21, 2025 that may be closed by this pull request
Copy link
Contributor

@JamieB-gu JamieB-gu left a comment

Choose a reason for hiding this comment

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

Looks good, one question.

Comment on lines +44 to +45
hasPageSkin={false}
hasPageSkinContentSelfConstrain={false}
Copy link
Contributor

Choose a reason for hiding this comment

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

Will these always be false? Do they rely on commercial data @arelra ?

Copy link
Member

@arelra arelra May 27, 2025

Choose a reason for hiding this comment

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

For a GalleryLayout these will always be false as we only apply page skins to network fronts.

hasPageSkin comes from the config in Frontend payload which in turn is populated by the commercial DFP jobs that allow Frontend match the requested page to an 'active' page skin.

hasPageSkinContentSelfConstrain is an option to control whether the container should be full width but the content should still constrain to a page skin width.

cc @Amouzle

Comment on lines +44 to +45
hasPageSkin={false}
hasPageSkinContentSelfConstrain={false}
Copy link
Member

@arelra arelra May 27, 2025

Choose a reason for hiding this comment

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

For a GalleryLayout these will always be false as we only apply page skins to network fronts.

hasPageSkin comes from the config in Frontend payload which in turn is populated by the commercial DFP jobs that allow Frontend match the requested page to an 'active' page skin.

hasPageSkinContentSelfConstrain is an option to control whether the container should be full width but the content should still constrain to a page skin width.

cc @Amouzle

@marjisound marjisound merged commit 2ac2e62 into main May 27, 2025
33 checks passed
@marjisound marjisound deleted the gallery-masthead branch May 27, 2025 10:03
@prout-bot
Copy link

Seen on PROD (merged by @marjisound 13 minutes and 46 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.

Gallery Masthead
4 participants