Skip to main content

Level Text and Image

The element Sidebar has been specialized in Paligo to serve both as a separate component (called floating sidebar) and as a general-purpose reuse wrapper element, see Create an Informal Topic. Find out more about Supported Elements.

If you divide a sidebar in two columns, it is possible to level text and image for your PDF output. This can be used for step by step instruction, where the numbered steps needs to include an image.

Sidebar_Leveled_small.png

Add a Two Column Sidebar

The default setting for a sidebar is one column with gray background, black frame and the text above the image.

By adding a role attribute that divides the sidebar in two columns, the image and text inside it, will be leveled with one another for PDF output. The role attribute will remove the frame, background color and divide the sidebar in two equally sized columns. There is no option to individually adjust the column width. Therefore it is necessary to adapt the text amount with the image size. If the text amount exceeds the image height, it will flow over to the image column. You need to add one sidebar for each text and image pair.

Sidebar_Unleveled_small.png
Sidebar_Leveled_small.png

To the left the default sidebar setting. To the right a two column sidebar.

Note

To make this work in HTML output, you have to assign the sidebar a role, like "sidebar-css" and target that role with your CSS. Make sure to enable the role attribute as "class name" in the layout for the HTML / HTML5 configuration. Learn more about Role Attribute Values.

This example code will give the text 75 % of the sidebar width.

.sidebar-css {
  padding: 6pt;
  width: 75%;
  display: flex;
}

The instruction below shows how to level text and image for PDF output.

  1. Select the topic or component in the Content Manager to open it in the Editor.

    Content Manager in Paligo. It shows the Documents section contains an Acme 100 Topics folder. Inside the folder there is a publication and many topics, including "Connect to Network (100).

    Alternatively, you can Create a Topic and edit that.

  2. Place the cursor where the sidebar element is to be inserted in the topic.

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

    Element context menu shows a search field and a list of elements that are valid at the current position.

  4. Enter sidebar and select it from the menu.

  5. Add a title (optional), a para and a mediaobject by using the Element Context Menu.

  6. Select the sidebar in the Element Structure Menu below the toolbar.

    Sidebar_GoToElement_small.png

  7. Select Go to element.

  8. Add the attribute role to the sidebar element.

    Sidebar_Role_to_level_image_and_text_small.png

  9. Enter the value column-count: 2; column-gap: 10pt.

    This results in two columns with 10 pt space between them.

  10. Select Save. Save icon.

Note

You have to publish the topic to be able to see the result.

Use Numbering in Sidebars

To level text and image in a step by step instruction, you can use sidebars with ordered lists for your PDF output.

Let each step be represented by a new sidebar, because if you have several steps in the same sidebar, you will only be able to level one image.

Sidebar_Numbered_List_B.jpg

  1. Add a Two Column Sidebar for each step.

  2. Select the para inside the first sidebar.

  3. Select Ordered list in the toolbar. Ordered_list_small.png

    Toolbar_Edit_small.png

  4. Repeat for all sidebars in the step by step instruction.

  5. Select the orderedlist in the Element Structure Menu for the sidebars representing step 2 and forward.

    Sidebar_OrderedList_ElementStructureMenu.jpg

  6. Add the element attribute Continuation.

  7. Set the value to Continues.

    Sidebar_Numbering.jpg

    This results in sidebars with a continued numbering.

  8. Select Save. Save icon.

Note

You have to publish the topic to be able to see the correct numbering.