Summary

Image is one of the most common controls in design. It allows you to insert image files onto a web page.

Usage

Can be found under Property Window >> Add Control >> Image

The Image tab allows you to select the image itself. The media file can be loaded "From file" or from "Billion Photos" gallery by defining such search criteria as "Keyword", "Image type", "Free/Transparent images", or "Category".

It is possible to open an image in the editor and use a number of options like basic Crop or Saturation, and apply advanced Effects, and even Text.

Shape provides you ability to choose the image Type: Image or Bootstrap Image.

Bootstrap provides three ImageShapes that can be used to apply some simple styles to images:
-Rounded: adds border-radius:6px to give the image rounded corners.
-: makes the entire image round by adding border-radius:50%.
-Border: adds a bit of padding and a gray border:

Keep in mind that Internet Explorer 8 and lower lacks support for rounded corners.

Bootstrap sizes images "responsively" using the .img-responsive CSS class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. As browser width shrinks, the columns and images scale down.

The Link tab allows you to set the URL address, target and screen tip for the image.

The "Set as default" option makes the current design default. That changes the image style under the Styles tab.

The "Reset to Default" option resets the settings back to the default style specified under the Styles tab.
These two options appear after any setting in Shape options is changed.

###Summary **Image** is one of the most common controls in design. It allows you to insert image files onto a web page. ###Usage Can be found under **Property Window** >> **Add Control** >> **Image** The **Image** tab allows you to select the image itself. The media file can be loaded *"From file"* or from *"Billion Photos"* gallery by defining such search criteria as *"Keyword"*, *"Image type"*, *"Free/Transparent images"*, or *"Category"*. !image.png! It is possible to open an image in the [editor](https://www.aviary.com/) and use a number of options like basic *Crop* or *Saturation*, and apply advanced *Effects*, and even *Text*. !imageeditor.png! **Shape** provides you ability to choose the image **Type**: *Image* or *Bootstrap Image*. Bootstrap provides three **ImageShapes** that can be used to apply some simple styles to images: -Rounded: adds border-radius:6px to give the image rounded corners. -: makes the entire image round by adding border-radius:50%. -Border: adds a bit of padding and a gray border: *Keep in mind that Internet Explorer 8 and lower lacks support for rounded corners.* Bootstrap sizes images *"responsively"* using the `.img-responsive` CSS class. This applies `max-width: 100%; and height: auto;` to the image so that it scales nicely to the parent element. As browser width shrinks, the columns and images scale down. The **Link** tab allows you to set the URL address, target and screen tip for the image. The **"Set as default"** option makes the current design default. That changes the image style under the **Styles** tab. The **"Reset to Default"** option resets the settings back to the default style specified under the **Styles** tab. These two options appear after any setting in Shape options is changed.