Newism Pty Ltd

Newcastle, NSW Australia

Leevi Graham — Wednesday 8th October, 5:53pm

ExpressionEngine weblog entry previews with LG Live Look

ExpressionEngine implemented ‘Live Look’ entry previews in version 1.6.1. While a welcome addition, it didn’t quite match our development workflow.

This tutorial will show you how to setup your ExpressionEngine templates to accommodate previewing of unpublished weblog entries inside the publish/edit form using LG Live Look.

LG Live Look is an ExpressionEngine extension that adds a new ‘Live Look’ tab to the publish/edit form in the control panel. The tab contains a preview of the last saved version of an entry, which can quickly be updated using the ‘quick save’ button.

LG Live Look also adds a link to the edit entries table for each entry row. The source of the tab content and the target of the link can be easily customised in the extension settings using a subset of standard {ee} template tag variables (a full list can be found in the documentation).

LG Live Look tab preview in action.

Getting started

The first thing you will need to do for this tutorial is download and install LG Live Look. We’ll activate and configure it in a couple in a later step.

Creating a new weblog and status group

The next part of the setup involves creating a new weblog and status group. If you’re comfortable with ExpressionEngine you should be able to utilise weblogs and status groups from your existing install.

Create a new weblog called ‘Blog’.
Create a new status group called ‘Blog Status Group’.
Create new status in the group called ‘Pending’.
Assign the status group to the weblog.

Creating a new template group

Now there is a new weblog with a special ‘Pending’ status, it will need a new template to show the entry.

Create a new template group called ‘blog’.
Create a new template in the template group called ‘post’.
Inside the ‘post’ template add:

{exp:weblog:entries weblog="blog" limit="1" status="not closed"}
    {title}
{/exp:weblog:entries}

The code above is over simplified. It will display all entries that are not closed which includes ‘Open’ and ‘Pending’ entries.

It’s worth mentioning that there is no entry security here, so someone could theoretically guess an entry’s ID and see the in-progress content. If this is an issue for you, consider creating a copy of the primary entry template, using that as your ‘Live Look’ template, and securing the whole thing with Template Access Restriction. Your primary template (the one people see) will only show ‘Open’ entries (status="open") while the new secure ‘Live Look’ template will show ‘Open’ and ‘Pending’ entries (status="open|Pending").

You might also consider using LG Better Meta to tell search engine spiders to not index the page in their search engine results.

Configure the extension

Up until this point nothing ground breaking has occurred. You could just load up the single entry template in a browser tab and view the ‘Pending’ entry. No-one else should be able to find it unless you have a link to it elsewhere in your site.

The next step is to setup LG Live Look, which is a very simple process:

Open the Live Look extension settings.
Under weblog settings display the link and tab for the ‘Blog’ weblog.
Add /blog/post/{entry_id}/{url_title} to the Entry URL field. The two variables will be replaced with the entry specific values.
Save the extension settings.

LG Live Look now knows that the entry will be displayed using /blog/post/{entry_id}/{url_title} as the url. This path will be used as the link target and the iFrame src. There’s a bunch more configuration options and information available in the documentation, so make sure you check that out.

Displaying a preview in the Live Look tab

Before an entry can be viewed in the Live Look tab it must be fully saved at least once. In future versions of the extension I’ll try and find a way around this small workflow hurdle.

To create a new post and preview it inside the LG Live Look tab:

Create a new weblog post in the ‘Blog’ weblog.
Set the status to ‘Pending’
Save the entry.

The entry now is ready to be previewed in the Live Look tab or using the Live Look link.

Edit the entry.
Click the Live Look Tab on the publish form.
Your entry should appear inside the tab content.
Make an alteration to the entry.
Click Quick Save.
Preview the updates in the Live Look tab.
Continue until you are happy and ready to publish.

The final steps

Now that your entry is ready to publish:

Edit the entry.
Change the status to ‘Open’.
Save the entry.

Your article is now available to the public.

The future of LG Live Look

We know not everyone’s workflow is the same as ours, so if you have any suggestions or feedback about LG Live Look, please add them to the comments below. If you enjoy this extension you might consider sharing it with friends on your preferred social network or even writing a short blog post about it.

9/10/08 1:51pm — I have created a support thread over on the ExpressionEngine forums for anyone who is having trouble using LG Live Look.

Comments

The following 28 people were compelled to have their say. We encourage you to do the same.

Ryan Masuga said on Thursday 9th October, 1:37pm: 1

This looks like a fantastic addition to the Control Panel. I have two builds that I will try this out on right away, and I’ll let you know if I come across any issues or have any suggestions.

Thanks for all your hard work on these addons.
Leevi Graham said on Thursday 9th October, 1:45pm: 2

@Ryan: Make sure you check out the EE support thread for LG Live Look as there is some information there about using LG Live Look with other LG extensions.
Dave Greiner said on Thursday 9th October, 4:46pm: 3

Great feature Leevi, a good live preview is always something we missed in our previous blogging platform. I don’t know how many times I’ve rebuilt posts in Movable Type purely because the formatting wasn’t spot on the first time.
Stefan said on Friday 10th October, 5:22am: 4

