Image placement according to file object templates - On Premises 6.4

Magellan

When you publish a book, the file object template names are included in the output files. These names can be used to identify an image to then use css to position images on the right or apply borders to the image. For example, you may have file objects based on the Screen Shot template. You can include css definitions to add a grey border or place the images on the right of the page for all images using this template.

As this is concerning image content customization, the appropriate code should be added to the contentstyles.css in your theme folder.

To format content according to topic templates:

  1. Open the contentstyles.css file in your theme folder.

    If this is the first image customization, to keep the file well organized add an images section using comments in a similar way to the sections already in the file.

  2. On separate lines add: /*#region IMAGES */ and /*#endregion IMAGES */. The following suggested definitions can be added between these two markers.

    Requirement

    Definition Example

    To place images on the right side of the page

    To have all images based on the Screen Shot template displayed on the right side of the page, add a definition that includes the image selector naming the file object template, followed by the properties. For example:

    img.screenshot {

    display: block;

    float: right;

    }

    The text flows around the image.

    Example before:

    Image - float to right - before

    Example after:

    Image - float to right

    To add a border to images

    To apply a border with shadow to all images based on the Screen Shot template, add a definition that includes the image selector naming the file object template, followed by the properties. For example:

    img.screenshot {

    border-radius: 4px;

    border: 1px solid var(--light-gray-color);

    box-shadow: 3px 3px 3px 1px var(--light-gray-color);

    }

    All images based on this template will now have:

    • Corners rounded to 4px radius
    • A light gray solid line around the image
    • A light gray shadow to the right and bottom of the image, the shadow is softened.

    Example screenshot before:

    Author-it Cloud loading

    Example screenshot after:

    Author-it Cloud loading with caption