Gallery

 

Overview

Many organizations have multitudes of photo sets from different happenings around campus. The Gallery module allows groups of photos to be made publicly available on your site via an attractive interface. You can create galleries from within the digital assets library and push them out to your site... or, you can upload images right from your computer to a gallery our in your area of the site.

There are two types of galleries in the system: photo and video galleries. Click the type of gallery you wish to make (photo or video) and you can select the media on your computer to push up.

 

Thoughts on hosted vs. local videos

Many people have YouTube or Vimeo accounts and already have all their videos online. So, why would they want to push them all over to Campusuite? There's no reason really. It's our belief assets should be stored in a centralized location whenever possible. With the technology available today, it should be your goal to never have to manage multiple sets of content.

You can configure your video size, as well as other options provided by your video provider and then use the snippets that are provided and paste them in to the code view of the page editor. Simple as that. Your video is embedded in your page. Campusuite includes a growing set of components that allow you to do special things like pop the video up in a lightbox, or shadowbox. These components are updated and expanded as features from other providers become available.

So do not feel you have to upload your videos to your web site in order to use them. Use them from where they are.

 

SmugMug and Third-party image tools

Campus Suite plays nicely with many image management and photo sharing tools. If you already use SmugMug, or another tool for managing your assets, then by all means, continue to use it and house your images in one, centralized location that your people are already familiar with. SmuMug provides you embed snippets that play nicely with Campus Suite. You can embed and link to individual images, galleries and even choose what size thumbnail to use. These snippets can be pasted into Campus Suite pages using our script embed snippet. If your service provides you snippets, then you can paste them in to Campus Suite pages and drive your galleries with the same tool.

 

Commonly asked Questions

Q: Do you think the video quality would be good enough on our web site if we shot it ourselves using a good HD camcorder (versus hiring someone to shoot it)?

A: Yes. Due to the fact that videos will be smaller and more compressed for the web anyway, a good camera (HD or otherwise) would provide adequate quality. Of course, good quality video is a very subjective matter and while it would be good enough for some, it may not be for others.

Q: Is there a maximum time/length for videos?

A: No, videos can be however long you want. Just remember that the longer they are, the larger they are. Sometimes, this poses an issue for clients when they try to upload them to the server. Depending on the speed and quality of the connection between you and your web site, results may vary. (See FTP uploading below)

Q: What if I have really large videos and I can't upload them through the browser?

A: We can provide you with FTP access directly to your media drop directory. This would allow you to upload your videos directly to the server. Once there, you can log back in to your site, head to your media gallery area, click "Add Video" and select "On the server" when asked. You will see your video waiting in the drop directory. The server can process it from there.

Q: Do I have to edit and prepare my video, or will Innersync assist?

A: Video editing is not included in any of our services as our focus is entirely on supporting the customers in our CMS. We are capable of video editing, but it's billed at an hourly rate and must be scheduled in advance.

Q. Can I add a video to an existing page much like I do an image?

A: Yes. While we do provide you the basic ability to log in and upload various common video formats to your site, most clients have elected to upload videos to their youtube.com or vimeo.com account and then grab the embed snippits to drop on their individual pages on their website. This makes your videos more available to the world rather than only in your website. People *can* find your website from the videos you post on youtube and other video services.

Q: How, specifically do I embed a video in my web page? I would also like to have control over its size and whether or not it should auto-play.

A: When you are editing a page, click the components link at top-right. Choose "Media" and then select the "Get Video" component. Within the wizard, you will be able to select from all the videos that have already been uploaded to your website. Just follow the instructions to embed the video on your web page by choosing the options you want. You will be able to specify the size and whether or not it auto-plays.

Q: How to upload videos to my web site to begin with?

A: You need to connect the "Gallery Module," sometimes called the "Media Module." Simply "Edit Navigation" where you wish to add a link in your left navigation. Select "CS Module" and the "Gallery" module should show. If it does not, then you need to contact your system administrator and ask them to turn it on. Once connected, if you are logged in, you can navigate to the gallery module page and "Create a video gallery" and upload your .avi, .mpg, .mp4, .mov, .wmv or .flv file. Upon completion, the server will convert it to the more popularly supported flash video (.flv) format. The video will also be resized to to 320px wide and a thumbnail will be generated from a randomly selected frame in the video. This video may be made available to the public, or left staged... so that you can call it out to the particular web page you wish to embed it on. Navigate to the video you wish to add to your page and click the link next to the video labeled "View Embed Script." The embed script will be revealed and you can copy it, then paste it into any of your web pages to embed it on. Click here to see how you can upload larger videos via FTP.

 

Adding a Photo Gallery

