Photo Galleries Made Easy

As the saying goes, “there’s more than one way to skin a cat.” While IWU’s Web Services team adamantly opposes skinning any cats in the process of making a website, we’re excited to give you a new way to create photo galleries for your websites. We’ve been testing it out with the Office of Communications for a few months now, and today we’re releasing it for all of our OmniUpdate users across campus.

The basic idea is this:

  1. Upload your photos to Flickr (which many of you have already been doing)
  2. Create a page in OmniUpdate
  3. Voila!

Simple, right? Okay, let’s go through these steps in more detail.

First, you’ll need a Flickr account. If your department already has one, great! If not, we’ll give you access to the main Illinois Wesleyan Flickr account on a case-by-case basis. Just ask Rick Lindquist or Ann Aubry for credentials.

Once you’re logged in to Flickr, upload the photos you want in your album. Put them all in a specific ‘Set’ (Flickr’s term for a group of photos), and make note of what name you give to that Photoset.

Next, go in to OmniUpdate and create a new page. When it asks what template you want to use for that page, instead of choosing the normal two-column or three-column, click on the “Flickr Photo Gallery” option.

On the next screen, you’ll see four options:

  • Page Title (as usual)
  • Flickr Username – If you’re using the main IWU Flickr account, enter iwuphoto. Otherwise, it’s the user name for your departmental Flickr account.
  • Flickr Album Set – The name of the Set you created earlier. For example, this one would be Photo of the Week.
  • Filename (as usual)

On the next page, you should see your photo album. You can edit everything on the page above the album just like normal, and, when you’re ready, go ahead and publish. It really is that simple!

We know there are a lot of photo galleries out there on the IWU website, but we think this one is so much better, both for visitors and for content stewards, that we anticipate this being the main way forward across the site. (It’ll also fix the aspect ratio distortion problem a few of you have seen when using the built-in OU feature.)

We also encourage you to consider moving your existing photo galleries into Flickr, as you have time, to improve the user experience. If you have any questions about this process, reach out to me, Curtis, Rick, or Ann and we’ll be happy to help!

Streaming Video Fall 2012

New Contract
Tony Bankston talked with President Wilson and Jonathan Green about continuing our streaming efforts on campus. They both agreed with the Streaming Services committee that this should be a priority on campus and that we need to continue offering these services to our community. Unfortunately, a permanent funding model could not be established before our July 15 contract deadline. Trey Short agreed that these services could not just stop. Trey has stepped up and paid this year’s fee for streaming services with Stretch Internet. He also has agreed to add one additional student worker for the project from the ITS student pool. We will now have three student workers available using the two from the Athletics budget.

Stretch Internet was chosen because of the reduced cost and proven track record. We could not fully evaluate other alternatives in the time permitted.
This reduced cost comes at the cost of the Campus Central portal. We will no longer be able to stream whatever we want on that portal. Instead, we have been given the option to add events to Campus Central on a per event basis. As always, we will need to get a three week notice if anyone needs to add an event to this portal and now they will be billed for the additional fee.

Fall Schedule
Mike Wagner and Dennie Bridges will be working on the Fall schedule this week. I will be meeting with Mike Wagner later this week to finalize the schedule of sporting events and get them up on our Game Central portal.

http://client.stretchinternet.com/client/iwu.portal#

Thanks again for all of your help and feedback. We look forward to another great year of IWU streaming events!

Using Tables

An easy way to use tables on your pages is with one of our predefined “snippets.” These  can be found by clicking on the snippet icon (on the second row of your toolbar, second from the right).

Select category “tables,” then under “snippet” you can choose from right, center or left alignment.

Our predefined tables come with alternating beige- & white-shaded rows.

You can replace the sample text and delete or add columns or rows as needed. Click on the table after it’s inserted, then you can select any of the icons in the bottom row of your toolbar to edit it. Hovering over an icon will bring up text with its function, such as deleting, inserting, merging or splitting rows or columns.

The far-left icon provides a dialog box with overall table properties, such as padding. I like to use cell padding  of about 7 px so there’s a buffer between the table contents and other elements surrounding it.

You can also see OU documentation about tables or watch their tutorial (and feel free to search around their site for other helpful resources).

 

Send to User

OmniUpdate allows you to send a page to another user for review before publishing.

If you have been set up with an approver, instead of a “publish now” button, you will have the option to “send for approval.” You can select your approver from a drop-down menu of OmniUpdate users.

user drop-down

Select “send external email” and they’ll receive an email with a link to your page, where they can either revert your changes, approve the page, edit it, or send it back to you for more editing. They will have the option of sending you an email notification of their action from within the system.

Even if you don’t have an approver, you can send a page to another user in a similar way. The system will include a link in the email where they can preview an unpublished page within OmniUpdate.

Be aware, however, that sending a page will check it out to the user until they take action. Only administrators can cancel this checkout (a note to admins: this can be done under the Admin/Checked Out Content tab, not at the Content/Pages file listing.)

Checked Out Content

Regardless of how you manage your workflow, it’s a good practice to check your pages back in when you’re finished editing. Publishing a page will automatically check it back in, but saving it will not.

You can click on the “Dashboard” tab, then “Current Projects” to see the  list of files checked out to you. They can be checked back in by clicking on the status icon.

 

