Image widget

The Image widget allows you to add static and dynamic images to a page.

Examples

Use this widget to support app design requirements such as the following:

• You want to add supporting images to a page that visualizes or corresponds with the represented topics or data.
• You want to show an image on the home page that users can click to be redirected to another website.

Usage notes

For a static image source, there are no limitations for the number of images you can upload.

Note:

You can upload the following image formats: PNG, GIF, JPG, JPEG, and BMP. To preserve optimal performance, there is a 10MB size limit for each upload.

Settings

The Image widget includes the following settings:

• Connect to data—Optionally, connect the widget to specific data, including a data view. (A data source is not required for an Image widget.)

  Note:

  If you connect to a data source, you can still add a static image, but you can also set a dynamic source from the attributes or expressions based on the data source.

• Image source—Select an image source by either uploading it from local files or providing the URL. If applicable to the selected data, click Dynamic and choose Attachment or Symbol to populate the image widget with feature layer attachments or web map feature symbols. Click the Delete button to remove an unused uploaded image.
  • If the selected data view contains multiple features, the image widget only displays the attachments or symbols for the first feature.
  • The Attachment and Symbol source support data view selection, Selected features, or Auto-populated features (with List).
• Image display quality—For a static local image source (PNG, JPG, and JPEG file formats only), choose from four levels of image display quality: Low, Medium, High, and Original. Use a lower display quality to optimize image loading performance.
• Set link—Add a link on the image to go to other content, such as a page, window, web address, block, or a view in a section in your app. You can choose whether the link opens in the same window as the app, the top window, or a new window.
• Tooltip—Provide hover text to describe the image.

  Note:

  For ToolTip and alt text input, if a data source is connected, you can either directly type the content (static) or choose dynamic content using attributes, statistics, or expressions based on the data source.

• Alt text—Provide the alt text for assistive technology, such as screen readers.
• Position
  • Fill—Fill the widget area with the image, leaving no blank space, but the image may be cropped.
  • Fit—Fit the entire image within the widget borders.
• Shape—Change the image shape from rectangular to other options such as circular and hexagonal.