Image Alignments and Captions

Description

In WebPublish 2, image alignments were applied to help align images to the right, left or center of the page. These could be added with or without captions.

WP2 Implementation

In WP2, image alignments were applied by pasting markup like the following into the source code of the page:

  <div class="image-caption-left">

    <img alt="Queen's Campus" src="queens_campus.jpg"/>

    <div class="image-caption">

        Queen's Campus in the Spring

    </div>

</div>

After the markup was inserted into the page, the user could switch back to the WYSIWYG editor and replace the default image with the image they’d like displayed, and the default “Queen’s Campus in the Spring” text with the caption they’d like to include.

Migrating to WP3

There are two options for migrating image alignments. If the image includes a caption:

  1. Migrate the image into an Image (Large) paragraph
    1. Follow the tutorial for adding an Image (Large) paragraph: https://www.queensu.ca/webpublish/tutorials/paragraph-options-layouts/image-large
    2. Ensure that the image’s alternative text and caption gets migrated to the corresponding fields

If the image does not include a caption:

  1. Migrate the image into field that contains a WYSIWYG editor. This will most likely be one of the following places:
    • The main page body
    • An extra body paragraph
    • two column body paragraph
  2. Use the built-in alignment tools to align the image in the field.