Are you viewing the right article?
This article refers to Digital Publishing Suite. For the AEM Mobile article, see Create HTML articles.
Last updated on
Apr 27, 2021
Note:
Announcement: Reminder - Digital Publishing Suite (DPS) Will End of Life on August 31st, 2019. More details are available here.
|
|
You can import HTML-based articles into a folio so that it can be displayed in the viewer as an article. One advantage of HTML articles is a much smaller file size that is better suited for weekly publications and simple, text-intensive articles. HTML articles can also include interactivity not available in the Folio Overlays panel.
Video Tutorial
For information about using Adobe Edge to create HTML for DPS, see Raghu Thricovil’s article Enhance your DPS Folios with HTML animations using Adobe Edge.
-
Create a folder containing HTML files.
Make sure that you include only the assets you’re using in the folder. All assets in the folder are uploaded, even if they’re not used.
-
If you are importing the HTML article into a single-orientation folder, add an _h or _v suffix to the .html file, such as index_h.html.
If you don’t add a suffix, the article might be imported as a dual-orientation article. If you try to preview or publish the single-orientation folio, an error message appears.
-
In the Folio Builder panel, open the folio in which the HTML article will be included.
-
In the Articles view of the Folio Builder panel, choose Import Article from the panel menu.
-
Choose the "Import a Single Article" option, click the Location folder icon
, and specify the HTML folder.You can also import HTML articles using the "Import Multiple Articles" option (see Structuring folders for importing articles) or using the "Import Using sidecar.xml" option (see Importing articles using path-based sidecar.xml).
-
Specify additional settings, such as Smooth Scrolling, and click OK.
If you edit the HTML files, select the HTML article in the Folio Builder panel and choose Update.
HTML article requirements
You can create a single HTML file that works for both portrait and landscape orientations, or you can create separate HTML files for the two orientations. To use separate HTML files for portrait and landscape, add the _v and _h suffixes to the end of the HTML filenames, such as “index_h.html.” If you’re creating a single-orientation folio, you need only one HTML file. Include the _h or _v suffix for the HTML file in a single-orientation folio.
Dynamic HTML (DHTML) files currently are not fully supported.
For file structure, one method is to place all associated graphics and scripts for the HTML file in the individual article folders. Another option is to place associated graphics and scripts for the entire folio in an HTMLResources.zip file. You import the HTMLResources.zip file into the folio from the Folio Builder panel or the Folio Producer on the web. See Import HTMLResources folder.
Example of an HTMLResources folderMake sure that you use relative paths in your HTML code. If you’re linking to an image on the same level as the HTML file, use this approach:
<img src="GlobalImage.jpg"/>
If you’re linking to an image in the HTMLResources folder, use this approach:
<img src="../HTMLResources/GlobalImage.jpg"/>
For information on creating hyperlinks to and from HTML articles, see Create navto hyperlinks for HTML articles.
Creating HTML articles for Android Viewers
For guidance and requirements on creating HTML articles for Android Viewers, see Create HTML articles for Android Viewers.
HTML5 resources
For information about creating articles using HTML5, see Johannes Henseler’s article A single file HTML5 framework.
For information about using CreateJS to create HTML5 using Flash Pro, see Toolkit for CreateJS.
For information on which fonts are available in HTML articles and Web View overlays on the iPad, see www.michaelcritz.com/2010/04/02/fonts-for-ipad-iphone/.
Rufus Deuchler created a video tutorial about using Adobe Muse to create HTML content for digital publications.
Allowing videos in HTML articles to behave like full-screen video overlays
When you create a single-orientation HTML article with video links, rotating the device can cause the playing video to rotate as well. In addition, when the video is finished playing, the in-app browser playing the video can be dismissed. To enable this behavior, use a “videofile://” prefix in your HTML video link. This option is available only for iOS apps.
Note:
For examples of video behavior, see the HTML Examples issue of the free DPS Tips app (English only).
Standard video behavior
With this example, the video plays within an in-app browser and does not rotate in a single-orientation folio.<a href="Links/video.mp4">Play Video</a>
or<a href="../HTMLResources/videos/video.mp4">Play Video</a>
Enhanced video behavior
With this example, the video rotates properly in a single-orientation folio and returns to the article when the video finishes.<a href="videfile://Links/video.mp4">Play Video</a>
or<a href="videofile://../HTMLResources/videos/video.mp4">Play Video</a>
JavaScript
You can also trigger this behavior via JavaScript using the playFullscreenVideo function on the window object.<a onclick="window.playFullscreenVideo('Links/video.mp4');">Play Video</a>
or<a onclick="window.playFullscreenVideo('../HTMLResources/videos/video.mp4');">Play Video</a>
Streaming video
This example plays a streaming video.<a href="videohttp://www.mysite.com/video.mp4">Play Video</a>
