Place your cursor where you want to add an image. The position of the cursor is important, as you can only add an image where it is valid. For example, if you are inserting an image or figure, you could place the cursor after a para element. But if you are inserting an inline image, you would need to place the cursor inside the para element.

On your computer, find the image file that you want to add to your topic and drag it on to the topic.

Paligo adds the elements for an image to your topic structure and opens the Upload images dialog. The file that you have dragged on to the topic is listed.

Select the blue icon next to "in folder" at the top of the dialog to display a hierarchical view of your media library folders. Select the folder that you want your new images to be uploaded into.

Decide whether you want Paligo to compare your new images to images in the selected folder only, or images in child folders too.

When you upload an image, Paligo compares the image filename to the images that already exist in the media library. Then, if there are images with matching filenames, you can choose to update them or add the new images as well as the existing ones.

Clear the Update in any existing folder checkbox to set Paligo to look only in the root of the selected folder.

Check the Update in any existing folder box to set Paligo to look in the selected folder and also any of its descendant folders (child folders).

Paligo then compares the names of the files you are uploading to the files that already exist in the media library. What happens next, depends on the files you are uploading.

Decide whether you want your new files to update any existing files of the same name.

Check the Remove whitespace box if you want Paligo to automatically remove any unnecessary white space (empty areas) from the edges of your image. This only applies if your image is AI. EPS, or PDF.

Select Upload.

Paligo uploads your image file to the media library and adds it to your topic. You can close the Upload Images dialog.

Place your cursor where you want to add an image. The position of the cursor is important, as you can only add an image where it is valid. For example, if you are inserting an image or figure, you could place the cursor after a para element. But if you are inserting an inline image, you would need to place the cursor inside the para element.

Access the element context menu.

To access the element context menu, press Alt and Enter (Windows) or Option ⌥ and Enter (Mac).

Add the mediaobject element.

Paligo adds the mediaobject element and also adds the imageobject and imagedata elements that are needed for an image.

Right-click on the placeholder for the image and select Image browser.

In the dialog that opens, browse or search for the image in your Media library.

Select the image to insert it into your topic.

Select Save.

Place your cursor where you want to add a figure, for example, inside a step element or after a para.

Access the element context menu.

To access the element context menu, press Alt and Enter (Windows) or Option ⌥ and Enter (Mac).

Add the figure element.

Paligo adds the figure element and also adds the title, caption, imageobject and imagedata elements that are needed for a figure.

Right-click on the placeholder for the image and select Image browser.

In the dialog that opens, browse or search for the image in your Media library.

Select the image to insert it into your topic.

Enter the text for the figure title in the title element.

Enter a caption for the figure in the caption element. You can delete the caption element if you do not want a caption.

Select Save.

Place your cursor where you want to add an inline image, for example, inside a para element.

On your computer, find the image file that you want to add to your topic and drag it on to the topic.

Paligo adds the elements for an image to your topic structure and opens the Upload images dialog. The file that you have dragged on to the topic is listed.

Select the blue icon next to "in folder" at the top of the dialog to display a hierarchical view of your media library folders. Select the folder that you want your new images to be uploaded into.

Decide whether you want your new files to update any existing files of the same name.

Check the Remove whitespace box if you want Paligo to automatically remove any unnecessary white space (empty areas) from the edges of your image. This only applies if your image is AI. EPS, or PDF.

Select Upload.

Paligo uploads your image to the media library and inserts it as an inline image in your topic. You can close the Upload Images dialog.

Access the Image Details for the image file. You can do this from the image's options menu in the Media library - select the Edit Image option. Alternatively, right-click on an image in a topic and select Edit Properties.

Select Upload Image to replace the current image with a new one.

Use the Upload Image dialog to add the replacement image and then select Upload. Close the dialog when the upload is complete.

Access the Image Details for the image file. You can do this from the image's options menu in the Media library - select the Edit Image option. Alternatively, right-click on an image in a topic and select Edit Properties.

Select Replace with existing to replace the current image with another image from the media library.

