Overview

Matrix Field Preview is a plugin for Craft CMS that lets you create a visual guide to your matrix fields, making it much easier for content publishers to find what they're looking for.

To achieve this, the plugin replaces the default matrix field dropdown menu with a custom modal overlay that includes screenshots of your finished content.

This visual alternative makes it much easier to see at-a-glance what each block of your matrix field will actually look like when published.

Features

• Preview modal: easily visualise the type of content you want to add to the page using the pop-up modal overlay containing screenshots of all your content.
  • Categories: organise your preview images into sortable categories, making it easier to filter through and find blocks.
  • Sorting: sort previews, placing the most-used ones at the top where they're quicker to find.
  • Searching: search through previews, quickly finding what you need.
  • Optional: you don't have to completely replace the default dropdown field, you can choose to instead augment it, giving you the best of both worlds.
• Inline previews: when browsing your entries, get a visual hint as to what each block looks like on the page with our inline previews that are added to all matrix or neo blocks.
• Integrations: Neo, Spoon, MatrixMate & Supertable are all supported out of the box.
• GIFs: use GIFs to make previews even more intuitive.

Quick start

To get started, click through to the following pages, otherwise, read on for some more about the plugin.

• Latest plugin version is 4.1.0
• Check out the CHANGELOG.md for recent changes

Use-cases

Using a "content builder" system in your Craft site, Matrix Field Preview can be incorporated for many different types of content:

• Bulding content pages: let clients build their own entire marketing pages by mixing and matching different blocks of content.
• Building rich blog posts: add more than just text by letting publishers insert callouts or other interactive elements to blog posts.
• Building email templates: build your own Mailchimp editor by using matrix fields to create a newsletter publisher.

Motivation

For larger marketing websites, it's common to create a "content builder" system in Craft by using matrix or neo fields to define entire sections of the page design, for example "hero", "cta", "image gallery" etc. This is really powerful as it lets the client publish entire marketing pages from the CMS by building a page from matrix blocks themselves.

A big challenge with these content systems though is that it leads to a confusing publishing experience. On big sites, you might have 10s of different blocks configured in a particular matrix field. With the default Craft or Neo UI, when looking at the drop menu, it's impossible to tell what each block is.

There are a number of existing plugins like Spoon and MatrixMate that help deal with this but as the number of matrix field blocks grows, even with groupings and descriptive block titles it can be tricky to figure out what a block will look like before you add it to your page.

Furthremore, Craft offers a live preview system for publishing pages, which is a great way of seeing what your content will look like as you write, but the issue is that it only displays a preview after you've selected your matrix or neo blocks. You still need to know what type of content you want to add ahead of time, which again is confusing using just the text-based dropdown menus in matrix and neo fields.

So Craft Matrix Field Preview solves this by allowing you to create a visual guide to your matrix or neo blocks. Instead of using a text-based dropdown, a modal dialog is launched that contains screenshots of the blocks in action. This makes it much easier to find what you want to add when building a page.