5.2.��Graphics for Multi-Channel Publishing

A How-To Recipe

Jeff Elpern


Task

Create figures with graphics that both display quickly on the web and, when printed from the PDF are produced in high quality. For example in Figure��1, ���Graphic Example with both web and print quality��� the image of the glass building displays quickly at web resolution when viewing this page. But when the PDF version of the page is printed a hi-quality image that can support 300 dpi to 600 dpi is provided.

Figure��1.��Graphic Example with both web and print quality

Graphic Example with both web and print quality

Solution

The solution is to use a DocBook feature that lets the image file to be used specific by the publishing channel. And, to provide both an image for the web publishing that is already correctly sized for the 72 dpi of screens plus a hi-resolution version of image capable of providing the detail needed for sharp print images (300 to 600 dpi).

The DocBook markup is presented below with detailed call-out descriptions below. The <figure>, <title>, and <mediaobject> are the same as presented in ???? which describes the basic markup for a numbered graphic with a title. What is different in the markup below is the use of two <imageobject"> - one to contain the web resolution image and the other to contain the print resolution image.

Figure��2.��DocBook markup for multi-channel publishing of a Graphic

<figure> 
   <title>Attachments for Multi-channel Publishing</title>
    <mediaobject> 
        <imageobject
            role="html"> 
            <imagedata
                fileref="building-w250.png"
                format="PNG"/> 
        </imageobject>
        <imageobject
            role="fo"> 
            <imagedata
                fileref="building-full.png"
                format="PNG"   
                width="3in"/>
        </imageobject>
    </mediaobject>
</figure>            

1

<figure> is the standard DocBook container element for titled graphic images.

2

The mediaobject element supports one or multiple images via the imageobject element. Each image can be selected for a specific publishing channel.

3

The imageobject is a wrapper element for the imageobject and holds the associated meta-information about the image. In this case the role attribute specifies the enclosed graphic is the one to use when publishing HTML.

4

the imagedata element points to the graphic image file via the fileref attribute. In the SQI microPublishing the file is an attachment to the current page. Here file building-w250.png is the building graphic in the example below size to be 250 pixels wide for web presentation.

5

This is the second imageobject which holds a hi-resolution image of the building. The role attribute specifies this image is to be used in the fo/PDF publishing.

6

This imagedata element points to the page attachment which is the hi-resolution graphics image.


Markup Fragment

Listed below is a "clean" (without callout numbers) DocBook markup fragment for presenting a multi-channel image with a figure number and title. Just copy this markup fragment and past into you xml file at a point where <figure> is a valid element.

Figure��3.��Markup Fragment for Multi-Channel Publishing of Graphic with Figure Number and Title

<figure>
   <title>??? figure title goes here ???</title>
    <mediaobject>
        <imageobject
            role="html">
            <imagedata
                fileref="image-html???.png"
                format="PNG"/>
        </imageobject>
        <imageobject
            role="fo">
            <imagedata
                fileref="image-print???.png"
                format="PNG"
                width="???in"/>
        </imageobject>
    </mediaobject>
</figure>            

Example Process

Creating the multi-channel publishing markup is a three step process:

  1. Create a graphic file for each publishing channel.

  2. Upload the graphics files as attachments.

  3. Create markup using the role attribute to select graphic image by publishing channel.

Each of these steps is discussed below.

Step 1: Create a graphic file for each publishing channel

Stuff about SnagIt, Photoshop, GIMP and right sizing here. ???

Step 2: Upload the graphics files as attachments

The figure below provides a graphic image that is just 250 pixels wide for the HTML publishing channel and a much higher resolution for the PDF publishing channel.

Figure��4.��Attachments for Multi-channel Publishing

Attachments for Multi-channel Publishing

Step 3: Create markup using the role attribute to select graphic image by publishing channel

???

Figure��5.��Multi-channel web and print quality graphic

Multi-channel web and print quality graphic

Discussion

Working on multi-channel printing is often done as one of the last steps in the authoring process. A common work flow is during the early drafting of the content is to use whatever image is available with the simple markup shown in ????. Once the rough draft is complete and the editing process begins the author returns to the graphics elements annd customizes each for multi-channel publishing.

Reference Material

Univ/CIE/KA/StrucDoc/HowToBookProto/ChapGraphics/multiChannel (last edited 2015-03-06 18:11:28 by localhost)