OU Image Gallery Step-by-Step Instructions

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.

  1. Click on Assets to the right of Pages in the Content tab.
  2. Click on New in top right corner.
  3. Choose Image Gallery.
  4. 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.
  5. After choosing a good name click on Save.
  6. Fill out the remaining information shown in the screenshot below.Image Gallery Creation
  7. 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.
  8. 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.
  9. Now we are ready to start inserting images into our gallery. Click on New under Images at the bottom of the screen.
  10. 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.
  11. 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.
  12. 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.
  13. 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.Image Description
  14. You can now either continue adding more images by clicking New or click Save to finish your image gallery.
  15. 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.

  1. Place your cursor where you want your image gallery to appear on your page.
  2. Click on the Insert Asset icon shown highlighted in red below.insert asset
  3. Choose your image gallery asset in the list of assets. Then click on Select Asset.
  4. 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.
  5. You will now see your gallery as it will appear on your page. Click on Publish Now. Then click on Publish again.
  6. You are done! Click on View in new window to view and test your new gallery.

 

Streaming Video

Over the course of the 2011-2012 academic year, we have been testing a streaming video service, Stretch Internet, for significant campus events and select sporting events. Overall, we’ve received a lot of positive feedback; long-distance parents love to be able to watch their students play football, soccer, baseball, etc., even when they can’t make it to the game in person. We even heard from one mother who watched the beginning of a baseball game in her car when she was running late! (Don’t worry: her husband was driving.)

We have learned a lot in this pilot year. First and foremost, it can be very difficult to do a lot of these events with a one-camera setup. When we did a track and field meet in January, we had a lot of viewers (well above our average), but even though a handful of events were happening at any given time, all we could really show was the track. Every sport presents its own challenges in terms of finding a good spot to set up.

Finding a reliable internet connection is also sometimes a hit-or-miss venture, since there isn’t always a network port right where we need one. Just yesterday, for instance, we had to scramble when, less than ten minutes before the start of President Eckley’s memorial service, the Chapel’s WiFi started to get bogged down. I ended up bringing over a 4G LTE/WiFi hotspot. (We’re very lucky Bloomington/Normal has such high-speed cell service!)

We’ve got a few more events coming up in the next few weeks. You can watch the athletic events at our GameCentral portal, and Commencement will be streamed through our CampusCentral portal.

This summer, we will be undergoing a review with our campus stakeholders, including Athletics, Alumni Relations, Student Senate, and Communications, to decide if we should continue offering the service in the future and who will provide the ongoing funding and staff. Let us know what you think about it: do you watch it regularly? Do you like the look and feel? Any and all feedback will be appreciated, as we really are evaluating every aspect of the program.

Scheduled Publish and Reminder Options

Among the efficiency-enhancing features in OmniUpdate are scheduling options. You can schedule a page to be published at a future date and time, within 15-minute intervals. 

After editing a page, instead of “publish now,” you can select “schedule.”

publish screen

You will have the option of having the system send you an email notification when the page has been published. This email will include a link to the published page.

You can also schedule a reminder to update a page by clicking on the alarm clock icon next to the file name on the “Pages” screen.

alarm clock

You can use this feature to prompt yourself to update content if you reference timely information that will expire days, weeks or months from now. Now I can remind myself once a year to update President Wilson’s biography indicating the number of years he has served at Illinois Wesleyan.

setup

Also, a “Stale Reminder” lets you send a message to review content if a page hasn’t been edited for a designated period of time. (This “clock” will be reset if an asset within the page is updated and published.)

Both types of reminders can be sent to yourself or all the users in a selected group.


OU Spell Check/Dictionary

OmniUpdate comes with a very nice spell check/dictionary built into the editor. You can help make it even better! We have given every user the ability to add words to our IWU collective dictionary. This will come in handy when we add proper names like Eckley, Sheean, Munsell, and Pantagraph to our dictionary. Once added, these names will no longer be highlighted as a possible misspelled word.

spell checkHere is how you use the spell check in OU. When you are editing one of your pages, click on the icon pictured here with the ABC and check mark underneath. Note: You do have to click on the spell check to initiate it. It is not turned on automatically.

spell-check-exampleThis will initiate a scan of your entire page for misspelled words. It will underline words it thinks are misspelled with a red squiggly line. In this example “Pantagraph” is highlighted in red. This is a good example of a word we would want to add to our collective dictionary so it is no longer flagged as a misspelled word.

spell-check-dictionaryJust click on “Pantagraph” and a drop down menu will offer any suggestions to replace this word. Since this is a proper name and properly spelled we would want to add it to our dictionary. Just click “Add to dictionary” to have this word added permanently to our dictionary. Once added, any future spell check made by yourself or anyone else will no longer have “Pantagraph” suggested as a misspelled word. Just make sure the word you are adding is spelled correctly!  🙂

Intranet-only webpages – you can, too!

We just made it easier than ever to designate a portion of your website as “intra-only”. All you have to do is make a directory called “intra” and you’ll be good to go! If someone tries to access that directory from off-campus, they’ll see a friendly error message like this, with a link to log in through the campus proxy server.

Forbidden 403 Error

And, to think, all you have to do to take advantage of all this is just to name the directory “intra”.

Font Choices

Heading Fonts

Heading Fonts

We are making a concerted effort to rein in the varied font choices made available in past versions of our CMS. Because of this, you will notice that h1 – h6 are the current choices available in the “format” drop down menu. Due to a limitation of the TinyMCE editor the heading fonts display as pictured here with a black bold font with decreasing size as you go down from h1 to h6. In actuality “Heading 1” is a large green font, “Heading 2” is gold and so on. You can try these recommended fonts via trial and error or you can view the Font Guidelines page to get a good idea of what is available visually.

We want to eventually get rid of all of the legacy font choices that many sites are still using today and use the newly recommended heading fonts. We also hope to restructure our current heading selections with the next website redesign. We will send detailed instructions to website owners when we are ready to make these changes globally. Until then, if you are in OU working on your pages, please consider changing your headings to one of these new heading fonts.