Assets are images and other files that you wish to feature on your website. Assets are uploaded to Ensemble and stored in a digital repository for use by anyone who can access them. While you may not be able to change an asset’s properties (depending on permission levels) you can customize how an asset appears on a page. Thus, you can use one asset in a variety of ways.
For instance, Site A uses an image of its department chair in its “About Us” section. Provided it has access to the picture, Site B can use the same image of the department chair but give it a different caption for its page.
Each site has its own asset folder. In the main Ensemble window, choose My Assets from the menu on the left.
Asset folders for each site you can access (if applicable) will display in the main window.
If you have access to more than one site’s assets, choose the folder where you wish to upload or place additional images or files.
There are three view choices for working in an asset folder: Card, list, or column. Choose whichever one works best for your needs.
Uploading an asset
Once you’re in the correct asset folder, select the Upload Assets icon.
After you’ve clicked on the upload icon, you’ll be prompted to upload the asset(s) from local machine. Navigate to the folder where the assets reside and choose them.
Click the Open button. You’ll then see a confirmation screen to upload or cancel the chosen item(s). Click Upload to add the image to Ensemble.
Note: You can select multiple items to be uploaded at the same time. Click the upload icon. Select multiple assets to upload by shift selecting a series of items, or Command (Mac)/Control (Win) clicking files.
When the upload is complete, you’ll be able to edit the assets, change their properties, or other tasks using the icons that are defined in the column to the right of this documentation page. ->
Adding images to pages
After an image has been uploaded to your Assets folder, it can be placed on the page you’re building.
If the page is not already open, from My Sites, navigate to the page you wish to edit. Click the checkbox next to the page title and then click Open from the menu across the top of the browser window. Make sure you are in Edit mode and not Preview in the top-right corner of the browser window. You will also want to make sure the Components and Assets menu is open on the left-hand side of the browser window. This can be opened with the sidebar icon, top-left of the browser window next to the page properties icon.
Click and drag an image component from the left-hand menu to where you want to place the picture onto a page.
Once in place, a gray box will appear where the image will go with the text "Image" in it.
Switch to the Assets tab from the left-hand menu and navigate to the image you want to place in the Image component on the page. Once you’ve found the image you want to place, click and drag it to the image component box.
To edit or resize the image for positioning on the page, click the Image properties box above it to display the Edit (pencil), Configure (wrench), Copy (dual page), Cut (scissors), Delete (trash can) and Group (picture frame) tools for the image.
Clicking on the pencil icon allows you to edit the image. Here, you can crop, rotate, change zoom or create a clickable image map for the image. Note that some of these tools are only accessible in full screen mode (white rectangle icon with corner markers). Remember to click the check mark icon to accept and apply any changes.
The Configure menu is accessible via the wrench icon. Here, you can complete the Alt Text field, write a caption, link it to another page, change the alignment, choose a different size, and decide whether or not you wish to display the caption.
To link an image to another page, click in the Link to field under the Image tab in the configure dialog. In the Link to field, you can either enter the URL of the page you’re linking or click the folder icon to the right and navigate to the page you want to link.
When you’re done changing the properties, click the check mark icon.
A note about alignment and image sizes
All templates within Ensemble are designed to function on screens of varying sizes. As such, we have made the default alignment and size of the image to fill the space that it’s occupying. This means, ideally, that no text would appear to the left or right of the image. It also means that you no longer have to upload multiple versions of the same image. Ensemble will choose the correct image size for the space and screen that’s viewing the page.
You can change the alignment and image size if you prefer. However, as a best practice when it comes to responsive web design, (pages designed to accommodate a variety of screens on mobile phones, tablets, laptops, and desktops) we highly recommend leaving the default alignment and size alone.
To remove the image, click in the Image properties box above the picture and click on the trash can icon.
Adding a video to your page follows a similar process to uploading an image. Videos and other media files can be uploaded to your assets folder. Follow the same steps for uploading an image to add a video or other media file.
Once uploaded, drag the Media component to the place on the page where you want it to appear. Open the component properties by clicking the wrench (configure) icon.
In the field marked Media asset, drag the media file to the "Upload Media Asset" button. A box will appear - as illustrated below - that will state "Drop asset here." Place the file over that box and close the window. The media file will then appear on the page.
Videos that are hosted on external sites, such as YouTube or Vimeo, can also be embedded on an Ensemble page. For those cases, use the Media - External component.