Image widget

Use this widget to display a single image on your page. You can choose an image from the already uploaded images or upload a new image. The Image widget uses the sfImageField directive and the sfImageSelector.
For more details, see Image field and Image selector.

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.

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.

To use these attributes, in Step 6 of the procedure Edit image properties below, select the Image dimensions template.

After you place the Image widget on your page, you configure the widget to display a specific image. To do this, you click either the Edit button in the upper-right corner of the widget or the Select image link.

In the Image window, you specify whether you want to display an image from the library or upload a new image.

Select an image

To select an image, you can do one of these:

• Filter by My Images or All Libraries.
  The system displays the images uploaded most recently.
• Filter by library, categories, tags, or dates by clicking the Other filters option dropdown menu.
• Choose sorting options and change the layout of the view by clicking Sorting and view.
• Search for an image by starting to type its name.
  Search results depend on Enable search results only in selected folder and its subfolders setting in Administration » Settings » Advanced setting » Libraries.

  NOTE: If you are searching for an image that has language versions, you can enable the option to get search results that include the image, even though it may be in a language different than the one currently selected.
  For more information, see Enable multilingual search results in media libraries.

• Display a specific image by selecting the library where the image you want to display is located.
  Simply click the image you want to display.

Next, click the Done selecting button.

Upload an image

On the right side of the window, select Upload image.

To upload an image, do one of the following:

• Drag and drop the image in the window.
• Click Select image from your computer, browse your computer to find the image you want to upload. Click Open.

  NOTE: You can select and display only one image.

You can also:

• To change the default library where images are uploaded, click one of the following:
  • If you have not chosen the image library, click Select.
    Select the library and click Done selecting.
  • If you want to change the image library, click Change.
    Select the library and click Done selecting.
• Optionally, change the Title of the image.
• In the Alternative text input field, you can enter text that is used for accessibility reasons and by search engines.
• Change the categories and the tags of the image by expanding the Categories and tags section.
  For more information, see Add categories and tags to content items.
• Finally, click Upload.

Edit image properties

After you select an image or upload a new one, you can see the image properties such as type, file size, and upload date. To change the selected image, click Change image button and select or upload a new image.

To edit image properties:

1. To edit general image properties, click Edit all properties. You can edit categories, tags, URL, and so forth. For more information, see Image properties.
2. You can edit the following properties:
   • Title
   • Alternative text
3. To enable users to view the image in its original size by clicking on it, select the This image is a link… checkbox and then select To the image in its original size.
4. To make your image link to a selected page, click the To selected page… option and specify a page from your site.
5. To display the image in size different than its original size, in the Image size dropdown menu, do one of the following:
   • Select one of the predefined image sizes.
     For more information, see Thumbnails.
   • To create a custom thumbnail, select Custom size and specify image width and height.
     For more information, see Thumbnails » Step 4 to Step 10.
   • To create responisve images, select Responsive.
     For more information, see Configure responsive images.
6. In the Template dropdown box, select a widget template to use for this Image widget.
7. To apply additional CSS classes to the widget, expand the More options section and specify CSS class names.
8. If you created predefined styles, you can use the Style dropdown menu, which lists your predefined styles. For more information, see Add predefined styles.
9. Click Save.

Configure the Image widget in a multisite environment 

If you are using multiple site management and the Libraries module uses data sources from more than one site, you must first choose the source from which you want to display images or where an image, uploaded from your computer, is saved. To do this, use the dropdown menu in the upper-right corner of the window and select a provider.
For more information, see Multisite. 

Configure the Image widget in a multilingual environment

If your site is multilingual and the page you are editing is synchronized with another translation, when editing the widget, you can see a Save All translations button. Once you click the button, the current widget configuration is saved to all translations. Otherwise, the widget configuration is saved just for the current translation. Pages are still synchronized. Thus, you can synchronize pages and have different widget configurations, but you cannot have different widgets.

Create new widget templates

You can create new widget templates for the Image widget either in the Sitefinity CMS backend, or in the file system.

To create widget template in the backend:

1. Navigate to Design » Widget Templates » Create a template.
2. From the dropdown menu, choose Image (MVC).
   

   NOTE: The name of your template must start with Image.

Once you create the new Image widget template, you can use it when you open the widget for editing.

To create a widget template in the file system:

1. Open the project folder and navigate to ~\MVC\Views.
2. Create a folder named Image.
3. Add a new view as a .cshtml file. The view must contain Image in its file name.

Once you create the new Image widget template, you can use it when you open the widget for editing.