UNIVERSITY OF WISCONSIN River Falls
How to Insert Responsive Images:
1. Upload Images and Choose Images
Upload two similar images. Use the Size guidelines below. Correctly size the images in the appropriate software.
Size index: |
Full Image: |
Small image: |
---|---|---|
Width in Pixels |
1140 px |
767 px |
Weight in Kilobytes |
180 k |
under 90 k |
2. Locate and insert into the large container at the very top of the web page the following element: Responsive Images
3. Click on the Sprocket "Click here to define the custom element data"
The following options will appear:
4. "Select Image" under the full image category. Select the image from its location on the CMS. Be sure to select the image that has the width of 1140 pixels wide. And save that picture.
5. Next select the small image option (beneath full Image category). Choose from the local location on the CMS the complimentary image that has the width of 767 pixels. Save that Image.
You have now completed selecting your first set of images! The window should now look like this.
6. Add more images by opening up adjacent tabs and repeating steps 4 and 5 under.
You can have up to 4 rotating Images in this element
Note: Any number of image tabs may have smaller images. Example: The first image on the Home Page has different badges, so there are large images in Alternate Image 1 and Alternate Image 2, as well as the original Responsive Image tab. But there is only one smaller image, which is housed in the original Responsive Image tab.
8. When you complete uploading your images save the element.
9. Submit your changes.
Adding a link to Responsive Images:
Click on "Select"
When this window appears click Go