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

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

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 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.

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

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 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 onto the topic.

Select the blue menu at the top of the dialog to select where to upload the images.

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

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.

Add the image to the topic.

Right-click the image and select Edit properties.

Alternatively, find the image in the Media section of the Content Manager, select its dotted menu ( ... ) and choose Edit Image.

Paligo displays the Image details.

Enter a Description that will serve as the image alternative text. It will be used wherever that image appears. However, if the image has an alt element in a topic, that will override the description. If it is a figure, the textual content of the figure title element will override the description as well if no alt element content is present.

Select Update description to save the text.

Add the image or video to the topic and then select it.

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

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

Enter alt and select it from the menu.

Paligo adds an alt element above the image or video (but inside the mediaobject element).

Enter the description in the alt element.

Select Save.

Add the alt text to the images, see Add an Image Description or Add the Alt Element.

Select Layout 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 you want to update or Create a Layout.

Select General > Misc in the sidebar.

Set Generate tagged PDF to Enabled.

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 Layout 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 you want to update or Create a Layout.

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

Select Upload in the CSS section.

Drag your custom CSS file from your computer's file system onto the file upload dialog.

Paligo uploads the CSS file to the Paligo server.

Select Save.

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

Select the parent element for the content that you want to style in the Element Structure Menu.

Select Go to element.

Add the role attribute in the Element Attributes Panel and give the attribute a name as value.

We recommend that you use a name that is easy to recognize, for example, specialborder.

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.

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 and Upload Customized CSS.

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.

Add the role attribute In theElement Attributes Panel and set its value to noborder.

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.

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 and Upload Customized CSS.

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, see Adjust Image Size.

Select Layout 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 you want to update or Create a Layout.

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).

Select Save.

Select Layout 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 you want to update or Create a Layout.

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.

Select Save.

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 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 you want to update or Create a Layout.

Select Inline elements > guiicon.

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

Select Save.

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

Select the image

Select the imagedata element in the Element Structure Menu and choose 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.

Select Save.

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.

Select Layout 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 you want to update or Create a Layout.

Select Images in the sidebar.

Scroll down to Image size.

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 that you want to size.

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

Add the width or contentwidth attribute in the Element Attributes Panel.

Set its value to the desired width in combination with any of the Measurement Units for Image Sizing.

By default, if no measurement unit is specified, the sizes are in pixels (px).

Select Save.

Select Layout 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 you want to update or Create a Layout.

Select Images in the sidebar.

Scroll down to Image size attribute.

Select Enable from the menu.

Select Save.

To display image details, either:

Paligo displays the Image details.

Select Upload Image (in the lower right corner) to replace the current image with a new one.

Select Select file to add the replacement image.

Select Upload.

Close the dialog when the upload is complete.

To display image details, either:

Paligo displays the Image details.

Select Replace with existing (in the lower left corner) to replace the current image.

Select the alternative image that you want to use.

Close the dialog when the upload is complete.

Expand the Media section in the Content Manager.

Select the dotted menu ( ... ) for a folder or create a new folder and select the options menu for that.

Select Upload Images.

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

Drag and drop your image files from your computer into the box.

Alternatively, select Add Files and browse to the files you want to upload.

If all the image files you are adding are new, your new files are listed with a green icon showing that the image will be uploaded as a new file in the library.

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

If there are images with matching names already in the media library, the new images are listed, but they also have an Update checkbox.

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.

Use the Open parent folder box to choose whether Paligo will show you the folder that contains the images when they have finished uploading.

Select Upload.

Paligo uploads your image files to the media library. If you have updated any of the image files, the topics that use those images are automatically updated with the new images.

Select an image in a topic to display a browse dialog.

Select Upload Images.

Select the blue menu at the top of the dialog to select where to upload the images.

The blue menu displays a hierarchical view of your media library folders.

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

Drag and drop your image files from your computer into the box.

Alternatively, select Add Files

If all the image files you are adding are new, your new files are listed with a green icon showing that the image will be uploaded as a new file in the library.

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

If there are images with matching names already in the media library, the new images are listed, but they also have an Update checkbox.

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.

Use the Open parent folder box to choose whether Paligo will show you the folder that contains the images when they have finished uploading.

Select Upload.

Paligo uploads your image files to the media library. If you have updated any of the image files, the topics that use those images are automatically updated with the new images.

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.

Select Save.

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;
}

Save your CSS file and Upload Customized 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;
}

Save your CSS file and Upload Customized CSS.

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.