CSS Structure Variation

[00:00] Now that we know how to test our Slices locally, let's step it up a level and create another Slice with lots of variations.

[00:06] If we look back at our design, we've got a few sections with a very similar structure. Each of these sections has at least an image on one side and text on the other. Some have buttons and the content changes sides, but we know better now that these are small differences.

[00:20] So let's start creating some variations locally so we don't have to maintain lots of Slice models and components. Navigate to the Slices tab and click 'Create Slice'. Remember, we want to give this Slice a name to describe its structure. So call this Slice 'SplitImageText'.

SplitImageText

[00:35] For the fields of this Slice, add the following In the non-repeatable zone, a Rich Text field with the API ID 'text', configure the settings to allow multiple paragraphs.

[00:45] An image field with the API ID 'image', Save your changes. These fields should cover the basic use cases.

[00:52] Let's template this in the Slice. First, add a couple of divs with the tailwind styling for sections that is used in the hard-coded components. You can copy this from the video transcript.

<div className="flex justify-center items-center w-screen bg-greenGrey">
  <div className="container grid grid-cols-1 md:grid-cols-2 gap-24 items-center min-h-[512px] py-24">
  </div>
</div>

[01:04] Then add the suggested code snippets from Slice Machine. Add the Rich Text snippet inside a div with the following tailwind styling.

<div className="flex flex-col gap-4 items-start">
  <PrismicRichText field={slice.primary.text} />
</div>

[01:15] Remember to import the helper component.

import { PrismicRichText } from '@prismicio/react'

[01:21] Next, grab the snippet for the image and paste it. Again, import the helper component for this field.

import { PrismicNextImage } from '@prismicio/next'

[01:30] This component renders an optimized image using next/image and Prismic built-in imgix image CDN integration. This means your images are the best size and format for optimal website performance, without you needing to do any of the work. Wow, we're good to your devs, huh? Remember to add the tailwind class.

<PrismicNextImage field={slice.primary.image} className="w-full h-auto rounded-3xl" />

[01:55] Now, simulate the Slice to make sure it's working. Great. Take a screenshot.

[02:05] And then let's add our first variation, duplicated from the default variation 'Split Image Right'. Hopefully, the use case should be clear here.

[02:14] Click 'Save to File System'. For this use case, we don't need to make any changes in Slice Machine. We'll only need the variation ID.

[02:22] So jump over to the Slice file and using the JavaScript includes method in the class name attribute for the PrismicNextImage component, you can change the side that the image appears. This will add the Tailwind class md:order-last, which is used to reorder flex and grid items to the image tag when the variation is not the 'default' variation.

className={`w-full h-auto rounded-3xl ${['default'].includes(slice.variation) ? '' : 'md:order-last'}`.trim()}

[02:43] So that's a roundabout way of saying, we'll now put the image on the right when the 'SplitImageRight' variation is selected, the JavaScript includes method determines whether an array includes a certain value among its entries, returning true or false as appropriate. This will allow us to add more variation IDs here later.

[03:02] Go back to the simulator window and select the variation from the dropdown to verify this simple, right, and you just saved a bunch of lines of code. Take a screenshot so your authors will see the difference between the variations.