Feather: 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 Feather: Image field and Feather: Image selector.

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

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

Select an image

To select an image, you can:

• Filter by My Images or All Libraries.
  The system displays the images uploaded most recently. 
• Filter by library, categories, tags, or dates by expanding expand 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 Administration: 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 button.

Upload an image

In 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:

• Change the default library where images are uploaded by clicking the Change button.
  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 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 Edit images.
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 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.

6. From the Template dropdown menu, select a widget template to use for this Image widget.

7. To apply additional CSS classes to the widget, expand More options section and specify CSS file names.

8. In case you created predefined styles, you can use the Style dropdown menu, which lists your predefined styles. For more information, see Feather: Add predefined styles.

9. Click Save.

Configure the Image widget in multsite 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: Manage multiple sites. 

Configure the Image widget in 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 to 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 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.

Create templates 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.