Skip to content
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

Support fixing image sizes at tablet and desktop #12572

Merged
merged 9 commits into from
Oct 28, 2024

Conversation

jamesmockett
Copy link
Contributor

What does this change?

  • Adds imageFixedSizes prop to ImageWrapper, allowing fixed image sizes to be specified for mobile, tablet and desktop breakpoints
  • Removes isFlexibleContainer prop from ImageWrapper and moves logic up to Card component
  • Updates fixed image size already in place for flexible containers
  • Adds a new 10px gap size to CardLayout
{
  mobile: 'tiny',
  tablet: 'small',
  desktop: 'medium',
}

Why?

Image sizes were already fixed below tablet with a custom size for flexible containers toggled by the isFlexibleContainer prop on ImageWrapper. Fixed image sizes are also required for other containers such as scrollable small which, unlike the flexible containers, has fixed images sizes at all breakpoints.

Screenshots

mobileMedium (86px) tablet (122.5px)
mobileMedium tablet

@jamesmockett jamesmockett self-assigned this Oct 17, 2024
@jamesmockett jamesmockett added run_chromatic Runs chromatic when label is applied and removed dotcom-rendering labels Oct 17, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 17, 2024
Copy link

github-actions bot commented Oct 17, 2024

Size Change: +168 B (+0.02%)

Total Size: 928 kB

