OU Campus: Creating an Image Gallery

Creating an image gallery for your web site is a four step process.   Step1: Selecting a Gallery Type, Step 2: Formatting Your Pictures, Step 3: Creating an Image Gallery Asset, and Step 4: Adding Your Gallery to Your Page(s).

Step 1:  Select a Gallery Type

The first step is to select an appropriate image a gallery for your page from the 15 templates we currently offer.  To view the list, visit our website at www.etsu.edu/cms and select the image gallery from the left navigation.  

When selecting an appropriate image gallery, ask yourself a few questions:

  1. How large do you want the gallery?  
  2. Do you want the gallery on a one column page or a two column page?
  3. How do you want the gallery to display?

Each image gallery summary contains a Name, Preview Link, Description, and Specs.  In the “Specs” section of each gallery you will see size limitations/recommendations for each template.  You should note these size restrictions for use in the next step preparing your pictures.  If you choose the Rotating Gallery (Medium) for example you will notice that the images have to be sized to 525px X 325px.

Once you have selected the type of gallery write down the name for use in Step 4.   Once you’ve done this the next step is to select and resize images to be used in the gallery.

Step 2:  Select and Resize (if necessary) Images for Your Gallery.

Galleries with a required image size will require some basic image formatting before uploading them to OU Campus.  Regardless of gallery type, all images should be formatted for computer screen viewing.

So let’s discuss the resizing of an image:

First select an image that you need to resize, if you do not have access to Photoshop, you can easily download irfranview.  For instructions on how to download this open source program visit our FAQ page at www.etsu.edu/cms - it is the last question under Managing your Site, the hyperlink for the download is available there with a handout on how to use Irfanview.

Open IrfanView:

Click on the open folder  and select an image that you want to resize. Click on the toolbar drop down menu named Image and select resize/resample. You will see this pop up box:
The first step will be to change the DPI to 72.

If you are working with a vertical image, set the WIDTH first to the designated size and the height will automatically  update to keep the aspect ratio.
Once the width is selected we will crop the image to the correct height.

To crop the image put your curser at the left side of the image and press the left mouse button down you will see the + sign replace the arrow as you continue holding down the left mouse button drag the mouse to the right opposite corner. You will notice at the top of the page the width and height (width is always first) will change as you drag your mouse.

Once you have selected your area – you can make changes to get the exact size by moving the crop lines up, down, in, or out. Again hold down the left button on your mouse when you get the short line with an arrow at the top and bottom or left and right you can move the line until you get the correct dimensions.

To crop this area go to Edit and select crop selection.

To save – go to file and Save As – rename the image and save in a folder named web images.

If you are working with a horizontal image set the HEIGHT first to the designated size the width will automatically change to keep the aspect ratio. Once the height is selected we will crop the image to the correct width. This is done exactly like the instructions above.


Images that are shot in the horizontal perspective not vertical are much easier to crop to the correct size if the width is larger than the height.

Step 3:  Create an Image Gallery Asset and Upload Your Pictures to it.

Now to add your cropped images to a gallery – log into OU Campus through any direct edit link in your site.  

Click on the Assets link located near the top of the OU Campus layout below Content.
Click on the
 link in the right corner. This will give you a wizard to help built a new asset. You will see some different choices of assets to select from – today we are going to build an Image Gallery so select that asset.

 You will need to name your asset – this is very important for the organizational structure – so always name your assets with your college or department initials first than an underscore then your department name. i.e.: cas_art.  Be sure and right down the name you chose as you will need it to find your gallery later.

Building the image gallery:

You have the asset name filled in but if you want to change it you can.

Description: if you want to add in the description the type of gallery and the page that you are going to add the gallery to – you can add this information to help later when updating images.

Tags: These are words that will add to categorize your new asset – image gallery, your department name, college name.

Thumbnail Size: you will make changes to the thumbnail size only if the image gallery that you selected tells you to in its specs. Make sure that you click Set Size or it will default back to 100 for the width and height.

Thumbnail aspect ratio:  defaults to Original If you select crop it will crop based on the center of the image.

Content editable by: this is important that you change this to the correct contributors – you do not want everyone to edit your image gallery! So select your group name.

Now for the fun – click on the New button each time you want to add an image. New button will open up a box so that you can browse for your images that you have just resized. Select one image and then you will get the OU Campus editor pop-up but your images are already edited so all you have to do is click on upload as in the right corner, you can change the name if you would like but you only have to click on ok. This will take a second but you will then get this box in the image gallery template builder.

Depending on the image gallery you selected fill out the Title, Description, and Caption according to the information specs on the image galleries page on our CMS website.

Click on the New button again to add more, continue until you have all the images uploaded in the gallery. You can then click Save and your asset is ready to be placed on the page.

If you want to replace old pictures just click on the little x in the right corner to delete.  If you want to rearrange the images – move so images are ordered differently, just hold down your left mouse button over the side bars and drag and drop in the desired arrangement.

Congratulations you have built your first image gallery!

You’re almost done!

Step 4: Add Your Image Gallery Type and Asset to Your Page

This is the easy part! Go to the page that you want to place the image gallery in OU Campus.

Click on the green Check out button -> click on the props button (properties).  

Scroll down until you find the Gallery Type option


Click on the drop down field. Within the dropdown you will see all 15 gallery types, select the gallery type you chose in Step 1. Continue to scroll to the bottom of the page and save.

Finally you will add the asset you created in Step 3.
Edit your page by clicking on the green edit button. In the WYSIWYG mouse click in your page in the area you would like your gallery to live.  In the second row of the WYSIWYG tools the last icon
 is the asset icon, click on it. Scroll down until you find the name of your image gallery, which you created in Step 3.   Once you have selected your asset, the outlined green button “select asset” will pop up – click on that, then save the page. You will then see a preview of your page with your image gallery. Publish if you are happy with the images and layout.

That is all folks!