Skip to main content

Borders for Images (PDF)

For PDF outputs, you can add borders around images. For example, you could add a pink dotted line around your images, like this:

Image of a mars rover robot. It has a pink dotted border around the edge.

It's also possible to add borders around the space that contains the image on a page.

When setting the image borders for PDFs, you can use the:

  • PDF layout to set the default image borders that will apply to all images, inline images, figures, and informal figures.

  • role attribute to define specific image border styles that will only apply to one specific image.

Note

For information on adding borders for HMTL outputs, see Borders for Images (HTML).

The PDF layout editor has settings for adding borders around your block images. These settings are the borders that will apply to all block images by default.

Image of a mars rover robot. It has a pink dotted border around the edge.

Block image with a dotted pink border.

To set a border that will apply to all block images in your PDF layout:

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

  2. Select Layout in the top menu.

    Paligo editor. The Layout option in the header menu is highlighted.

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

  3. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  4. Select General > Images.

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

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

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

  8. Select Save. Save icon.

When you publish to PDF using this layout, your block images will have a border that matches the styles you have set.

If you have a figure or informalfigure in your content, you can apply borders to the figure / informalfigure element. These settings do not affect the border around the actual image, they only affect the border of the figure / informalfigure "container".

Image of a mars rover robot. It has been inserted as a figure, as it has a figure title. There is a green border around the entire figure space and a pink dotted border around the image inside that space.

A figure "container" with a green ridge border and gray background. Note that the pink dotted border around the image is the border set for block images.

To define the default border settings that will apply to all figures / informal figures for PDF output:

  1. Select Layout in the top menu.

    Paligo editor. The Layout option in the header menu is highlighted.

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

  2. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  3. Select Formal elements > Figure.

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

  5. Select Formal elements > Informalfigure.

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

  7. Select Save.

When you publish to PDF using this layout, your figure and informalfigure "containers" have a border that matches the styles you have set.

You can set borders that will apply to all of your inline images by default. For this type of border, your inline images need to be inside a guiicon element, which you can add from the element context menu.

In text: Click the save icon. It is followed by a save icon image that is on the same line as the text. The icon image has a dotted pink border around it.

Inline image with pink dotted border.

To define the default border settings that will apply to all inline images for PDF output:

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

  2. Select Layout in the top menu.

    Paligo editor. The Layout option in the header menu is highlighted.

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

  3. Select the Layout you want to update or Create a Layout.

    Tip

    You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.

  4. Select Inline elements > guiicon.

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

  6. Select Save.

When you publish to PDF using this layout, your inline images will have a border that matches the styles you have set.

You can set borders on individual images and these borders will override any borders that are set in the PDF layout. For example, if your PDF layout sets all images to have a black dashed border, you could set one image to have a dotted red border. That image's own settings (dotted red border) take priority over the border settings in the layout.

To set the borders on a specific image:

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

  2. Select the image

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

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

    The Element Attributes section in Paligo. Here, it shows the fileref and ID, a width attribute that is set to 50%, and an xinfo:image ID. There is an add attribute field at the bottom.
  5. Use the Add attribute field to give the imagedata element the role attribute.

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

  7. Select Save. Save icon.

When you publish to PDF, the image will have the border settings that you applied specifically to that image, rather than those defined in the PDF layout.