wellcomecollection.org
wellcomecollection.org copied to clipboard
wellcomecollection
Prismic slice machine work
Prismic slice machine work:
Follows on from #10664
NCI = need to create issue with full details
Next steps:
- [X] ~#10773~ - done in #10783
- [X] ~#10776~ - done in #10783
- [X] ~#10780~ - done in #10783
- [ ] #10825
At this point we'll be rendering our current custom types (and slices) with Prismic's SliceZone component and will be ready to update the models in Prismic to use the slice machine slices, rather than our legacy slices
- [X] ~Get set up with a development Prismic environment and make sure we can query it~ (DONE)
- [x] Decide what/when we will need to communicate to the content editors about the changes we are making?
- [x] #10791 (done in #10808)
- [x] Generate all our custom types with SliceMachine and make sure these haven't changed compared to what we have in Prismic
- [x] In dev environment first: Edit custom types to replace legacy slices - check the returned data is the same, then do the same in prod if there are no issues
- [x] remap content to new slices so they are still editable
- [x] update scripts to compare the custom types slice machine generates with those in Prismic (#10863)
- [ ] establish and document (rewrite README) workflow for creating/deleting/amending types
- [x] remove all the old prismic model src ts files (#10863)
At this point we will be using slice machine to manage our custom types and the editors will be able to utilise the new UI in Prismic.
Scope for improvements that have become apparent during this work:
- [ ] NCI add mock data for slices? - do we have a need for it? ()
- [ ] NCI remove filter featured picture, don't think it's needed - establish this first
- [ ] NCI - we need to establish if labels are needed for the slices they they are currently used on - If yes make variations instead and remap content etc., if not then remove them (clarify steps)
- [ ] NCI - make new variation for CollectionVenue - closedPeriods
- [ ] #10753
- [ ] #10775
- [ ] #10774
- [ ] #10869
Notes I've made that will be relevant to some of the above issues (will add to the appropriate tickets when they are created)
Notes on Body.tsx
Filtering body slices
We filter out slices of type standfirst. We do this because we pull these out so we can display them separately from the rest of the body and we don't want to then replicate the content when we do render the body.
We filter out slices of type picture (type of editorialImage before it gets transformed) with a weight of featured. I'm not sure why we do this and I don't think we need to.
As far as I can tell we do sometimes want to render featured images separately from the rest of the body, but we only seem to do this in [pageId].tsx and if so, we remove them from the body array property in that file, before passing it to <Body />
Featured text
A text slice can be rendered one of several ways inside Body.tsx
-
If it is the first slice in the body and has a weight/label value of featured, it will be rendered using the <FeaturedText /> component, before the <AdditionalContent /> component - N.B. The FeaturedText doesn't seem very different to the regular text - is it needed? larger margins?
-
If the text slice is not the first slice in the body and does not have a weight/label value of featured it is rendered directly with the <PrismicHtmlBlock /> component (and defaultSerializer) after the <AdditionalContent>.
-
If the text slice is not the first slice in the body and does have a weight/label value of featured it is rendered directly with the <PrismicHtmlBlock /> component (and dropCapSerializer) after the <AdditionalContent>.
N.B. If a text slice has a featured label but is not the first item in the body, it will not be rendered, e.g. /pages/Wvl00yAAAB8A3y8p
More notes:
FeaturedMedia/HeroPicture
We can pass FeaturedMedia and HeroPicture props into the <PageHeader /> component.
N.B. It will display both if they exist.
HeroPicture
This is used in a <Picture /> element, to provide images with different aspect ratios based on screen size.
It is square on small screens and 16:9 on larger screens.
We currently (03/03/2024) assign a value to this prop in the following places:
Exhibition
On the exhibition page the HeroPicture comes from the Promo image via transformGenericFields.
articleId
Not shown if isShortFilmFormat || isImageGallery || isPodcast comes from the Promo image via transformGenericFields.
FeaturedMedia
This can be a video or an image.
We currently (03/03/2024) assign a value to this prop on the following places:
Exhibition
If the first body slice is an embedded video it will be that, else it will be the promo image.
// TODO find out - will the video show twice on the page, once in the header, once in the body?
If the promo image has a 16:9 crop it will be that.
Installation
If the first body slice is an embedded video it will be that, else it will be the promo image.
// TODO find out - will the video show twice on the page, once in the header, once in the body?
If the promo image has a 16:9 crop it will be that.
articleId
Not shown if isShortFilmFormat || isImageGallery || isPodcast If the first body slice is an embedded video it will be that, else it will be the promo image.
// TODO find out - will the video show twice on the page, once in the header, once in the body?
If the promo image has a 16:9 crop it will be that.
bookId
From book.cover from promo image via transformBook
eventSeriesId
If the first body slice is an embedded video it will be that, else it will be the promo image.
// TODO find out - will the video show twice on the page, once in the header, once in the body?
If the promo image has a 16:9 crop it will be that.
pageId
If there is a featuredPicture we use that.
The featuredPicture comes from the body. If the body has more than one slice and the first slice is of type picture (editorialImage), then that becomes the featuredPicture.
If there is no featuredPicture but there is a featuredVideo we use the latter.
The featuredVideo comes from the body. If the body has more than one slice and the first slice is of type videoEmbed, then that becomes the featuredVideo.
If either of these exist then we remove them from the body array, so they don't get rendered twice.
TODO - WHY DO WE THEN REMOVE THE SLICE AS WE DO THIS IN THE BODY TOO? TODO - why don't we use the promo image like everywhere else? Should we remap the content so we
seriesId
If the first body slice is an embedded video it will be that, else it will be the promo image.
// TODO find out - will the video show twice on the page, once in the header, once in the body?
If the promo image has a 16:9 crop it will be that.
Closing as all this work is either completed or covered by separate issues