Image widget

Overview

Use this widget to display a single image on your page. You can choose an image from those already uploaded or upload a new image. Then, you can edit the image settings, such as title and alt text. Finally, you can choose how to display the image on the page.

When you use the image widget, Sitefinity CMS generates an img tag in the HTML of the page. In this tag, Sitefinity CMS automatically generates the loading="lazy" attribute. This attribute instructs the browser not to load images that are off-screen until immediately before the moment they become visible. Thus, lazy loading of images improves performance.

Width and Height image attributes

Sitefinity CMS automatically uses width and height attributes within the img tag. This has the following benefits.

  • The browser can properly layout the page before the images are downloaded and displayed to the user.
    This increases the rendering speed and avoids unnecessary page layout shifts.
  • This improves the Google page experience score, measured by Google Lighthouse, and thus, increases your SEO standing.

Place the widget on the page

You can place an Image widget only inside a Section widget.
To do this, perform the following:

  1. Inside a column from the Section widget, click Add widget here
  2. Select the Content tab.
  3. Click the Image widget.
    The widget is placed inside the selected column of the Section widget.

Choose the image to display

Choose which image to display by performing the following:

  1. In the newly placed Image widget, click Select image.
    You can select and display only one image.
    Choose between the following:
    • Upload an image from your computer
      To upload an image, drag and drop it in the window or click Upload image from your computer, browse your computer to find the image you want to upload and click Open.
    • Select an image from library
      The system displays recently used images.
      You can select one of the recent images or perform the following:
      1. Select the content provider where the image is located
      2. Click the library where the image is located.
      3. Select the image and click Use selected.
  2. In Upload to, select the content provider where you want to store the image, by clicking icon-pencil  (Edit).
    You can have different content providers for the different websites of your multisite instance. For more information, see Share content providers of modules.

    NOTE: If you have chosen to display an image from a library, it is already uploaded and you do not see this option.

  3. In Store uploaded image to, select the library where you want to store the image, by clicking icon-pencil (Edit).

    NOTE: If you have chosen to display an image from a library, it is already uploaded and you do not see this option.

Configure the image properties

You can change the image properties in the following way:

  1. You can change the Title of the image by entering the new title.
  2. You can change the image itself by clicking icon-pencil (Edit) below the image.
    You can select one of the recent images or perform the following:
    1. Select the content provider where the image is located
    2. Click the library where the image is located.
    3. Select the image and click Use selected.
  3. In Alternative text input field, enter text that is used for accessibility reasons and by search engines.
  4. Click Use this image.
    The image is being uploaded in the selected library.

    NOTE: If you have chosen to display an image from a library, it is already uploaded and you do not see Use this image button.

  5. In When image is clicked... dropdown box, select one of the following:
    • Nothing happens
      The system performs no action when a user clicks the image.
    • Open a link
      The Link to... input field appears.
      Enter the link to the page that you want to open when the image is clicked or perform the following:
      1. To select a page or an item from your website, click Select page or content.
      2. Under Site, select the website from your multisite instance where the page or the item is located and, if you have multiple languages, select the language by clicking icon-pencil (Edit).
      3. Under Content type, select the content type that you want to open when the image is clicked.
        A list of content items or pages appears.
      4. Click the desired item or page and click Use selected.
    • Open image in its original size
      When a user clicks the image, it opens in its original size.

Configure the display settings

To configure how to display the image in the widget, perform the following:

  1. Expand Display settings.
  2. In Image size dropdown box, choose how the image is displayed on the page, by selecting one of the following:
    • Responsive
      A picture tag is added to the image that signals the browser all thumbnail sizes that are available for the image. If the image is placed in a smaller container, the browser will automatically download a smaller sized image thumbnail, which saves load times and traffic.
      For more inforation, see Configure responsive images.
    • Original size
      The image is downloaded and displayed in its original size.
    • Use thumbnail
      In Thumbnail dropdown box, select one of the predefined thumbnail sizes.
      For more information, see Thumbnails.
    • Custom size
      Enter the Width and the Hight of the image in pixels.
      You can lock the proportions in their original size, by selecting Constrain proportions checkbox.
  3. Select Fit to container, if you want the width of the image to match the width of the column where it is displayed.
    For example, if you have chosen to display the image in its original size, have also selected to fit it to the container, the image will be downloaded by the browser in its original size, but will be automatically resized to the width of the column where it is placed.
  4. In Margins, you can choose the margins between the image and the column where it is placed.
    Choose from the predefined values of none, small, medium, or large.
  5. Click Save.

Advanced widget settings

To open the advanced settings, in the upper-right corner of the Image widget page, click DotNetCore11 (Advanced settings)

  • In Label, you can enter a specific name for this widget.
    This name will be displayed in:
    • The page editor as a label for the widget
    • In the treeview with the page structure in the right pane of the page editor.
  • In CSS class,  you can enter individual CSS class for the Image widget.

Save your changes.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Call to action widget