The Image Element is used to add an image to the page. This approach is best when:
...you want to preserve the image's aspect ratio (its height/width ratio) at all times, rather than cropping it.
...you want to add alt-text to an image for SEO purposes.
If you want the image to be cropped as part of the page layout, you need to float other content over top of it, or you want the image to extend past the width of the site to appear full-width in the browser, you may be better off using a background image instead.
Image elements can be placed directly onto the page, or within containers or grids. Once placed, you can select an image asset from your computer or the media library to populate the image element.
TIME Sites currently supports all formats for images.
Adding an Image Element to the Page
Select the image element icon from your left toolbar and drag it onto the page:
The image element may be placed as a root element on the page or placed within a container or a grid.
Once placed, the image element will appear as an empty box with a small image icon in the center. By default, it will take up 100% of the width of the page (or its parent container.)
Adding an Image to an Image Element
The image element will be empty until you specify an image asset to be used.
To add an image to the image element from your local computer, click the small image icon in the middle of the element:
Then choose the image you want to upload from your drive. Once uploaded, it will appear both on the stage, and in the media library.
If the image you want to use is already in your media library, you can drag and drop it directly into the image element on the stage. You can also drag and drop directly from your desktop.
Resizing Images in an Image Element
Images added to the image element will default to their uploaded size once added to the page. You can use the Dimensions Panel or the Focus Frame to resize the image.
Image elements will always maintain their aspect ratio: if you make an image wider, its height will increase a corresponding amount to prevent the image from being stretched or distorted.
Editing an Image Element
You can use the right toolbar control panels to edit the styling of an image. These panels will allow you to set its border, margin and padding, filters, transforms, and so on.
Deleting an Image Element
To delete an Image Element, select it and then hit <delete> on your keyboard, or choose "Delete" from the "Edit" menu.