Show preview of post changes on page

Question

I've got a pretty unusual feature request or just don't know how to phrase it, since I couldn't find anybody else trying to do this.

In the editor of the front page I've added a custom meta box to select a title story from my posts. The title story is then displayed on the top of the front page with its featured image.

Now when I'm editing the title posts featured image I want to preview the changes on the front page before I save them. The preview obviously works on the post page, but thats not what I'm asking for.

Is there a way I could preview the changes to a post on the front page, where I show the featured image, title and excerpt of that post?

In case it helps, here is some the code I'm using to retrieve the title posts featured image on the front page:

$image_xs = wp_get_attachment_image_src(get_post_thumbnail_id($titleStoryID), 'image-size-small')[0]

Answer 1

It is HTML and Javascript territory.

For the image preview, you may need a input type="file" with accept="image/*" and onchange event handler for the preview and the javascript getElementById to get the image id to display for preview. Have a look at these examples.

For the text preview part here is a fiddle link. It uses textarea for input, an empty html div with an id for the preview and the keyup javascript method as an event handler. For your title modify textarea with input type="text".