Skip to main content

Images

With Paligo, you can add and manage all of the images that you need to use in your technical communication. This includes images in the source language and also images for your translations.

There are 4 main types of image you can add: images, figures, inline images, and side-by-side images.

  • Use an Image if you want to use a picture without a title and caption (see Add an Image).

  • Use a Figure when you want an image with a title and a caption (see Add a Figure).

  • Use an Inline image to add a small picture that appears in the flow of the text, for example, an icon that appears inside a paragraph (see Add an Inline Image).

  • Use Side-by-side images to show two images next to each other on the same line, rather than stacked one above the other (see Add Side-By-Side Images).

Paligo supports a wide range of image formats, including:

  • AI (Adobe Illustrator)

  • EPS (Encapsulated Postscript)

  • GIF and animated GIF (Graphics Interchange Format)

  • JPEG

  • JPG

  • PDF (Portable Document Format)

  • PNG (Portable Network Graphic)

  • PS (PostScript)

  • PSD (Adobe Photoshop)

  • SVG (Scalable Vector Graphics)

  • TIF (Tagged Image File Format)

  • TIFF (Tagged Image File Format)

  • WebP

You can view information about an image by displaying its properties on the Image Details dialog. The details you see there are the settings for the source image, but you can see previews of variant images for different languages too.

To display the Image Details dialog:

  1. To display image details, either:

    • Find the Source Language image in the Media library, select its dotted menu (...) and choose Edit Image.

      Image file selected in the Media library. Its options menu is shown and the Edit image option is being selected.
    • Right-click the source language image inside a topic and select Edit Properties.

    Image details dialog for an image. A preview of the image is shown on the right and the settings for the image are shown on the left.

    Paligo displays the Image details.

  2. Use the Image details dialog to:

Note

To set the width of an image, use the image attributes (see Image Sizing).

Paligo has a media library that contains all of the images you upload. When you upload images to the media library:

  • Paligo compares the image filename to the images that already exist in the media library. If there are images with matching filenames, you can choose to update them or add the new images and the existing ones.

  • Paligo manages the image formats and translated images automatically. We call this Smart Image Management.

Paligo takes care of the complexity of managing different versions of images for you:

  • Automatic image formats: You can upload an image in just one format, for example, the highest resolution version, or a source file in Photoshop (PSD), or Illustrator (AI). Paligo will automatically handle the conversion to a suitable output format for print or web, so you do not have to keep track of multiple format versions of the same image.

  • Images in multiple languages: You can also upload the same image translated into multiple languages (such as screenshots for localized software). Paligo will automatically select the right language version when you publish to different languages. Read more about that in Translate Images.

Tip

If you need to add lots of variant images for outputs in different languages, see Batch Import of Language Variant Images.

You can add images to the library directly from the Content Manager. The images that you add are then available to select when you add a figure, image, inline image, or side-by-side images.

  1. Expand the Media section in the Content Manager.

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

  3. Select Upload Images.

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

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

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

    Upload images dialog. A callout box is positioned over the Update existing in any folder checkbox, which is at the bottom of the dialog.
  5. 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.

    Upload images dialog. It lists three new images that are going to be uploaded to Paligo.

    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.

    Note

    If you are uploading files that have a hyphen and language code suffix, such as battery-fr.jpg, Paligo will look for Source Language versions of the same image. If it finds a match, you get the option to update the language variant, for example, Update (fr) for a French variant. For more details, see Translate Images.

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

    Upload images dialog. It lists two images that have filenames that match images already in the Paligo database. You can choose to update the existing images or add these new images in addition to the existing ones.

    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 Update box to replace an existing image with your new image.

    • Clear the Update box to upload the new image in addition to the existing image.

      Meaning if you have multiple images with the same name. You can rename the images in the Content Manager to make them easier to manage.

    Tip

    You may be able to save time by selecting the Update all existing box, which automatically selects all of the update boxes at once.

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

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

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

