UNIVERSITY OF WISCONSIN River Falls

Responsive Images

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

element.jpg

3. Click on the Sprocket "Click here to define the custom element data" 

other images.PNG

The following options will appear:

picture element.PNG

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.  

image choose 1140.fw.png

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. 

image-choose767.fw.png

You have now completed selecting your first set of images! The window should now look like this.

After uploading.PNG

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

other images.PNG

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.

 

Contact Us

Division of Technology Services
160 Davee Library
715-425-3687
dots@uwrf.edu