Image widget | WebForms

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.

NOTE: If you know you will want to create a library for the image you want to upload, go to Create a library. You can also add images into the new library there.

After you have dragged the Image widget on your page you must configure it to display an image. 

1. To do this, click Edit button in the upper-right corner of the widget.
   The Image window appears.
2. Choose between the following:
   
   • Select image
     The system displays recent images.
     NOTE: You can also search for an image by its name. 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.
     
     1. In the right side of the window, select the library where the image you want to display is located.
        The system displays all images and libraries in this library.
        You can display all uploaded images by clicking All images.
        For more information, see Images.
     2. Click the image you want to display.
     3. Click Done.
   • Upload image
     
     1. To upload an image, drag and drop it in the window or click Select image from your computer, browse your computer to find the image you want to upload and click Open.
        You can select and display only one image.
     2. In Library, select the library where you want to put the image, by clicking Change.
        The tree with all created libraries appears. Select the library and click Done.
     3. You can change the Title of the image.
     4. In Alternative text input field, enter text that is used for accessibility reasons and by search engines.
     5. Change the categories and the tags which the image is assigned to, by clicking Categories and tags.
        For more information, see Add categories and tags to content items.
     6. If you have added any custom fields for images, all created fields, appear after the Categories and tags section.
        For more information about creating custom fields and hiding default fields, see Overview: Custom fields. 
        

        NOTE: Some of the above fields may not be displayed when you upload an image, if the view has been modified. To modify the view, click Administration » Settings » Advanced » ContentView » ImagesBackend » Views » SingleImageUploadDetailsView » Sections.

     7. Click Upload.
     8. NOTE: 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, will be saved.
        To do this, use the dropdown button in the upper-right corner of the window.
        For more information, see Multisite: Manage multiple sites.
3. To change the selected image, click Change image button and perform Step 2.
4. To edit the image, click Edit all properties.
   The Edit image window opens. Perform procedure Edit images.
5. Click Settings tab.
6. If you want to display the image in size different than its original size, in Image size, select the width to which you want to resize the image.
   In the dropdown box, all predefined image sizes appear. For more information, see Thumbnails.
   If you select Custom size… you can create a custom thumbnail by performing procedure Thumbnails » Step 4 to Step 10.
7. Expand Margin.
   Enter in pixels the margins that you want to surround the image when displayed on the site.
8. If you want the user to be able to view the image in its original size by clicking it, select the Clicking the resized image opens the image in its original size checkbox.
9. When you are finished, click Save.
   The Image window closes and the Image widget is configured to display the image you have selected. 
   

   NOTE: If your site is multilingual and the page you are editing is synchronized with another translation, when you edit the widget, the Save to all translations button appears. If you click it, the current widget configuration will be saved to all translations, else, if you click Save, the widget configuration is saves only to the current translation, but the pages are still synchronized. If your pages are synchronized, you can have different widget configurations, but you cannot have different widgets.

For more information about advanced configuration options, see Advanced configuration of widgets.