When you are editing a topic, you can insert a figure, image, inline image, or side-by-side images. When you do this, you can choose one of the existing images from the library or you can upload a new image to the library and insert that.

Note

It is also possible to upload an image to a topic by using the image details dialog. But that approach does not include checking the filenames against existing images in the library or language variants.

To add images to the library from a topic:

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

    Media browser dialog. A callout arrow is pointing to the upload icon in the top-right.
  2. Select Upload Images. UploadIcon.png

    Upload images dialog. It has a box for dragging and dropping images files and an options section. The options section has a checkbox for opening the parent folder and another checkbox for removing whitespace on vector images. There are All files, Clear List, and Upload buttons at the bottom.
  3. Select the blue menu at the top of the dialog to select where to upload the images.

    Upload images dialog. The In Folder button is selected, revealing a popup that contains the media folder structure.

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

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

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

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

    Upload images dialog. A callout box is positioned over the Update existing in any folder checkbox, which is at the bottom of the dialog.
  5. Drag and drop your image files from your computer into the box.

    Alternatively, select Add Files

    Upload images dialog. It lists three new images that are going to be uploaded to Paligo.

    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.

    Note

    If you are uploading files that have a hyphen and language code suffix, such as battery-fr.jpg, Paligo will look for source language versions of the same image. If it finds a match, you get the option to update the language variant, for example, Update (fr) for a French variant. For more details, see Translate Images.

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

    Upload images dialog. It lists two images that have filenames that match images already in the Paligo database. You can choose to update the existing images or add these new images in addition to the existing ones.

    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 Update box to replace an existing image with your new image.

    • Clear the Update box to upload the new image in addition to the existing image.

      Meaning if you have multiple images with the same name. You can rename the images in the Content Manager to make them easier to manage.

    Tip

    You may be able to save time by selecting the Update all existing box, which automatically selects all of the update boxes at once.

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

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

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

You can download an image from Paligo so that it can be used elsewhere. This feature is especially useful if you have lost the original image file that you uploaded to Paligo. For example, let's say you have a screenshot that you upload to Paligo. You later later realise it contains sensitive information, but you have lost the original file. Rather than take an entirely new screenshot, you can download the image from Paligo, block out the sensitive information, and then upload it again.

To download an image from Paligo:

  1. Display Image Details

    Image file selected in the Media library. Its options menu is shown and the Edit image option is being selected.
  2. On the Image Details dialog, select the link in the Filename entry.

    Image details dialog. There is a callout arrow pointing to the filename entry and a callout box around the hyperlink text in that entry.

    The browser shows the image at maximum size in a new tab.

  3. Right-click on the image and use the browser's features to save the image to your computer. The options for saving the image can vary, depending on which browser you use. Here, we are showing the options in Google Chrome.

    A close-up view of the Chrome browser options when you right-click on an image. The Save Image As option is selected.

When you publish HTML content in Paligo, any images in the output are given a file name. The file name can be either:

  • A unique ID that is based on the UUID of the image. This file name remains the same every time you publish and is known as a "persistent" file name.

  • A unique ID that is automatically generated by Paligo each time you publish. This file name will be different each time you publish.

In most cases, the "persistent" file name is preferable, especially if you use GitHub or similar for version control. For example, let's say that you have a publication with 200 topics and they all contain images. You publish the publication several times, without changing the content at all. Each time you publish, it is going to appear that all 200 topics and all the images have changed, because all of the images have had new file names generated. But if you had "persistent" file names, there would be no updates, which is correct.

However, if you have a particular need for the image file names to change each time you publish, you can disable "persistent" file names.

To enable or disable "persistent" file names, use the Display System Settings.

Note

The reason that we use IDs for file names is that the IDs are unique and are supported for translations, imports, exports, etc. If we only used regular text file names, there could be problems with special characters not being recognized by other systems, or multiple files all having the same file name.

If you publish HTML outputs, you may want to style your images, for example, you could add a border around all of your images.

