Campus Stock Photos

Starting in our templates version 4.0.97 you can now add stock photos to your website without needing to download or install images.  These photos are taken from the Campus photographer's uploads and have been optimized to be web friendly with almost no distortion.  

Small File Sizes

The images used in this set are all formatted to be under no bigger than 1mb each.  They have been compressed for the best quality on the web

Multiple Uses

You can use the in both layout boxes (T4 layouts) or in any editable section.  Just setup the css style and the image will automatically appear in the background.






How do i set it up?

Normally we do include images as part of a site but in this instance we are working off of a core set.  You have nothing to download just make sure your site templates are up to date.  Our first series really focuses on the buildings on campus to provide you with a few images of things that users might see around them on Campus when they visit your area.  To use an image in a section you simply need to place the coresponding class name in the page properties and it will appear as a background wall paper.   Over time we'll add to this repository so you can add elements to your site in the future.  


Adding your own images

You can of course add your own images to yours site, that has been something you could have done from day 1 on the templates.  If you do that you will be responsible for that image and css code.  The web team has gone in and reduced image file sizes to under 1mb per images usually around 500-700kb.  If you add your own images to your site make sure that the file size is as small as possible to make things fast and responsive on all devices.

Image Alignment

By default images are set to show up centered on the image but you can align them top or bottom.   The more content in the space, the more it streches out the less you'll notice the background position.  In the examples below its the same image but different positional styles were used.  It also uses wash_white class to help make the text so its more readable.



align top 




default / align center




align bottom


Color Washes

If you plan to use these as backgrounds to your text then you'll need to use a color wash to help make sure that the text is as readable as possible.  Color washes come in the standard nine colors that we use and can be used how you see fit.  The text will automatically have the wash applied to the background.  Check out the section on washes for full details.

This image uses the black color wash to show you how you can make the same image look different



remember to add space to your zone as the images will only scroll to the size of the container



Here is an example using a gradient wash.  You can see how it changes the look of the image from the black or orange washes.   


It all depends on your pages and the look you are wanting to create.  


Again you need to add content to your zone and your will see more of the image.



Finally an orange wash over the sunset. 
Hopefully you can see how easy it is to add stock photos to your site. 



Its fast, its optimized, and it is ready to go right now.