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:
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.
To set a border that will apply to all block images in your PDF layout:
-
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 theimagedata
element, see Adjust Image Size. -
Select Layout in the top menu.
-
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.
-
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 #FF1493The 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.
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".
To define the default border settings that will apply to all figures / informal figures for PDF output:
-
Select Layout in the top menu.
-
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.
-
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 thefigure
element. -
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.
To define the default border settings that will apply to all inline images for PDF output:
-
Make sure the inline images are inside a
guiicon
element. Theinlinemediaobject
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.
-
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.
-
Select Inline elements > guiicon.
-
Use the border settings to style the width, line style, color, background color, and padding (internal margin).
-
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:
-
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 theimagedata
element.To add a
width
attribute, select the image and then select itsimagedata
element in the Element Structure Menu. Select Go to element, and then in the Element attributes section, add thewidth
attribute and value. -
Use the Add attribute field to give the
imagedata
element therole
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.
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.