[WS-1790] - Portrait promo images in landscape aspect ratio

[hotinglok]

Resolves JIRA: WS-1790

Summary

Resizes promo images that should be portrait and adds a blurred background behind it to make them more presentable. Adds isPortraitImage and isLite checks to various promo-level places.

Code changes

• Adds <BlurredBackground/> component as a more performant implementation of getting a better looking background for portrait images. Still achieves the background colour aspect investigated in the spike https://github.com/bbc/simorgh/pull/13432 with a more css-driven approach.

  • This approach uses the same src set via the background-image css property. Although this adds more fetches to ichef, the image is resized to only be 10px wide so most images are less than 0.5kb.
  • This component is only added where Promo.Image is being called and only for portrait images on non-lite pages.
  • Blurred backgrounds are prevented from being rendered (hence no additional ichef fetches) on lite pages.
  • Checking the total gzipped page weight between preview/live showed a very marginal increase. Should this be a concern now/in the future, we could potentially limit the number of these blurred backgrounds being shown or restrict them to higher traffic page types/services.

• Changes made in Promo level components, <Image/> in /src/app/components/ unaffected.

• The blocks placeholder has been disabled for portrait images in promos. This was necessary because the placeholder goes over the blurred background. This change has been approved by UX.

  • The onLoad() implementation is inconsistent (discussed further down) so this could not be used reliably to make the placeholder disappear when the image was loaded. The fix for this did not work across all browsers, hence why the placeholder has been disabled outright.

• Adds css to fix various spacing issues between promo play icons/timestamps.

• Updated stories. Mainly presentational changes so no additional tests/logic changed/added besides adding props. Some snapshots updated as well.

[!NOTE]
These changes should affect all promos, however [RelatedContentSection](https://github.com/bbc/simorgh/blob/latest/src/app/components/RelatedContentSection/RelatedContentItem/index.tsx#L169) won't show these as it needs additional BFF changes due to isPortraitImage not being available where the data is fetched. This will be done in a separate ticket.

Testing

• [x] Manual Testing required?
  • [x] Local (Ready-For-Test, Local)
  • [ ] Test (Ready-For-Test, Test)
  • [ ] Preview (Ready-For-Test, Preview)
  • [ ] Live (Ready-For-Test, Live)
• [ ] Manual Testing complete?
  • [ ] Local
  • [ ] Test
  • [ ] Preview
  • [ ] Live

Additional Testing Steps

Visit the following links to ensure that the portrait image promos render correctly and as expected. Before:

After:

Persian topic page: http://localhost:7080/persian/topics/c6z7mnr559gt?renderer_env=live

Pidgin MAP: http://localhost:7081/pidgin/articles/cvg73651880o?renderer_env=live

Portuguese PV Carousel: http://localhost:7080/portuguese?renderer_env=live

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[pvaliani]

Nice work! 👏🏻