To style images in HTML, use CSS to create the styling, upload the CSS file to your HTML layout, and then republish.

For the CSS, you will need the image class names. There are default class names, which you can use to style all images at once, or you can add your own custom class names. With your own custom class names, you can style an individual image or multiple images of your choice.

Note

It is beyond the scope of the Paligo documentation to cover all of the possibilities for styling images with CSS. There are many online resources for learning about styling images with CSS, including www.w3schools.com.

Tip

To find out how to upload a CSS file that you have created, see Style with CSS.

All images in your published HTML content have a class name. You will need the class name to style the images with CSS.

By default, the class names are:

  • mediaobject for block images

  • inlinemediaobject for inline images.

In the published HTML, the mediaobject is the class name for a container <div> element, and the image is inside the <div>.

HTML code showing <div class="mediaobject"> on the top line, <div class="material-placeholder"> on the middle line, and <img class="materialboxed" with some other image metadata on the third line. A callout arrow points to the first line and a blue highlight box is around the third line.

Similarly, the inlinemediaobject class name is for a span element that contains the inline image.

HTML code showing <span class="inlinemediaobject"> on the top line, and image metadata on the second line. A callout arrow points to the first line and a blue highlight box is around the second line.

You can use a CSS selector to style the image inside the mediaobject and inlinemediaobject "containers". For example, to put a border around all mediaobjects, you could create a CSS file containing the following styling:

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

You would then upload that CSS file to your CSS layout and publish using that layout. The block images in your published output would then have a blue dashed line as a border.

An image with blue dashed border.

If you apply styling to mediaobject or inlinemediaobject, it will apply to all images that have that class name. So if the default settings are in place and none of your images have a custom class name, styling mediaobject will affect all of your block images and styling inlinemediaobject will affect all of your inline images.

If you only want to style specific images, you can give those images their own class names. There are two ways to do this: you can Custom Class Names for Images - Role Attribute or Custom Class Names for Images - Taxonomy Tag .

To style an individual image or perhaps a selection of images, you need to give the image(s) a class name. The class name has to be different to the general mediaobject or inlinemediaobject that is assigned to all images by default. When the class name is in place, that class can be styled separately in your CSS.

One way to give an image a class name is to use the role attribute. You can set it on the image's mediaobject element, and then set its value as the class name you want to use.

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

  2. Select the image and then, in the Element Structure Menu, select the mediaobject element. From the menu, select Go to element.

    Paligo editor. The mediaobject element is selected in the element structure menu. A drop down menu has many options, but a highlight box is around the go to element option.

    Note

    For inline images, use the inlinemediaobject element instead.

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

    Element attributes section. There is a role attribute with the value diagram-large.
  4. Select Save. Save icon.

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

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

Paligo publishes the content and the output includes your CSS. The styles in your CSS take precendence over the other CSS provided by Paligo, and the styling is applied to your images.

To style an individual image or perhaps a selection of images, you need to give the image(s) a class name. The class name has to be different to the general mediaobject or inlinemediaobject that is assigned to all images by default. When the class name is in place, that class can be styled separately in your CSS.

One way to add a class name for an image is to use taxonomy tags:

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

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

    HTML help center layout. The Classes and Attributes section is selected. The Output Taxonomies option is set to Enable.
  3. Select Save.

  4. Select the Taxonomy Manager in the Content Manager to open the structure. Taxonomy_Manager.jpg

    Taxonomy_Manager_Expanded.jpg
  5. Either:

    • Find an existing taxonomy tag and drag it on to the image in the Media section of the content manager.

    • Create Taxonomy Tags and Add Taxonomy Tags by dragging it on to the image in the Media section of the content manager.

    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.

    Paligo editor showing the media section of the content manager on the left. On the right, a floating content panel contains taxonomy tags. There is a callout arrow to show you that you can drag taxonomy tags from the floating content panel on to the image files.
  6. Publish your content using the HTML layout you edited in step 2.

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

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

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