Use the Media dialog to find and select the alternative image that you want to use. When you have selected the image, close the Image Details dialog.

Position the cursor on the right side of the image.

Press Alt + Enter ⏎ (Windows) or Command ⌘ + Enter ⏎ (Mac) to display the Element Context Menu.

Select Caption from the menu.

Enter a text inside the caption element.

Select Save.

Select the image that has the caption.

Select the caption element in the Element Structure Menu.

Select Delete.

Select Save.

Add the image to a topic and then right-click on it and select Edit properties. Alternatively, find the image in the Media section of the Content Manager, select its options menu ( ... ) and then select Edit Image.

Paligo displays the Image details.

Enter a description. This is the alt text for the image and will be used wherever that image appears, unless the image has an alt element. (Alt elements take priority over the description).

Aim to provide a text description of the image, as if you were explaining what it shows to someone with a visual impairment.

Select Update description to save.

Add the image to the topic and then select the image.

In the Element Structure Menu, select the mediaobject element and choose Go to element from the menu.

To display the element context menu, press Alt and Enter (Windows) or Option ⌥ and Enter (Mac).

Select the alt element.

Paligo adds an alt element above the image (but inside the mediaobject element in the topic structure).

Enter the text description in the alt element.

Add the alt text to the image. There are two ways to do this, depending on what you need, see:

Select Layout and then edit the PDF layout you are going to use for publishing. Alternatively, you can create a new PDF layout and edit that.

In the Layout Editor for the PDF layout, select General > Misc.

Set Generate tagged PDF to Enabled.

Check the box Use gateway to enable IP Allowlisting. Optional

Select the topic or component in the Content Manager to open it in the Editor.

Alternatively, you can Create a Topic and edit that.

Select the image that you want to size.

Select the imagedata element in Element Structure Menu and choose Go to element.

Add the sizing attribute(s) and set the value(s) in the Element Attributes Panel.

Typically, you should only set the width (or contentwidth) of an image. The depth (height) is then calculated automatically, so that the image dimensions keep the same ratio as the original image file.

If you do set height and width, the smallest value of the two is used, and the image is scaled according to that.

When you set the value, you can use any of the Measurement Units for Image Sizing. By default, the sizes are in pixels.

Select Save.

In Paligo, open the topic that contains the image you want to style once it is published.

Select the image and then, in the element structure menu, select the mediaobject element. From the menu, select Go to element.

In the Element attributes section, use the Add attribute field to add a role attribute. For the role attribute's value, enter the name you want to use as the class name. Use lower case.

Check the box Use gateway to enable IP Allowlisting. Optional

Use a code/text editor to create a custom CSS stylesheet file (or edit an existing CSS file that you use for Paligo).

When Paligo publishes your content, the role is added to the "container" mediaobject <div> or <span> inlinemediaobject for the image. For example, if you have a block image and add a role with the value diagram-large, this will appear like this in the HTML:

<div class="mediaobject diagram-large">
    <div class="material-placeholder">
        <img src="image/1602519409130b.png" style="" alt="image2-transparent.png" class="materialboxed">
    </div>
</div>

If you have an inline image and add a role with the value diagram-small, it will appear in the HTML like this:

<span class="inlinemediaobject diagram-small">
    <img src="image/16025194086577.jpg" alt="large-version-screenshot2.jpg">
</span>

To style the image rather than the container <div> or <span>, use a CSS selector to target the image inside the container, for example:

.mediaobject.diagram-large img {
    border: blue;    
    border-style: dashed;
}

or for an inline image:

.inlinemediaobject.diagram-small img {
    border: blue;    
    border-style: dashed;
}

Upload your CSS file to your HTML layout.

For more information on uploading CSS to HTML layouts see Style with CSS.

Publish your content using the HTML layout that contains the CSS file with the image styling.

Select Layout and then edit the HTML5 layout you are going to use for publishing. Alternatively, you can create a new HTML5 layout and edit that.

In the Classes and Attributes settings, set Output taxonomies as class names to Enable.

Select Save.

Select the Taxonomy Manager in the Content Manager to open the structure.

Either:

