Add an Image component

Note

Use the Experience Editor for the steps described in this topic.

You can add the Image component to your pages. Once have placed the Image component, you can add the image and specify properties, for example by making the image function as a link.

To add an image to a page:

Open the toolbox. Alternatively, you can click the Component button on the HOME tab to open the Select a rendering dialog box.
From the Media section, drag and drop the Image component on the placeholder that you want to add the rendering to. While dragging, the placeholder turns blue.
To select an image and specify the image properties, in the floating toolbar, click Edit image properties and fill out the relevant fields.
To change the image properties, click Modify image appearance.
In the Image Properties dialog box, you can define the following fields:
- Alternate Text - provide textual alternative for the image that is displayed if the image file is not loaded.
- Default Alternate Text - standard field that you must not modify.
- Width and Height - in the Dimensions section, you can change the width and height of the image.
- Keep Aspect Ratio - maintain the aspect ratio when resizing images.
- Horizontal Space - sets the space between the image and the surrounding text in the horizontal direction.
- Vertical Space - sets the space between the image and the surrounding text in the vertical direction.

Note

When you add images, the text is stored in a data source item under the Data folder of the page in the Content Editor.

Properties in the Edit images dialog box

Section	Property	Description
Caption	When filled, the text is displayed under the image.
URL	Enter the URL directly, or use one of the other options.
	Insert link	Insert a link to Sitecore items. Clicking the image will redirect the user.
	Insert media link	Navigate to the media item that you want to link to and specify any additional properties for the link.
	Insert external link	Enter the URL for the external website that you want to insert a link to and specify additional properties.
	Insert anchor	To add a link that goes to a specific section of a page, you first need to place an anchor at the section you want to link to, then use an anchor link to allow visitors to get to that section without having to scroll.
	Insert email	Insert an email address. Clicking the image will open an email directed to the specified email address.
	Insert JavaScript	Enter the JavaScript link that you want to insert and specify the relevant properties for the link.
	Clear	Clears the URL field.
Image	Enter the path to the image item directly, or use one of the other options.
	Browse	Click to find the image in the Media Library.
	Properties	Click to change the image properties.
	Clear	Remove the image.
	Refresh	Refresh the image.
	External image link	Specify a link to direct to an image on a different page.

Do you have some feedback for us?

If you have suggestions for improving this article,