RESEARCH it logo  SHARE it logo    VERSO logo

 

UX ADMINISTRATION

Chapter 4. WORKING WITH PAGES AND WIDGETS

   

 

Image Block

The Image Block component lets you add graphic or pictorial elements to a page.

To add a new Image Block component:

  1. On the Page Settings screen for the desired page (see Creating and Editing Pages for more information), select Image Block from the Select Component menu for the desired page block.
    • The Image Block Component page displays.

Image Block Component Page

Image Block Component Page

  1. If desired, enter a title for the Image Block in the Title text box.

    NOTE: The Image Block Title is optional.

  2. Use the Title Color color picker to select the desired font color for the Image Block Title (see Using the Color Picker for details).
  3. Use the Image Upload tools to locate and upload the desired image file.
    • Click the Browse button.
      • A standard File Upload dialog displays.
    • Locate the desired image file, then click the Open button on the File Upload dialog.

      NOTE: For best results, use an image that is less than 1200px wide to cover large monitors.

      NOTE: Be sure the selected image is saved in a supported file format. Supported formats for image files include JPG, GIF and PNG.

      • The file name for the selected file shows to the right of the Browse button.
    • Click the Upload Image button to upload the selected image file.
      • A thumbnail of the image shows in the preview area when the upload is completed, and the message “image uploaded” shows briefly at the top of the screen.
  4. Enter an “alternate” text description of the image in the Image Alternate Text text box.

    NOTE: The Image Alternate Text description is used by “screen readers” to describe the content of the image. The Image Alternate Text description is also displayed when the cursor is positioned over the image.

  5. If desired, enter the Uniform Resource Locator (URL) for an external web page in the Target URL text box.

    NOTE: When a Target URL is included, the specified web page will open in an additional browser tab or window when the image is clicked.

    • BE SURE to include http:// or https://, as appropriate.
  6. If desired, click the More Options link to configure additional design elements to the Image Block component.
    • Use the Width text box to specify the width of the image. You can specify the width of the image in pixels, as a percentage of image physical size, or as a percentage of the width of the active browser window.
      • To specify image width in pixels, enter the desired number of pixels followed by the unit identifier “px” (e.g., “555px”).
      • To specify image width as a percentage of image physical size, enter the desired percentage followed by the unit identifier %” (e.g., “65%”).
      • To specify image width as a percentage of browser window width, enter the desired percentage followed by the unit identifier “vw” (e.g., “65vw”).
    • Use the Height text box to specify the height of the image. You can specify the height of the image in pixels, as a percentage of image physical size, or as a percentage of the height of the active browser window.
      • To specify image height in pixels, enter the desired number of pixels followed by the unit identifier “px” (e.g., “555px”).
      • To specify image height as a percentage of image physical size, enter the desired percentage followed by the unit identifier %” (e.g., “65%”).
      • To specify image height as a percentage of browser window width, enter the desired percentage followed by the unit identifier “vh” (e.g., “65vh”).
    • Use the Image Position text box to specify the position of the image within the page block; left, center or right.
    • Use the Opacity field to set the transparency level of the image, from 1.0 (no transparency) to 0.0 (100% transparency).
    • Use the Image Background Color color picker to select the desired background color for the Image Block (see Using the Color Picker for details).
      • The Image Background Color will fill in any “blank” space in the page block.
    • Use the Flush in template checkbox to indicate whether or not the page block should be flush with adjacent blocks on the page.
      • A checkmark checkmark indicates the page block will be flush with adjacent page block.
      • An empty checkbox checkbox indicates the page block will not be flush with other page blocks.
      • Clicking the text box repeatedly will toggle it on and off.
  7. To preview your work while editing:
    • Click the Preview link to preview the component as it will appear when added to a page.
      • The screen refreshes to display a “preview” of the component.
  8. When all desired information for the component has been entered, click the Save and Close button to save the component. (Click the X button to cancel your work and discard the new component.)
    • The Image Block Component page closes, the system returns to the Page Settings screen, and the completed Image Block component displays.
  9. Click the Save Page Settings button to save the page settings. (Click the X button on the Page Settings screen to close the page without saving your changes.)
    • The message “Template Saved” shows briefly at the top of the screen.
  10. The Page Settings screen closes, and the system returns to the “Home” page.

To edit an existing Image Block component:

  1. On the Page Settings screen for the desired page (see Creating and Editing Pages for more information), mouse over the Image Block component you wish to edit, then click the Edit Component link.
    • The Image Block Component page displays. The page is pre-filled with the current values for the component.

Image Block Component Page

Image Block Component Page

  1. Edit the component Title, Title Color, Image Alternate Text and/or Target URL, as desired.
  2. If desired, use the Image Upload tools to locate and upload a new image file.
  3. If applicable, expand the More Options field to edit the image Width, image Height, Image Position, image Opacity, Image Background Color and/or Flush in template values, as desired.
  4. To preview your work while editing:
    • Click the Preview link to preview the component as it will appear when added to a page.
      • The screen refreshes to display a “preview” of the component.
  5. When all desired information for the component has been edited, click the Save and Close button to save the component. (Click the X button to cancel your work and discard your changes.)
    • The Image Block Component page closes, the system returns to the Page Settings screen, and the revised Image Block component displays.
  6. Click the Save Page Settings button to save the page settings. (Click the X button on the Page Settings screen to close the page without saving your changes.)
    • The message “Template Saved” shows briefly at the top of the screen.
  7. The Page Settings screen closes, and the system returns to the “Home” page.