Add thumbnail image to audio page #12459

oliverabrahams · 2024-09-26T09:48:12Z

What does this change?

Adds the AudioImageBlock to the blocks using an enhancer to the block for audio articles

Why?

In audio articles the thumbnail image is rendered at the bottom of the article.

Screenshots

Before	After

# Conflicts: # dotcom-rendering/src/layouts/StandardLayout.tsx

github-actions · 2024-09-26T09:52:57Z

Size Change: 0 B

Total Size: 898 kB

ℹ️ 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.95 kB
`dotcom-rendering/dist/1391.client.web.********************.js`	725 B
`dotcom-rendering/dist/1417.client.web.********************.js`	2.28 kB
`dotcom-rendering/dist/1476.client.web.********************.js`	784 B
`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/2390.client.web.********************.js`	4.06 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.49 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/3673.client.web.********************.js`	3.16 kB
`dotcom-rendering/dist/3769.client.web.********************.js`	999 B
`dotcom-rendering/dist/408.client.web.********************.js`	10.6 kB
`dotcom-rendering/dist/4088.client.web.********************.js`	3.97 kB
`dotcom-rendering/dist/4122.client.web.********************.js`	1.83 kB
`dotcom-rendering/dist/4149.client.web.********************.js`	3.77 kB
`dotcom-rendering/dist/4172.client.web.********************.js`	3.72 kB
`dotcom-rendering/dist/4282.client.web.********************.js`	685 B
`dotcom-rendering/dist/4367.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/4493.client.web.********************.js`	4.4 kB
`dotcom-rendering/dist/4501.client.web.********************.js`	4.29 kB
`dotcom-rendering/dist/4590.client.web.********************.js`	5.29 kB
`dotcom-rendering/dist/4628.client.web.********************.js`	654 B
`dotcom-rendering/dist/4696.client.web.********************.js`	3.67 kB
`dotcom-rendering/dist/4749.client.web.********************.js`	20.2 kB
`dotcom-rendering/dist/4799.client.web.********************.js`	4.02 kB
`dotcom-rendering/dist/4866.client.web.********************.js`	6.31 kB
`dotcom-rendering/dist/4875.client.web.********************.js`	157 B
`dotcom-rendering/dist/4886.client.web.********************.js`	8.09 kB
`dotcom-rendering/dist/4941.client.web.********************.js`	890 B
`dotcom-rendering/dist/4966.client.web.********************.js`	6.18 kB
`dotcom-rendering/dist/5087.client.web.********************.js`	439 B
`dotcom-rendering/dist/5340.client.web.********************.js`	3.32 kB
`dotcom-rendering/dist/5341.client.web.********************.js`	2.17 kB
`dotcom-rendering/dist/5371.client.web.********************.js`	3.34 kB
`dotcom-rendering/dist/5409.client.web.********************.js`	3.03 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/5870.client.web.********************.js`	5.2 kB
`dotcom-rendering/dist/5880.client.web.********************.js`	828 B
`dotcom-rendering/dist/5944.client.web.********************.js`	4.97 kB
`dotcom-rendering/dist/5982.client.web.********************.js`	3.78 kB
`dotcom-rendering/dist/6044.client.web.********************.js`	726 B
`dotcom-rendering/dist/6058.client.web.********************.js`	3.24 kB
`dotcom-rendering/dist/6071.client.web.********************.js`	577 B
`dotcom-rendering/dist/6135.client.web.********************.js`	779 B
`dotcom-rendering/dist/6505.client.web.********************.js`	1 kB
`dotcom-rendering/dist/6565.client.web.********************.js`	1.99 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/6738.client.web.********************.js`	6.45 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/7116.client.web.********************.js`	23 kB
`dotcom-rendering/dist/7242.client.web.********************.js`	4.55 kB
`dotcom-rendering/dist/7341.client.web.********************.js`	4 kB
`dotcom-rendering/dist/7352.client.web.********************.js`	5.91 kB
`dotcom-rendering/dist/7407.client.web.********************.js`	3.71 kB
`dotcom-rendering/dist/7691.client.web.********************.js`	853 B
`dotcom-rendering/dist/7722.client.web.********************.js`	2.17 kB
`dotcom-rendering/dist/7780.client.web.********************.js`	2.27 kB
`dotcom-rendering/dist/7962.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/823.client.web.********************.js`	16.4 kB
`dotcom-rendering/dist/827.client.web.********************.js`	3.89 kB
`dotcom-rendering/dist/83.client.web.********************.js`	750 B
`dotcom-rendering/dist/840.client.web.********************.js`	3.2 kB
`dotcom-rendering/dist/8476.client.web.********************.js`	2.42 kB
`dotcom-rendering/dist/8483.client.web.********************.js`	13.9 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/8648.client.web.********************.js`	2.87 kB
`dotcom-rendering/dist/8667.client.web.********************.js`	4.26 kB
`dotcom-rendering/dist/8697.client.web.********************.js`	956 B
`dotcom-rendering/dist/8730.client.web.********************.js`	4.43 kB
`dotcom-rendering/dist/8746.client.web.********************.js`	3.01 kB
`dotcom-rendering/dist/8822.client.web.********************.js`	526 B
`dotcom-rendering/dist/8833.client.web.********************.js`	829 B
`dotcom-rendering/dist/8990.client.web.********************.js`	3.41 kB
`dotcom-rendering/dist/9054.client.web.********************.js`	1.91 kB
`dotcom-rendering/dist/9105.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/9132.client.web.********************.js`	4.2 kB
`dotcom-rendering/dist/9184.client.web.********************.js`	493 B
`dotcom-rendering/dist/9216.client.web.********************.js`	3.45 kB
`dotcom-rendering/dist/940.client.web.********************.js`	10.2 kB
`dotcom-rendering/dist/9493.client.web.********************.js`	785 B
`dotcom-rendering/dist/9557.client.web.********************.js`	921 B
`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.94 kB
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	424 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.13 kB
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.5 kB
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	3.08 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.71 kB
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	7.91 kB
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	2.97 kB
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	6.69 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.79 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.97 kB
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	3.77 kB
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.01 kB
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	2.4 kB
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	968 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.74 kB
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.9 kB
`dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js`	7.65 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.42 kB
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.22 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.1 kB
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	783 B
`dotcom-rendering/dist/index.client.web.********************.js`	45 kB
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	2.79 kB
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	849 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	6.28 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.61 kB
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	4.18 kB
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	436 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.27 kB
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	5.5 kB
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	7.63 kB
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	4.95 kB
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.69 kB
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	4 kB
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	6.7 kB
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.67 kB
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	5.79 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.77 kB
`dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js`	5 kB
`dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js`	2.95 kB
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	4.6 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.69 kB
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	484 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`	729 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	1.75 kB
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	4.53 kB
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	5.63 kB
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	3.16 kB
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	3.49 kB
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	4.8 kB
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	4.21 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.26 kB
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.75 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/VideoFacebookBlockComponent-importable.client.web.********************.js`	4.96 kB
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	2.63 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}