Tip

It can be easier to use the floating content panel when dragging taxonomy tags on to images. To display the floating content panel, select the options menu ( ... ) for the taxonomies tag and then select Floating content panel.

Publish your content using the HTML layout you edited in step 2.

View the published output in a browser. Use the browser's inspection tool to find the image in the HTML. You should see that it has a class name that matches the taxonomy tag.

Use a code/text editor to create a custom CSS stylesheet file (or edit an existing CSS file that you use for Paligo).

In the CSS, style the class that has been added for the image. For example, if you added a taxonomy tag called "battery", the image in your HTML output would have these elements:

<div class="mediaobject taxonomy-product-battery">
    <div class="material-placeholder">
        <img src="image/1602a53b445615.jpg" style="" alt="battery.jpg" class="materialboxed">
    </div>
</div>

So you could style the image by using a CSS selector to select the image inside the class .taxonomy-product-battery. For example, to give the image a blue dashed border, you could use:

.mediaobject.taxonomy-product-battery img {
    border: blue;    
    border-style: dashed;
}

In Paligo, select Layout and edit the layout that you used for publishing in step 6.

Upload your CSS file to your HTML layout.

For more information on uploading CSS to HTML layouts see Style with CSS.

Check the box Use gateway to enable IP Allowlisting. Optional

Publish your content using the HTML layout that contains your custom CSS.

In the HTML output, the image should now be using the custom styling you defined in your CSS.

Select the Layout tab in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the layout to be updated or Create a Layout.

Select Images in the sidebar.

Set the Use lightbox for images to:

Select Save.

Select the Layout tab in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the layout to be updated or Create a Layout.

Select Images in the sidebar.

Set the Use thumbnails for all mediaobject (block) images to:

Select Save.

Select the Layout tab in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the layout to be updated or Create a Layout.

Select Images in the sidebar.

Set Use thumbnails for all mediaobject (block) images to default or Disable.

Enable Use Lightbox for images to allow users to click on your thumbnail image to display it at a larger size.

Select Classes and attributes in the sidebar.

Select Enable for Output 'role' attribute as class names.

Select Save.

Select the topic or component in the Content Manager to open it in the Editor.

Alternatively, you can Create a Topic and edit that.

Select the image in the content.

Select the image's mediaobject element in Element Structure Menu and choose Go to element.

Add the role attribute Element Attributes Panel and set its value to img-thumbnail.

Select Save.

Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

Enter the CSS for the border styles you want.

To style block images, add your border styling for the .mediaobject img class. For example:

.mediaobject img {
    border: 3px dotted #FF1493; padding:1em;
}

To style figure sections, add your border styling for the .figure class. For example:

.figure {
    border: 3px dotted #FF1493; padding:1em;
}

To style informalfigure sections, add your border styling for the .informalfigure class. For example:

.informalfigure {
  border: 3px dotted #FF1493; padding:1em;
}

To style inline images, add your border styling for the .inlinemediaobject class. For example:

.inlinemediaobject {
  border: 3px dotted #FF1493; padding:1em;
}

Save your CSS file.

Select the Layout tab in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the layout to be updated or Create a Layout.

Select CSS, JS, logos and other assets in the sidebar.

Upload your CSS file in the CSS section.

Select Save.

Open a topic that contains the image and then select the image.

In the Element Structure Menu, select the "parent" element for the content that you want to style.

For a block image, the element is mediaobject

For an inline image, the element is inlinemediaobject

For a figure, the element is figure

For an informal figure, the element is informalfigure

Select Go to element.

In the Element attributes section, use the Add attribute field to give the element the role attribute. Give the attribute a name as the value. We recommend that you use a name that is easy to recognize, for example, specialborder.

Check the box Use gateway to enable IP Allowlisting. Optional

Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

If you already use a custom CSS for your layout, you should edit that CSS file instead.

To add borders that will only be used by images that have the defined role, add this code to your CSS:

.specialborder img {
        border: 3px dotted #FF1493; padding:1em;
}

Where:

specialborder is the name of the value you gave to the role attribute in step 4.

