Embed Publish Online

With the August release of InDesign CC 2015, there is a new option that is sure to give you another reason for wanting to try the Publish Online “technology preview” feature. In addition to being able to share your interactive documents on Facebook, Twitter, and email, you can now embed your Publish Online document in a web page.

THE USER EXPERIENCE

To demonstrate how this is done, we created a sample page and embedded it below. Click on the page to have it display. When the page displays, click on the buttons at the bottom to toggle thumbnails, zoom in and out, and display full screen. Click the arrow buttons to the sides of the image to view the slideshow. When through, press the ESC key on your keyboard to return to the web page.

STEP BY STEP

To create your online masterpiece there is nothing special that you need to add to your InDesign skills. Of course you will want to take advantage of the interactive and animation features InDesign provides for these documents. We used a script to create our slideshow. It is one of our favorites for adding animation and interactivity to our documents.

Once you have your document working the way you want, select Publish Online (Preview) from InDesign’s File menu. This presents you with a dialog having two tab panels.

The General panel is where you give the document a name, description, and determine how the pages are to publish.

The Advanced panel provides options for selecting the image to display as a cover as well as settings for images. Notice that this version of Publish Online allows a setting for 96 PPI.

When you click OK you are presented the upload page for your document.

When you get the message that your document has uploaded successfully, you will want to view the document. Click the View Document button. It is in the view presented that you get access to embedding your document in a web page. The Copy button allows you to copy the URL for the online document for sharing. The three familiar buttons below that option allow you to share the document to Facebook, Twitter, and email.

EMBEDDING THE DOCUMENT

At the bottom of the page presented when you click View Document from the dialog above are a number of buttons. From left to right, these buttons control thumbnail display, zoom in, zoom out, full screen view, sharing, embedding, volume control, and report abuse. The button that controls embedding has a slash between two angle brackets </> for its label. When you click this button, you get the following dialog.

Notice that this dialog gives you the option to display your document in three different sizes. Pick the one most appropriate for your web page. (We used the intermediate size option for our example above.) Near the bottom of the dialog is the code that you will need. Copy it. With the code on the copyboard, switch to the HTML file for your web page. Decide where you want the document to display and use the text insertion point to paste the code. That’s it. Your interactive document is ready for the user to view.

JUST FOR SCRIPTING

To enable publish online, application General Preferences has a property enable publish online that needs to be set to true. (It should be set to true by default.)

Should your publish online documents require a consistent set of export settings, you could preset the defaults for the Publish Online Options dialog using code similar to the following:

Publish Online Settings

   tell application "Adobe InDesign CC 2015"
        set docRef to document 1
	tell publish export preferences of docRef
		set publish cover to first page
		set publish file name to "MyTest"
		set publish format to publish by pages
		set publish page range format to export all pages
		set image conversion to automatic
		set image export resolution to ppi 96
	end tell
    end tell

ONWARD AND UPWARD

As the designation “technology preview” indicates, Publish Online is a work in progress. There are more features that certainly can be added to this feature, but what we have so far is certainly worth looking into. Give it a try.