github-actions · 2024-09-26T10:19:23Z

Deploy build 38022 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-09-26T10:53:31Z

Deploy build 13853 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-10-02T09:22:04Z

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.

# Conflicts: # dotcom-rendering/src/model/enhanceBlocks.ts

prout-bot · 2024-10-14T14:48:28Z

Seen on PROD (merged by @oliverabrahams 9 minutes and 54 seconds ago) Please check your changes!

oliverabrahams added 5 commits September 17, 2024 10:27

adding image to the StandardLayout.tsx if it is an audio article

52d9cbf

Merge branch 'main' into e2e/thumbnail-image-audio-page

52d5690

# Conflicts: # dotcom-rendering/src/layouts/StandardLayout.tsx

adding image to the elements in the block of the article

5dbf2d2

reduce the fields sent across to DCR

d123381

Add audio article image FE Article schema

b92ee12

github-actions bot added the dotcom-rendering label Sep 26, 2024

oliverabrahams changed the title ~~E2e/thumbnail image audio page~~ Add thumbnail image audio page Sep 26, 2024

oliverabrahams changed the title ~~Add thumbnail image audio page~~ Add thumbnail image to audio page Sep 26, 2024

stop adding undefined to block elements

f5b120d

Merge branch 'main' into e2e/thumbnail-image-audio-page

8f76fda

oliverabrahams added 3 commits September 26, 2024 15:57

Converting the audio image element into a FEImageElement

3b3ca9d

use enhancer only for audio articles

957bfd7

refactor move ImageBlockElement

df9e5f2

oliverabrahams added the run_chromatic Runs chromatic when label is applied label Oct 1, 2024

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 1, 2024

oliverabrahams added 4 commits October 1, 2024 12:14

Merge branch 'main' into e2e/thumbnail-image-audio-page

7649865

only add block if there is an ID

a37eff0

Update the image type in DCR

f194790

Changes to reflect moving more of the transformation up the chain

a03ebc0

oliverabrahams marked this pull request as ready for review October 2, 2024 09:21

oliverabrahams requested a review from a team as a code owner October 2, 2024 09:21

oliverabrahams added 2 commits October 14, 2024 11:01

Merge branch 'main' into e2e/thumbnail-image-audio-page

60738e2

# Conflicts: # dotcom-rendering/src/model/enhanceBlocks.ts

Merge main

328faee

oliverabrahams added the run_chromatic Runs chromatic when label is applied label Oct 14, 2024

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 14, 2024

Merge branch 'main' into e2e/thumbnail-image-audio-page

027b900

SiAdcock added this to the DCAR Migration milestone Oct 14, 2024

SiAdcock approved these changes Oct 14, 2024

View reviewed changes

Merge branch 'main' into e2e/thumbnail-image-audio-page

7fd2f99

oliverabrahams added the run_chromatic Runs chromatic when label is applied label Oct 14, 2024

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Oct 14, 2024

oliverabrahams merged commit 7bfc4ed into main Oct 14, 2024
32 checks passed

oliverabrahams deleted the e2e/thumbnail-image-audio-page branch October 14, 2024 14:38

prout-bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Oct 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add thumbnail image to audio page #12459

Add thumbnail image to audio page #12459

oliverabrahams commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Oct 2, 2024

prout-bot commented Oct 14, 2024

Add thumbnail image to audio page #12459

Add thumbnail image to audio page #12459

Conversation

oliverabrahams commented Sep 26, 2024 • edited Loading

What does this change?

Why?

Screenshots

github-actions bot commented Sep 26, 2024 • edited Loading

github-actions bot commented Sep 26, 2024 • edited Loading

Deploy build 38022 of Mobile::mobile-apps-rendering to CODE

github-actions bot commented Sep 26, 2024 • edited Loading

Deploy build 13853 of dotcom:rendering-all to CODE

github-actions bot commented Oct 2, 2024

prout-bot commented Oct 14, 2024

oliverabrahams commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

github-actions bot commented Sep 26, 2024 •

edited

Loading

Deploy build 38022 of `Mobile::mobile-apps-rendering` to CODE

github-actions bot commented Sep 26, 2024 •

edited

Loading

Deploy build 13853 of `dotcom:rendering-all` to CODE