Save your CSS.

Select the Layout tab in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the layout to be updated or Create a Layout.

Select CSS, JS, logos and other assets in the sidebar.

Upload your CSS file in the CSS section.

Select Save.

Set the border styles that you want to apply to those images that are to have borders. For this, follow the instructions in Borders on All Images (HTML).

Open a topic that contains one of the images that are to have no borders.

Select the mediaobject element for the image.

In the Element attributes section, add the role attribute and give it a value of:

noborder

Check the box Use gateway to enable IP Allowlisting. Optional

Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

If you already use a custom CSS for your layout, you should edit that CSS file instead.

To disable borders on those images with the role you created in step 4, add this code to your CSS:

.mediaobject.noborder img {
    border: none;
}

Save your CSS file.

Select the Layout tab in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the layout to be updated or Create a Layout.

Select CSS, JS, logos and other assets in the sidebar.

Upload your CSS file in the CSS section.

Select Save.

Make sure that all of the images you want to style have a width attribute and a value for the width. This has to be set on the imagedata element.

To add a width attribute, select the image and then select its imagedata element in the Element Structure Menu. Select Go to element, and then in the Element attributes section, add the width attribute and value.

Select Layout and then edit the PDF layout you are going to use for publishing. Alternatively, you can create a new PDF layout and edit that.

Select General > Images.

Set the Default border for images.

This setting adds a border around block images (images that are on a new line). When you set the default border, include the size, the style, and the color. The syntax for this is: size, style, color. For example:

0.5pt dotted #FF1493

The styles you can use are none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and onset.

Set the Default border radius for images.

This setting gives borders rounded corners.

When setting a rounded corner, it is important to consider the style of the border too. To get rounded corners, you can use padding to get it as a frame. Alternatively, you can "cut" the corners of the image, and to do this, you will need to experiment with setting the border color to match the background color of the page, for example, white. Usually, a ratio of 3 provides a good result, for example, border = 3pt solid white and border radius = 9pt.

Use Default padding for images to set the amount of space between the image and the border (the "inner" margin).

Check the box Use gateway to enable IP Allowlisting. Optional

Select Layout and then edit the PDF layout you are going to use for publishing. Alternatively, you can create a new PDF layout and edit that.

Select Formal elements > Figure.

Use the border settings to define the styles for the border. There are settings for width, border line style, border color, background color, and padding (internal margin).

These settings will apply to any formal elements in your content.

Select Formal elements > Informalfigure.

Use the border settings to style the informalfigure border.

These settings work in the same way as the formal figure options in step 3, except that they apply to the informalfigure element instead of the figure element.

Check the box Use gateway to enable IP Allowlisting. Optional

Make sure the inline images are inside a guiicon element. The inlinemediaobject element has to be inside a guiicon element.

Use the element context menu to add the guiicon element. You can select Insert > Image > Inline image to add the inlinemediaobject.

Select Layout and then edit the PDF layout you are going to use for publishing. Alternatively, you can create a new PDF layout and edit that.

Select Inline elements > guiicon.

Use the border settings to style the width, line style, color, background color, and padding (internal margin).

Check the box Use gateway to enable IP Allowlisting. Optional

Open a topic that contains the image you want to have borders.

Select the image and then in the Element Structure Menu, select the imagedata element and Go to element.

Make sure that your image has a width attribute and a value. This has to be set on the imagedata element.

To add a width attribute, select the image and then select its imagedata element in the Element Structure Menu. Select Go to element, and then in the Element attributes section, add the width attribute and value.

Use the Add attribute field to give the imagedata element the role attribute.

For the role attribute value, enter the border settings, for example:

border: 0.25pt solid silver; border-radius: 3pt; padding: 15pt;

The syntax here is similar to that used for CSS and HTML, but only border, border-radius, and padding properties are supported.

Use semi-colons to separate the settings. The example above shows a border that is 0.25pt wide, solid line, and silver. It has a border radius of 3pt (rounded corners) and interior spacing (padding) of 15pt.

Check the box Use gateway to enable IP Allowlisting. Optional