Since most of you have probably not had time to get advanced training in OmniUpdate from Rick Lindquist, I thought it might be helpful to post a step-by-step tutorial on using the new Image Gallery feature in OU. It is very easy to use, but can be a bit time consuming to put a large image gallery together. Before I begin, it might be helpful to view a finished image gallery here so you can see all the aspects of what you will be creating.
Create the Image Gallery Asset
This part is very similar to creating a new page in OU, but instead of doing this on the pages section, we switch to assets. At this point you don’t need to worry about the page that the gallery will ultimately appear on.
- Click on Assets to the right of Pages in the Content tab.
- Click on New in top right corner.
- Choose Image Gallery.
- You will be asked to name your gallery. Give it a descriptive name to make make it unique to the content within it. This name will appear in a large list of assets available on campus, so the name “Photo Gallery” would not give anyone a clue as to what kind of photos they might see within the gallery.
- After choosing a good name click on Save.
- Fill out the remaining information shown in the screenshot below.
- If your original images are all different sizes and you want all your thumbnail images to appear the same size, you will want to use the “Crop” selection. Choosing “Original” with different size images will give you all different size thumbnails, with no uniformity.
- It is important to keep the aspect ratio of your thumbnails in proportion to their original size so you don’t create distorted looking thumbnail images. For example, if your original photo was 500w x 300h, keeping the aspect ratio intact would mean downsizing the thumbnail to 250w x 150h or 125w x 75h. This may not be avoidable if all your photos are all different sizes.
- Now we are ready to start inserting images into our gallery. Click on New under Images at the bottom of the screen.
- This will bring up a file selector for you to choose an image from your computer to upload to the web server. Choose your image or photo and click Open.
- Any size images can be used with no resizing needed. If you want to resize or crop your photo, now is the time to do it, otherwise click on Upload As.
- Give your image a name and click OK. Note: if you upload a PNG file it will be converted to a JPG file and any transparency will be lost.
- The current Image Gallery tool we are using in OU only makes use of the Description field. Enter a description for your image (it can also contain HTML code, including links) as shown below.
- You can now either continue adding more images by clicking New or click Save to finish your image gallery.
- Once you click Save, make sure to publish your image gallery asset. It is now ready to be used on your website.
Inserting Your Image Gallery on a Page
You can use your newly created image gallery on any 2-column page on your website. You can either create a new 2-column page or insert it into any existing one.
- Place your cursor where you want your image gallery to appear on your page.
- Click on the Insert Asset icon shown highlighted in red below.
- Choose your image gallery asset in the list of assets. Then click on Select Asset.
- This will insert your gallery on your page. It will not show your photos in your gallery until you save your page. Click on the Save disk icon in the upper left corner of the screen.
- You will now see your gallery as it will appear on your page. Click on Publish Now. Then click on Publish again.
- You are done! Click on View in new window to view and test your new gallery.
Thanks for the instructions! I just had a few questions:
1. As shown in Creating the Image Asset, #13, how exactly do the description and caption display? Is the description the mouse-over for the thumbnail? If left blank, does the caption simply copy the description?
2. Our department page has a photo gallery (managed with irritating tables at the moment) that spans several years. Is it possible to make multiple photo galleries (separated by year/event) and keep them on the same photo gallery page?
Thank you!
Great questions!
1. As of right now, our photo galleries aren’t using the caption field at all. The description is both the mouse-over for the thumbnail and the text shown at the bottom of the full-size image.
2. Absolutely! Image galleries are basically just a special form of asset; you can place more than one on a page, just like you would with other assets.
Melissa,
Thought I would answer here so others could benefit from your questions.
1) The Description field is used both underneath the photo and as the hover text in this gallery implementation. We do have another image gallery that does make use of the Caption field, but we have not rolled this out yet.
2) You sure can! Just create a separate asset for each gallery. For example you could call one “Homerathon 2012″ and another one “Trojan Women 2011″ and so on. Then just insert each of these assets on the same page one on top of the other. You may want to separate each asset with a break for spacing to your liking.
Thanks for asking. I always wonder if anyone reads these posts. Now it is confirmed!
Curtis
Aha! Thank you both for the explanations!
I will see what kind of trouble I can get myself into. I appreciate the responses!