Image Sizing

For vector images, such as SVG, you should only use contentwidth and contentdepth. These can also be used for certain other use cases, such as if you want spacing around an image, see Examples of Image Sizing.

In most cases, it is better to use the width and depth attributes as they are easier to predict. The contentwidth and contentdepth can produce unexpected (but accurate) results with bitmap images. This is because it is not always possible to determine the intrinsic image size of a bitmap image when processing the output.

Define the image size by using one of the following attributes to the imagedata element:

The viewport is the available space for the imageobject on the page. Depending on which element that is used on the imagedata element the result will differ. If you set the image:

To the left - The image (2) uses 50% of the viewport (1) To the right - The image (2) is reduced to 50% of its original size (1)

Use the Image Size setting to control the resolution of the images in your published HTML5 output. For example, you may want to reduce the resolution so that the image file size is smaller and so the page will load more quickly. The Image Size setting is available when you edit an HTML5 layout.

There are several image attributes that you can use to control the size of images, see Image Sizing.

When you About Publishing the content, the images will be sized based on added attributes and values. You can Preview a Topic to see what the sizing will look like in your different outputs.

Typically, you should only set the width or contentwidth of an image. The depth or contentdepth (height) will automatically be calculated, to keep the image dimensions as the original image file. If you set both width and depth the smallest value of the two is used, and the image is scaled according to that.

There are several other attributes to control width and height. If you want to learn more about the possibilities, see DocBook image sizing reference.

For HTML5 output, you can combine the features Thumbnail Images and Lightbox for Images to get small image versions that are enlarged when selected.

Tip

To keep the SVG functionality in HTML and HTML5:

• Add the format attribute in Element Attributes Panel and select svg in the dropdown menu.

• Use contentwidth and contentdepth instead of width and depth.

To set the image sizing attributes:

By default, Paligo uses a nominal width and height when precalculating the percentage scaling of images. This might cause layout shifts for HTML5 Help Center outputs and result in Search Engine Optimization (SEO) issues.

If you enable the Image size attribute for your HTML5 output, Paligo will instead use the actual width and height when precalculating the percentage scaling of images. This makes the webpage load faster and provides a smoother user experience, as it allows the browser to precalculate the page layout more accurately.

To improve Search Engine Optimization (SEO) and the user experience, this setting can be used in combination with the Image size setting to boost site visibility, see Adjust Image Resolution.

In your HTML5 output, you can show diminished images that are enlarged when selected. The enlarged version of the image is shown in a "lightbox", which is a separate display that overlays your content.

This is especially useful when you have large images that would provide a better experience for users if they were smaller. This is achieved if you resize the images by using the width attribute or enabling Thumbnail Images and then enable the Lightbox feature.

Diminished images are shown on the page

With the Lightbox feature enabled, the images are enlarged when selected.

Enable or Disable Lightbox

To use Lightbox for Images you have to activate the feature in the Layout Editor. Lightbox can be used on Thumbnail Images as well as images resized with the width attribute. Click the image below to test this feature.

This image is resized with the width attribute and the value is set to 50%.

To enable or disable the Lightbox feature for all of the images in your HTML5 output:

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

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 Images in the sidebar.

4. Set the Use lightbox for images to:

   • Enable if you want all block images to use the Lightbox feature.

   • Disable to turn off the Lightbox feature.

   Note

   If you enable the lightbox feature, you can either set all block images to use thumbnails or you can set thumbnails individually. To find out more, see Thumbnail Images.

5. Select Save.

Tip

The lightbox feature is also available for Zendesk outputs, but it is set up differently.

For Zendesk, Paligo has asset files that are included in the zip file that is downloaded in your browser when you publish. You can upload those asset files to the Assets section in Zendesk guide, and then add the following code to the Document head section:

<link href="{{asset 'lightbox.min.css'}}" rel="stylesheet" type="text/css" />
<script src="{{asset 'lightbox.min.js'}}"></script>
<script src="{{asset 'paligo-zd-lightbox.js'}}"></script>

You only need to do this once, the first time you publish to Zendesk, see Customize Zendesk Articles Using Javascript.

When you set the value for a width, depth, contentwidth, or contentdepth attribute, you can use any of these units:

You may have content that needs to have large images, but these images take up too much space on the page and make it more difficult to read the text. One way to handle this for HTML5 outputs is to use "thumbnails". This is where large images are shown at a much smaller size on the page. If you use Lightbox for Images, readers can click on the thumbnail image to display a larger version.

In Paligo, you can Set All Images as Thumbnails from the HTML5 layout or you can Set Thumbnails for Individual Images.

Thumbnail images are shown at a smaller size on the page

If lightbox is enabled, a user can select a thumbnail image to view it at a larger size