Logo Mark

Introduction

Configuration

There are three steps you need to take to fully configure the plugin:

  1. Decide on where uploaded screenshot assets will be saved.
  2. Configure which matrix fields you want to use the plugin with.
  3. Configure the actual previews, uploading screenshots and adding explanations.

1. Configuring asset location

The first step is do decide on where you want uploaded files for the plugin to be saved. Go to the plugin settings page and the General link in the sidebar.

Here you can define a volume and optional path to save your uploads

Make sure you've already configured a file system and volume in the Craft settings.

2. Configure matrix fields

The next step is to decide on which matrix fields you want to enable previews on along with how you want them to appear.

Go to the Configure fields link in the sidebar:

Enable/disable fields

You'll see a list of all of the matrix fields you have configured for your site. You can choose to enable/disable previews on each field individually.

Takeover

You'll also see an option for "take over". This allows you instruct the plugin to completely replace the dropdown button on each matrix field or whether to just augment the button by adding a "preview" button alongside.

With 'takeover' enabled, the preview button will replace the default matrix field dropdown to launch the modal overlay.
When 'takeover' is disabled, the original interface will remain, but a preview button will be added alongside.

3. Configure previews

In this final step, you actually upload and add your previews. You'll see a list of all of the matrix field block types that you currently have configured for your site:

This page shows at-a-glance which fields have been configured with previews.

Click into each individual block type to set the description, category and/or preview image:

For each block type you can add a description a category and an image.

  • Descriptions will show up on both the inline previews as well as the preview modal overlay
  • Categories can be used to organise particular matrix field blocks into more logical gropus, for example "CTAs", "images & galleries" etc.
  • Images are the actual screenshots that will display in the matrix fields when using the plugin whilte publishing.
  • You can also use GIFs instead of images for a more dynamic preview.

Advanced configuration

Categories

Categories are an optional configuration step that let you place your previews into logical groups. This is useful when you have lots of different matrix field blocks and want to make them easier to digest during the publishing experience.

There are lots of potential categories for common content sytems:

  • CTAs
  • Text based blocks
  • Images & galleries
  • Heros
  • Layouts
  • Buttons
  • ...

To create categories first go to the Categories sidebar link. Here you can add (and sort) your categories:

You can then select your new categories when adding previews:

Ordering matrix field blocks

When viewing your previews, you can reorder the blocks here by dragging and dropping the clover icon on the right-hand side of each row. This will affect where that particular block appears in the modal preview interface later. This is useful for moving more commonly used blocks to the top for easier access.

Configuration on production

When viewing the Craft control panel on production you won't be able to view the settings page. That said, you can still directly access the Matrix Field Preview settings page by visiting the configuration URL directly.

This makes it possible to edit your Matrix Field Preview settings on production.

Previous
Installation
Next
Usage