When a new gallery is created, it will be set to the Staging status. Once you are finished compiling the gallery, you will be able to change this status and make the gallery live on your site.

  1. Navigate to a gallery module.
  2. On the module page, click the Add Photo Gallery button.
  3. A dialog will display, asking you to type in a name for the gallery. Do this and click the Continue button.
  4. You will be redirected to a page where you can upload files from your computer into the gallery. Click the Browse Files button to open up a dialog where you can select files from your computer to upload. You can use this Browse Files dialog to select as many files from your computer that you want. As you add files to be uploaded, you will see them populate into a list, where you can also choose to remove items that you may no longer want to be uploaded.
  5. Click here for best-practices on the images you upload to your website.
  6. When you have made your choices, click the Start Upload button to begin the process of uploading your files to the server. The progress bars on the page will alert you as to how much of the process has been completed. It is important that you DO NOT navigate away from the page during this process. Doing so will result in an incomplete upload.
  7. After the files are all uploaded, the server will then need to process them.
  8. When the processing is complete, this page will be redirected to the modify photo gallery page for this newly created gallery. Feel free to go ahead and make changes if you like.

 

Adding a Video Gallery

 

When a new gallery is created, it will be set to the Staging status. Once you are finished compiling the gallery, you will be able to change this status and make the gallery live on your site.

Also, unlike photo galleries, video galleries can only handle the uploading of one video at a time.

See the Campus Suite 2.0 and 2.5 screen shots below.

  1. Navigate to a gallery module.
  2. On the module page, click the Add Video Gallery button. You will be redirected to the Add New Video Gallery page.
  3. Fill out the fields as needed.
  4. After filling out the above details, you can then select your video file. To upload a file from your computer, choose to select the video "on my computer". If the video is already stored on the server, select the "on the server" option.
    • On My Computer: When this has been selected, there will be a Choose File button that you will need to click in order to browse your machine for the file.
    • On the Server: When this has been selected, there will be a Browse button that you will need to click in order to open a window that will allow you to navigate the server's filesystem for the file you need.
  5. Once you have made you video file selection, click the Save/Upload button.
  6. If you chose a file from your computer, you will need to wait until it has been uploaded.
  7. The page will be redirected to the gallery module page. The new video gallery will be listed.

Update - This feature has been removed. We recommend using a video hosting instead. Then using the Embed Code widget. To embed the video on the page.

Campus Suite 2.0 Gallery Module

 

Campus Suite 2.5 Gallery Module

Adding to a Photo Gallery

  1. Navigate to a gallery module.
  2. On the gallery module page, a list of galleries should be shown. Click the title of the desired gallery to open its properties page. The Modify Photo Gallery page will be shown.
  3. Click the Add Images button.
  4. You will be redirected to a page where you can upload files from your computer into the gallery. Click the Browse Files button to open up a dialog where you can select files from your computer to upload. You can use this Browse Files dialog to select as many files from your computer that you want. As you add files to be uploaded, you will see them populate into a list, where you can also choose to remove items that you may no longer want to be uploaded.
  5. Click here for best-practices on the images you upload to your website.
  6. When you have made your choices, click the Start Upload button to begin the process of uploading your files to the server. The progress bars on the page will alert you as to how much of the process has been completed. It is important that you DO NOT navigate away from the page during this process. Doing so will result in an incomplete upload.
  7. After the files are all uploaded, the server will then need to process them.
  8. When the processing is complete, this page will be redirected to the modify photo gallery page for this newly created gallery. Feel free to go ahead and make changes if you like.

 

Adding to a Video Gallery

  1. Navigate to a gallery module.
  2. On the gallery module page, a list of galleries should be shown. Click the title of the desired gallery to open its properties page. The Modify Video Gallery page will be shown.
  3. Click the Add Videos button. The Adding More Videos page will be shown.
  4. Select the aspect ratio for the video you are uploading, whether it is a normal video (4:3, probably what most users would need) or a widescreen video (16:9, most likely what HD content is shot as).
  5. After filling out the above details, you can then select your video file. To upload a file from your computer, choose to select the video "on my computer". If the video is already stored on the server, select the "on the server" option.
    • On My Computer: When this has been selected, there will be a Choose File button that you will need to click in order to browse your machine for the file.
    • On the Server: When this has been selected, there will be a Browse button that you will need to click in order to open a window that will allow you to navigate the server's filesystem for the file you need.
  6. Once you have made you video file selection, click the Save/Upload button.
  7. If you chose a file from your computer, you will need to wait until it has been uploaded.
  8. The page will be redirected to the gallery module page after the upload.

Update - This feature has been removed. We recommend using a video hosting instead. Then using the Embed Code widget. To embed the video on the page.

 

Uploading a Video via FTP

If you have a very large video, you may have a hard time uploading it to your site through a regular web browser. When you are in a web browser, you are using the http protocol. This protocol is not made for very large requests. To upload large files, you can use the ftp protocol. As such, you need an FTP client. There are many free ftp clients available. We like FileZilla, and it can be downloaded here: http://filezilla-project.org/download.php Once you have an FTP client installed, you will need credentials to log in to your server web directory.

