Work with images and text

You can add images and text to an infographic template as stand-alone elements or panels. Images and text can improve the design of a template and can also be formatted to display variables and site information.

Add an image or shape

You can add an image or shape to an infographic template by uploading an image or selecting a shape. To add an image or shape to an infographic template, do the following:

1. In the infographic builder, click Add element. Alternatively, hover over an existing panel and click Add or Replace .
2. Click Image .
3. To choose an image on your computer, click Browse for image and select an image file. To choose from images included with Business Analyst, click Shapes and icons and browse or search to find a shape or icon.

   Tip:

   When a template is open for editing, you can drag supported image files (.png, .jpg, .gif, and .svg) from your machine to any page of your template.

   The image or shape is added to the template.

Edit an image or shape

You can edit an image or shape to customize its appearance and functionality. To edit an image or shape in an infographic template, do the following:

1. To resize or rotate an image, click the image. Drag the resize or rotation handles to adjust the image. Optionally, use shortcuts:
   • When resizing, press the Shift key to preserve the image's proportions. Press the Ctrl key to resize the image relative to the center of the image. Press Shift and an arrow key to resize the image using keyboard controls.
   • When rotating, press the Shift key to rotate the image in 10-degree increments.
2. To edit an image, hover over it and click Edit image or Edit shape .
3. For images, use the Image properties window to do any of the following:
   • Check the Circular mask check box to crop the image into a circular shape. Check the Scale to cover check box to resize the image to fill the panel.
   • Click Change image behavior to set this image panel to display a default logo or site image when one is available.
   • Resize and rotate the image using the Size and Angle sliders.
   • Use the Transparency slider to modify the image's transparency.
   • Expand the Dimensions and Arrange & position sections to alter the image's dimensions and placement using pixel values.
4. For shapes, use the Shape Properties window to do any of the following:
   • Resize and rotate the shape using the Size and Angle sliders. Check the Preserve proportions check box to maintain the shape's aspect ratio.
   • Adjust the shape's colors using the Fill and Border check boxes and color swatches. Use the Transparency slider to modify the shape's transparency.
   • Expand the Dimensions and Arrange & Position sections to alter the shape's dimensions and placement using pixel values.

Add a text box

You can add a text box to an infographic template. Text boxes can display the text you write, or you can use advanced editing to incorporate dynamic fields, such as variable values and site information. To add a text box to an infographic template, do the following:

1. In the infographic builder, click Add element. Alternatively, hover over an existing panel and click Add or Replace .
2. Click Text .
3. In the drop-down menu, click Text box.

   The text box is added to the template and the Text style window appears.

4. Enter text in the text box.
5. In the Text style window, do any of the following:
   • Format the text's font, size, alignment, color, and element fill color.
   • Click Advanced text editing to open the editing pane. See Advanced text editing.
   • Click More settings to duplicate the text box, copy its style, or clear the text. To allow viewers of the infographic to edit the text, check the Enable text editing check box. Click Add dynamic field or notes to add dynamic content. See Add a dynamic field or notes to a text element.
   • Expand the Border section to add and format a border for the text box.
   • Expand the Dimensions and Arrange & position sections to alter the text box's dimensions and placement using pixel values.

Add a text panel

You can add a text panel to an infographic template. Text panels are composed of text boxes and other elements, such as a title, image, or variable. To add a text panel to an infographic template, do the following:

1. In the infographic builder, click Add element. Alternatively, hover over an existing panel and click Add or Replace .
2. Click Text .
3. In the drop-down menu, click Panel.

   The text panel is added to the template and the Text style window appears.

4. Enter text in the text panel. Click Add element and select another panel element to accompany the text, such as a title or image.

   Note:

   You must add an element to the panel to use panel formatting options. If you do not add any elements, the panel becomes a text box.

   Elements are added to the panel as you select them. You can move, resize, and rotate elements in the panel.

5. Click Apply.
6. To edit an element in the panel, hover over the panel and click Edit . Hover over a text element, such as the title or a text box, and click Edit text or Edit style and field.

   The Text style, Title style, or Subtitle style window appears.

   Note:

   To edit nontext elements in the panel, follow the instructions for editing images and shapes, variables, charts, and maps.

7. In the window, do any of the following:
   • Format the text's font, size, alignment, color, and element fill color.
   • Click Advanced text editing to open the editing pane. See Advanced text editing.
   • Click More settings to duplicate the text box, copy its style, or clear the text. To allow viewers of the infographic to edit the text, check the Enable text editing check box. Click Add dynamic field or notes to add dynamic content. See Add a dynamic field or notes to a text element.

Add a variable as text

You can add a variable as text to an infographic template. The text box dynamically displays the value of the selected variable for the site on which you run the infographic. To add a variable as text to an infographic template, do the following:

1. In the infographic builder, click Add element. Alternatively, hover over an existing panel and click Add or Replace .
2. Click Text .
3. In the drop-down menu, click Variable.
4. Use the data browser to find and select a variable.

   The variable is added to the infographic as a text box displaying the count, percentage, or index.

5. To edit the text element containing the variable, hover over it and click Edit style and format .

   The Style and format window appears.

6. In the Style and format window, do any of the following:
   • Format the text's font, size, alignment, color, and element fill color.
   • Click Advanced text editing to open the editing pane. See Advanced text editing.
   • Click More settings to duplicate the text box, copy its style, or clear the text. For Conditional, click Text styling or Image to add conditional styling based on the variable value. Click Add dynamic field or notes to add dynamic content. See Add a dynamic field or notes to a text element.
   • Expand the Display format section to specify numerical formatting options, including how many decimal places to show.
   • Expand the Border section to add and format a border for the text box.
   • Expand the Dimensions and Arrange & position sections to alter the text box's dimensions and placement using pixel values.

Perform advanced text editing

You can build sentences and paragraphs with multiple variables and text, change the style of portions of text, and add hyperlinks. To perform advanced text editing, do the following:

1. In the Text style or Style and format window, click Advanced text editing.

   The Add variables to text window appears with the text box in the builder area.

2. In the Add variables to text window, use the data browser to find variables. To add a variable, drag it to the text box.
3. Build a text expression. Do any of the following:
   • To add or modify text, click inside the text box and type. To format text, highlight the text and use the Text style options.

   • To insert site information or attributes in the text box, click Add dynamic field or notes. Use the drop-down menu to select a field.

   Hover over the text to view information about discrete blocks.

4. When you are finished editing and formatting text, click Save.

Add a dynamic field or notes to a text element

You can add a dynamic field or site notes to a text element. This links the text element with information entered in the site attributes. To add a dynamic field or notes to a text element, do the following:

1. In the Text style or Style and format window, click Add dynamic field or notes.
2. Use the drop-down menu to select a field to display in the text box.

   Note:

   Adding a dynamic field from the Text style or Style and format window deletes the text box's contents and replaces them with the field you select. To add a dynamic field as part of a larger text, see Advanced text editing.