Filename Size Change
dotcom-rendering/dist/9897.client.web.********************.js 12.2 kB +168 B (+1.4%)
ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1000.client.web.********************.js 999 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B
dotcom-rendering/dist/1156.client.web.********************.js 3.56 kB
dotcom-rendering/dist/1391.client.web.********************.js 725 B
dotcom-rendering/dist/1417.client.web.********************.js 2.53 kB
dotcom-rendering/dist/146.client.web.********************.js 5.29 kB
dotcom-rendering/dist/1476.client.web.********************.js 784 B
dotcom-rendering/dist/1515.client.web.********************.js 6.86 kB
dotcom-rendering/dist/1628.client.web.********************.js 2.87 kB
dotcom-rendering/dist/1667.client.web.********************.js 918 B
dotcom-rendering/dist/1884.client.web.********************.js 3.4 kB
dotcom-rendering/dist/1888.client.web.********************.js 2.92 kB
dotcom-rendering/dist/1904.client.web.********************.js 12.6 kB
dotcom-rendering/dist/1940.client.web.********************.js 507 B
dotcom-rendering/dist/2123.client.web.********************.js 619 B
dotcom-rendering/dist/2182.client.web.********************.js 529 B
dotcom-rendering/dist/2249.client.web.********************.js 4.91 kB
dotcom-rendering/dist/2310.client.web.********************.js 880 B
dotcom-rendering/dist/2455.client.web.********************.js 4.55 kB
dotcom-rendering/dist/267.client.web.********************.js 917 B
dotcom-rendering/dist/281.client.web.********************.js 642 B
dotcom-rendering/dist/3006.client.web.********************.js 4.48 kB
dotcom-rendering/dist/3109.client.web.********************.js 803 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B
dotcom-rendering/dist/3364.client.web.********************.js 3.97 kB
dotcom-rendering/dist/346.client.web.********************.js 3.22 kB
dotcom-rendering/dist/3769.client.web.********************.js 999 B
dotcom-rendering/dist/3921.client.web.********************.js 2 kB
dotcom-rendering/dist/408.client.web.********************.js 11 kB
dotcom-rendering/dist/4122.client.web.********************.js 1.89 kB
dotcom-rendering/dist/4149.client.web.********************.js 3.77 kB
dotcom-rendering/dist/4282.client.web.********************.js 685 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/4628.client.web.********************.js 654 B
dotcom-rendering/dist/4769.client.web.********************.js 4.28 kB
dotcom-rendering/dist/4820.client.web.********************.js 2.42 kB
dotcom-rendering/dist/4866.client.web.********************.js 6.32 kB
dotcom-rendering/dist/4903.client.web.********************.js 6.04 kB
dotcom-rendering/dist/4941.client.web.********************.js 890 B
dotcom-rendering/dist/4951.client.web.********************.js 11.4 kB
dotcom-rendering/dist/5087.client.web.********************.js 439 B
dotcom-rendering/dist/5340.client.web.********************.js 3.32 kB
dotcom-rendering/dist/5371.client.web.********************.js 3.34 kB
dotcom-rendering/dist/5412.client.web.********************.js 2.89 kB
dotcom-rendering/dist/5538.client.web.********************.js 6.18 kB
dotcom-rendering/dist/5658.client.web.********************.js 750 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B
dotcom-rendering/dist/5761.client.web.********************.js 4.65 kB
dotcom-rendering/dist/5880.client.web.********************.js 828 B
dotcom-rendering/dist/5937.client.web.********************.js 2.17 kB
dotcom-rendering/dist/5944.client.web.********************.js 5.16 kB
dotcom-rendering/dist/5982.client.web.********************.js 3.78 kB
dotcom-rendering/dist/6044.client.web.********************.js 726 B
dotcom-rendering/dist/6045.client.web.********************.js 1.91 kB
dotcom-rendering/dist/6071.client.web.********************.js 577 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B
dotcom-rendering/dist/6261.client.web.********************.js 3.03 kB
dotcom-rendering/dist/6291.client.web.********************.js 4.27 kB
dotcom-rendering/dist/6505.client.web.********************.js 1 kB
dotcom-rendering/dist/6598.client.web.********************.js 780 B
dotcom-rendering/dist/661.client.web.********************.js 3.21 kB
dotcom-rendering/dist/6638.client.web.********************.js 907 B
dotcom-rendering/dist/6665.client.web.********************.js 5.03 kB
dotcom-rendering/dist/6738.client.web.********************.js 6.01 kB
dotcom-rendering/dist/678.client.web.********************.js 804 B
dotcom-rendering/dist/6915.client.web.********************.js 22.7 kB
dotcom-rendering/dist/7072.client.web.********************.js 3.85 kB
dotcom-rendering/dist/7081.client.web.********************.js 20.2 kB
dotcom-rendering/dist/7116.client.web.********************.js 23 kB
dotcom-rendering/dist/7242.client.web.********************.js 4.52 kB
dotcom-rendering/dist/7341.client.web.********************.js 4 kB
dotcom-rendering/dist/7407.client.web.********************.js 3.7 kB
dotcom-rendering/dist/7691.client.web.********************.js 853 B
dotcom-rendering/dist/7780.client.web.********************.js 2.28 kB
dotcom-rendering/dist/7962.client.web.********************.js 3.58 kB
dotcom-rendering/dist/8103.client.web.********************.js 4.02 kB
dotcom-rendering/dist/83.client.web.********************.js 750 B
dotcom-rendering/dist/8318.client.web.********************.js 2.17 kB
dotcom-rendering/dist/840.client.web.********************.js 3.21 kB
dotcom-rendering/dist/8426.client.web.********************.js 1.91 kB
dotcom-rendering/dist/8437.client.web.********************.js 3.14 kB
dotcom-rendering/dist/8504.client.web.********************.js 827 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B
dotcom-rendering/dist/8671.client.web.********************.js 157 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B
dotcom-rendering/dist/8730.client.web.********************.js 4.4 kB
dotcom-rendering/dist/8746.client.web.********************.js 3.01 kB
dotcom-rendering/dist/8815.client.web.********************.js 3.86 kB
dotcom-rendering/dist/8822.client.web.********************.js 526 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B
dotcom-rendering/dist/8903.client.web.********************.js 3.83 kB
dotcom-rendering/dist/8990.client.web.********************.js 3.41 kB
dotcom-rendering/dist/9080.client.web.********************.js 3.69 kB
dotcom-rendering/dist/9122.client.web.********************.js 8.08 kB
dotcom-rendering/dist/9132.client.web.********************.js 4.18 kB
dotcom-rendering/dist/9184.client.web.********************.js 493 B
dotcom-rendering/dist/9216.client.web.********************.js 3.45 kB
dotcom-rendering/dist/9373.client.web.********************.js 4.4 kB
dotcom-rendering/dist/940.client.web.********************.js 10.3 kB
dotcom-rendering/dist/9493.client.web.********************.js 785 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B
dotcom-rendering/dist/9608.client.web.********************.js 3.64 kB
dotcom-rendering/dist/9696.client.web.********************.js 5.88 kB
dotcom-rendering/dist/9721.client.web.********************.js 717 B
dotcom-rendering/dist/9736.client.web.********************.js 44.2 kB
dotcom-rendering/dist/9835.client.web.********************.js 647 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.96 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.7 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.33 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.72 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.26 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.96 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.68 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.52 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.96 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.75 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.2 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.93 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 970 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.5 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.4 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B
dotcom-rendering/dist/index.client.web.********************.js 46.1 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 851 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.55 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.24 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.77 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.62 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.1 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.78 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.28 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.83 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.98 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.22 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.2 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 803 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 469 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.3 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.02 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.31 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.31 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.61 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB
dotcom-rendering/dist/sentry.client.web.********************.js 792 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.85 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 482 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.72 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 733 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.51 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.6 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.48 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.22 kB
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.25 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.74 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.05 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.99 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.66 kB
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 5.94 kB

compressed-size-action

@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Oct 17, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 17, 2024
@jamesmockett jamesmockett marked this pull request as ready for review October 17, 2024 16:46
@jamesmockett jamesmockett requested a review from a team as a code owner October 17, 2024 16:46
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.

@jamesmockett jamesmockett requested review from abeddow91, cemms1 and Georges-GNM and removed request for a team October 17, 2024 17:14
@jamesmockett jamesmockett force-pushed the jm/card-fixed-image-sizes branch 2 times, most recently from 3daf9cb to 96fe6c1 Compare October 18, 2024 17:10
@jamesmockett jamesmockett force-pushed the jm/card-fixed-image-sizes branch 2 times, most recently from f2ebb0c to e3c3a01 Compare October 25, 2024 13:40
@jamesmockett jamesmockett added the run_chromatic Runs chromatic when label is applied label Oct 28, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 28, 2024
@jamesmockett jamesmockett merged commit ae7fa65 into main Oct 28, 2024
32 checks passed
@jamesmockett jamesmockett deleted the jm/card-fixed-image-sizes branch October 28, 2024 09:48
@prout-bot
Copy link

Seen on PROD (merged by @jamesmockett 9 minutes and 49 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.

3 participants