Chapter 2. Image Formatting

Chapter 2. Image Formatting
Home Prev		Next

.png is the preferred image format, though .jpg from legacy conversions are acceptable
Images are stored in media directories for each part.
Images up to 900px wide can be displayed without resizing. Images larger than 900px are scaled down with the scalefit="1" attribute as shown below.
When scaling DocBook uses both the size (pixels) and resolution (dpi or pixels/in) of image files. Source images should be at 96dpi, a default chosen to match legacy images. 96dpi seems to be standard in FullShot; if using Gimp change the default for new images from 72 pixels/in to 96 pixels/in under File → Preferences → Default Image

Images 900px wide or less

If the source image is 900px wide or less use the following code

 
    <mediaobject>
        <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>
        <imageobject>
            <imagedata scalefit="0" fileref="media/FILENAME.png"/>
        </imageobject>
    </mediaobject>

In HTML output, the image will display at actual size; in PDF it will be scaled down to 75% (scale percentage set in ~/stylesheets/sitka_fo_graphics.xsl).

Images wider than 900px

If the source image is wider than 900px use the following code

 
    <mediaobject>
        <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>
        <imageobject>
            <imagedata width="100%" scalefit="1" fileref="media/FILENAME.png"/>
        </imageobject>
    </mediaobject>

In HTML the image will scale down to 900px width (default.image.width setting in ~/stylesheets/sitka_xhtml.xsl). In PDF it will scale down to page width.

Tip

Wrap the mediaobject tag in a para to add a small space between the image and preceding content.

Keeping image and text together

Content wrapped in any formal or informal object (eg informalfigure, formalfigure, informalexample, formalexample) is kept together on the same page in pdf output. Use informalfigure to keep an image with associated text, as in this example of a step:.

 
    <step>   
       <informalfigure>
          <para>STEP TEXT HERE</para>
          <para>
             <mediaobject>
                <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>
                <imageobject>
                   <imagedata width="100%" scalefit="1" fileref="media/FILENAME.png"/>
                </imageobject>
             </mediaobject>
          </para>
       </informalfigure>
    </step>