Set up entry previews for component patterns

When entries are used in multiple component patterns across your site, it's valuable to create a preview that shows how that entry will appear in all its possible visual variations.

What are entry previews?

Entry previews allows you to view an entry that is being used on a dynamic composition. Usually you would configure an entry preview for your detail view (like a blog or product detail page) but in this article we will focus on building an additional entry preview that contains all the component patterns that are used a specific content type.

As an example we will use a Blog post content type that can be shown as Hero and Card components. We will build out a dynamic composition where we place the component patterns for the Hero and Card components to show all presentation variations in one place.

Setting up such an entry preview for your component patterns has following benefits:

• Comprehensive overview: See all possible presentations of an entry in one place
• Content validation: Ensure your entry works well across different layouts and designs
• Editorial efficiency: Reduce time spent navigating between compositions for previews
• Quality assurance: Catch formatting or display issues across all component patterns
• Stakeholder reviews: Share a single URL that shows all entry variations

Step-by-step setup guide

Prerequisites

We assume that you already have following items in place:

• A "Blog post" content type
• Some blog post entries
• A Single entry by slug data type that allows you to fetch blog posts using their slug in dynamic compositions - we will call it Blog post (by slug) in this article
• Hero and Card components: defined as Uniform components and the code components registered to render these

Step 1: Create component patterns for each component

For each component that should be used as an entry preview create a new component pattern and connect it to the entry using a pattern data resource:

1. Create or duplicate an existing component pattern and name it using following convention: [Content type] [Component] (by slug) (for example: Blog post Hero (by slug))
2. Open the data resources panel in the left side rail
3. Click Add a data resource
4. Select the Single entry by slug data type - Blog post (by slug) - for your Blog post content type
5. Choose an example Blog post entry that will be used to configure the component pattern
6. Give the data resource a name (Blog post) and save it
7. Connect the fields of the Blog post entry to the parameters of the component by inserting dynamic tokens.
8. Configure the override settings the component pattern and its child components
9. Enable localization: If using multiple locales then enable all supported locales and copy over the values from your default locale. Consider disabling localization for parameters that only contain dynamic tokens as the localization will be handled automatically.
10. Save and publish the component pattern

Note: This component pattern is using the Single entry by slug data type to be able to use it on a dynamic composition. Therefore it probably will only be used on dynamic compositions for preview purposes.

It is recommended to create a more generic component pattern using the Single Entry data type for common usage in compositions as it is easier to pick entries using that data type. In our example you would create a Blog post Hero component pattern.

Step 2: Create the dynamic composition

1. Navigate to Experience > Compositions
2. Create a Previews node at the end of your project map.
3. Inside that Previews node create a new dynamic node in your project map.
4. Name it using the convention: Entry preview - [Content type name] or adjust it to your preference.
5. Name the dynamic path variable to reflect the content type you want to preview (e.g. blog-post).
6. Choose an appropriate composition type or start with a blank composition.
7. In the "Dynamic preview values" of the composition provide a valid slug from an entry for the blog-post variable which will load a blog post into the dynamic composition.

Step 3. Build out the dynamic composition

1. Add all component patterns that use your content type to the composition.
2. Organize them logically (e.g., hero at top, cards in a grid).
3. Consider adding section headers to label each pattern type.
4. Configure the pattern data resource of each component pattern by clicking on Change and then connect it to the blog-post dynamic path variable that was defined on the project map node in the previous step.

Step 4: Set up localized previews and test the dynamic composition

1. If using multiple locales then enable all supported locales and copy over the values from your default locale. Consider disabling localization for parameters that only contain dynamic tokens as the localization will be handled automatically.
2. Test the setup with different Blog post entries by trying out different entry slugs in the dynamic preview values for blog-post.
3. Once you have verified that everything works then save and publish the dynamic composition.

Step 5: Configure the entry preview

1. Navigate to Experience > Content types and edit the Blog post content type.
2. In the Entry settings section and configure the entry preview as described in our documentation.
3. Save the content type.

Step 6: Test the entry preview

1. Navigate to Experience > Entries and edit any Blog post entry.
2. On the left side of the Save button a new Preview button should be now visible.
3. Click the Preview button and it will open up the configured composition in a nested editor.

Learn more about using entry previews in our documentation.

Below is an example of the final result:

Best practices

• Keep it updated: Add new component patterns to the preview composition as they're created
• Use realistic content: Test with entries that represent typical content length and complexity
• Document the process: Create guidelines for your team on how to use preview compositions
• Regular maintenance: Periodically review and update the dynamic compositions of your entry previews as designs evolve