Multiple Live Preview Targets

[leevigraham]

This is a feature idea.

Description

Given an entry can be rendered in numerous pages it would be great to have multiple live preview targets.

Example: Let's say there's a 'products' channel. Channel entries are rendered in a products index and product details template. It would be great to be able to switch between each of these templates to preview the entry.

I'm not sure how feasible this is technically. I believe in the current implementation the 'entry' variable is injected into the template which is why we can preview a single details page. Previewing and entry in a list would be quite challenging to implement.

[brandonkelly]

Basically a duplicate of #1080 but I'll leave this open because it makes a better case for it.

We've had the same idea internally as well, and I'm all for it. @benjamindavid can you mock this up when you have time? (Doesn't need to happen before 3.0.)

[leevigraham]

Reference: NSM Live Look for EE: https://ee-garage.com/nsm-live-look#toc-gallery

[sjelfull]

I'm all for this. Tried to create this as a plugin, which would work similarly to NSM Live Look, but got stuck when I realised that this would require core changes.

[michaelrog]

Adding my 👍 for this idea.

I frequently set up projects where an entry can be previewed in multiple contexts — entry page, entry page on alternate domain, simulated listing/index page, component library palette, API JSON blob, Algolia indexing data preview, etc.

It's pretty easy, using a base router template that checks craft.request.isLivePreview and does some include switching based on a "Live Preview Context" dropdown field on the entry.

I could definitely see this being implemented natively such that each Section or Category Group, in addition to specifying the usual template for rendering its element routes, would optionally also supply a list of label/template pairs for routing Live Previews. Is that what you have in mind @brandonkelly?

In fact, this wouldn't even need to be limited to Entry/Category elements... As long as there's a convention for specifying how an element can be previewed, I could see it being potentially useful for Users/Tags as well... But that might be another FR.

[narration-sd]

I'd guess the big thing on this is viewing consequences of entry titling etc. on listing pages.

Since I'm much farther along with something also involving live view, I can say I'd be happy with a solution that preserves present behaviour for primary live vue -- how the momentarily altered template page data is ajax->page-post loaded.

I suspect you'd like to keep that at Bend Central, and doesn't look that it would interfere with concepts being floated here.

[brandonkelly]

I could definitely see this being implemented natively such that each Section or Category Group, in addition to specifying the usual template for rendering its element routes, would optionally also supply a list of label/template pairs for routing Live Previews.

@michaelrog Yep, something like that.

In fact, this wouldn't even need to be limited to Entry/Category elements... As long as there's a convention for specifying how an element can be previewed, I could see it being potentially useful for Users/Tags as well

Tags would need their own edit pages first (which would probably come alongside #820), but yeah, this would basically mean Live Preview doesn’t need to be limited to element types that have their own URLs anymore.

[leevigraham]

It's pretty easy, using a base router template that checks craft.request.isLivePreview and does some include switching based on a "Live Preview Context" dropdown field on the entry.

Clever @michaelrog

[grndsgn]

I wonder if adding something like 'View Modes' to a section/'content type' would help facilitate this.(Similar to Drupal)

So one could set a view mode for a piece of content 'Full', 'Teaser', 'Hero', etc and then in your entry, matrix, categories, user twig code you would be calling

{{ entry.view('full') }}

{% for matrixItem in entry.matrixItems %}
{{ matrixItem.entry.view(matrixItem.mode) }} // the matrix field could allow the user to select a view mode.
{% endfor %}

{{ category.view('teaser') }} 

{{ user.view('profile') }} 

A template structure would look like this
foo/_entry.twig - less specific / low priority
foo/_entry.type.twig
foo/_entry.mode.twig
foo/_entry.type.mode.twig - most specific / highest priority

There would be instances where you don't want to have a specific template for a view mode, so the lower priority templates would be automatically available and have access to entry.mode which would be add as a css class to the view if needed.

This approach could ensure a template is available for the Live preview and avoid having put a of extra conditional statements and includes in your twig code.

And there could even be a LivePreview template override such as
_entry.livepreview.type.mode.twig

[joshangell]

To all those interested, I made this plugin that implements this feature plus a device emulator: https://github.com/angell-co/Portal

Not yet in the plugin store but hopefully it will be soon 😃

(unless P&T just added this to 3.1 ...)

[leevigraham]

@joshangell

[brandonkelly]

“Preview Targets” has been added for the next 3.2 Alpha release! In addition to Live Preview, they also show up as “Share” menu options. And as a bonus, you don’t even really need to set up Preview Targets to begin with; now when you load a page with a preview token query string param, Craft will pass that token along to any other site URLs it generates throughout the request. So you could just manually navigate to other pages within the preview pane or shared page, and continue to see your draft content wherever the entry shows up.