Here are the steps:

  1. Contact Innersync support asking for FTP access to your web site.
  2. Support will release FTP credentials after the primary contact for your organization signs and returns the FTP waiver.
  3. With your FTP client and crednetials in hand, you will set up your connection to the web site.
  4. Once connected, you are dropped directly in to your video "drop" directory. You can upload all videos (in the accepted formats; .avi, .mpg, .mp4, .mov, .wmv or .flv) all at once.
  5. Log in to your website and either create a new video gallery, or edit an existing video gallery.
  6. Click Add Video
  7. Select On the Server and you will be able to browse the files in the drop directory. You can select one video at a time and allow it to process.
  8. Once processed, your videos are available to publish live on your site.

 

Editing a Gallery

  1. Navigate to a gallery module.
  2. On the gallery module page, a list of galleries will be shown. Click the title of the desired gallery to open its properties page. The Modify Gallery page will show.
  3. Here you can edit the information about the gallery, such as the title and the tags, as well as edit information about the individual items in the gallery.
  4. When finished, click the Save Changes button to save your changes and to return to the gallery module, or click the Cancel button to ignore any changes.

 

Editing Items in a Gallery

  1. Navigate to a gallery module.
  2. On the gallery module page, a list of galleries will be shown. Click the title of the desired gallery to open its properties page. The Modify Gallery page will show.
  3. All of the items associated with the gallery will be listed. For each item, there is a textbox above the thumbnail and to the right of the thumbnail. This textbox on top is used to give the individual item a title/name, and the one to the right is used to enter a short description.
  4. You can change these fields for as many items in the gallery as you wish.
  5. When finished, click the Save Changes button to save the information you entered/changed about the items.

 

Organizing a Gallery

The ordering of the items in a gallery may be very important. The gallery module allows you to customize the ordering of the items in the gallery.

  1. Navigate to a gallery module.
  2. When on the gallery module page, a list of galleries will be shown. Click the title of the desired gallery to open its properties page. The Modify Gallery page will show.
  3. Click on the Organize button. The Organize Media Gallery dialog will show.
  4. This dialog allows you to drag and drop the items in the gallery into a particular order. Move the thumbnails around as you wish.
  5. Click the Save Order button to save the changes to the ordering, or click the Cancel button to ignore any changes you made.
  6. The page will refresh, and the new ordering should be reflected on the page.

 

Previewing a Gallery

  1. Navigate to a gallery module.
  2. On the gallery module page, a list of galleries will be shown. Click the Preview button associated with the gallery you wish to preview.
  3. The page will refresh, and will show you a preview of the gallery (exactly what a site visitor would see).
  4. When finished previewing the gallery, click your browser's Back button to return to the gallery module page.

 

Removing from a Gallery

  1. Navigate to a gallery module.
  2. On the gallery module page, a list of galleries will be shown. Click the title of the desired gallery to open its properties page. The Modify Gallery page will show.
  3. The items that are currently in the gallery will be listed. Each of these will have a trash can icon associated with it. Click this icon for an item you wish to remove from the gallery.
  4. For each removal, you will be prompted with a confirmation dialog. Click the OK button to continue, or the Cancel button to stop.
  5. The item will be removed from the gallery, and the page will refresh. The item you removed should no longer be listed for the gallery.

 

Deleting a Gallery

  1. Navigate to a gallery module.
  2. On the gallery module page, a list of galleries will be shown. Click the Delete button associated with the gallery you wish to delete.
  3. You will be shown a confirmation dialog. Click the OK button to continue with the deletion, or click the Cancel button to stop.
  4. Assuming the OK button was clicked, the gallery will be deleted from the system. The page will refresh, and the listing of all the galleries should reflect the deletion.

 

Video Components

Campusuite bundles a few components that allow you to expand functionality, or call your media from another server where your videos are hosted. When you are editing a page, you may have access to Components - Note a button at the top-right. Click that and you will be shown the categories of components that you can use on a page. Click the Gallery category and you will see components that are related to photos and videos. We're always expanding this library as technology allows. Click the component you wish to use and you will be provided with a wizard to use that component on your page.

Embed Video
Use the embed video component to embed a video in to any web page. Select from all videos that have already been uploaded to your web site. It's simple. Watch this 3-minute video that will show you how to upload a video in to a gallery and then embed it in to a web page.

YouTube PopUp Lightbox
The YouTube Popup window is not a component yet. When you are editing a page... first insert a hyperlink in yor page. It can be a text hyperlink or a link around an image (for example a video thumbnail) and then add the full URL to the link of your video on Youtube for the hyperlink. Now, while you are editing the link, click the Advanced tab and add the CSS class "ytPopup" in the Stylesheet Classes field. Hit OK and save your page. Now, when you click the link (text or image) it will launch the YouTube popup window and darken the background. Your video is called in to the lightbox.