Thanks Leevi, much appreciated!
e-man said on Friday 10th October, 6:34am: 5

This is just sick, Leevi :)
Sometimes I wonder if you sleep at all… will surely test this out on upcoming projects. Cheers!
arthur said on Friday 10th October, 7:06am: 6

This is amazing. My clients have been asking for an easy ‘preview’ solution for ages. its amazing that EE doesn’t have a feature like this baked in. Great work LG!
Matt said on Friday 10th October, 9:17am: 7

Really useful. I *just* implemented a “preview” template and status for a client for this exact situation, so having it in their control panel will be perfect.
Sean said on Friday 10th October, 1:19pm: 8

I’m pretty sure that I will be using this on every single install of EE that I do. Wow! great work
Leevi Graham said on Friday 10th October, 1:22pm: 9

@Everyone: Thanks for the great feedback so far!

Just to let you all know I’ll be adding Pages Module support sometime next week if all goes to plan. Subscribe to our RSS Feed for updates.
grantmx said on Friday 10th October, 11:59pm: 10

Dope! This is ranks as one of the essential additions to EE. Thanks for making it available to us Levi!
Reese Spykerman said on Monday 13th October, 5:11pm: 11

Leevi, I’m stoked. Thank you. So many of my clients are more visually oriented. This addresses that specific need. :)
Davor Peic said on Friday 17th October, 1:22am: 12

Wow,, this is what is missing, original live lok is ok, but seeing it before publishing is mucho better! Great work Leevi!!
Cameron said on Tuesday 21st October, 7:27am: 13

Leevi, might it be possible to have an option to have this workflow:
* hit save
* get redirected to the live look tab of the publish screen?

No idea if the hooks are there, but that would be my ideal if possible.
Leevi Graham said on Tuesday 21st October, 9:26am: 14

@Cameron: For the next version I’ll try and add some kind of cookie state so that quicksaves automatically show the LG Live Look tab if it was previously open.
Pat Brumfield said on Saturday 1st November, 4:23am: 15

I was just thinking about this very thing the other day, finding myself disappointed that this type of functionality wasn’t built into EE. I’m going to install it right away, thanks for contributing your hard work!
drags said on Wednesday 10th December, 10:51am: 16

Very nice!
Leevi Graham said on Sunday 28th December, 5:08pm: 17

I’ve just updated LG Live Look and blogged about it here. A couple of bugs have been squashed and some new features have been added.

Check it out!
Thomas said on Wednesday 4th March, 12:09am: 18

This is a great addition to Expression Engine. I had to revert to version 1.0.0 to make it work though. Thanks a lot!
Tim Kremer said on Thursday 5th March, 9:19pm: 19

Great news.. I’ll be setting this up straight away!
Leevi Graham said on Thursday 26th March, 1:02pm: 20

@Thomas: Version 1.0.1 requires that you add jQuery by using either LG Add Sitename (preferred) or CP jQuery. Maybe that was your issue.
Mark Richards said on Sunday 26th April, 8:03pm: 21

Great site. Thanks for the information.
Liz Lux said on Tuesday 28th April, 6:51am: 22

Hey there,
I’m getting this javascript error on my publish page:

$.cookie is not a function
admin_publish.js() line 1
h = $.cookie(“lg_live_look_h”);

I’ve installed jquery and inserted the link into the header of my admin index page, which corrected the first error I had, which was that JQuery is not a function. Any tips on why this error is occuring? Also, I downloaded the LG Add Sitename, but it seemed to hae put the [removed] tag too low in the document for JQuery to be a function.
Jon Reid said on Friday 5th February, 11:25am: 23

Leevi,

I installed version 1.1.0 and I have Live Look working from the edit listing page.

When I click the Live Look tab on the Publish or Edit page however the Live Look area is always blank.

Any suggestions?
Jon Reid said on Friday 5th February, 1:25pm: 24

I reverted to version 1.0.0. It works :)
Paul said on Wednesday 18th August, 12:10am: 25

Really beautiful blog and Excellent post
Michael C. said on Thursday 25th November, 6:06am: 26

Hey Leevi, it seems like a number of people (myself included) can’t seem to get 1.1.0 working. I’ve verified via Firebug that jQuery is indeed being loaded up, but the Live Look tab remains blank (and the “Enlarge Preview” / “Shrink Preview” buttons don’t do anything either). Firebug shows that the src=”…” parameter for the Live Look iframe is blank ( src=”” ). Any ideas?

Running EE 1.6.8 / MSM / jQuery 1.4.4
Michael C. said on Sunday 16th January, 12:03am: 27

Woah… :o Is that hand-crafted spam, or a really smart algorithm? Either way, it’s taking content from Mark Bowen’s forum post here: http://expressionengine.com/archived_forums/viewreply/472774/

Impressive.
Greg B said on Tuesday 14th June, 8:41am: 28

Great feature Leevi, a good live preview is always something we missed in our previous blogging platform. I don’t know how many times I’ve rebuilt posts in Movable Type purely because the formatting wasn’t spot on the first time.