Feed on
Posts
Comments

This tutorial will walk you through the steps necessary to make changes to the header slideshow on a page. If you do not need to upload new images, skip to Step 2.

 

Step 1 – Uploading the images you want to use: 

  • Navigate to the Base Folder of the site and go to image_header > images

images navigation

  • Upload the images:
    • For single images:
      • On the blue bar above, select New > File or Image
      • file or image
      • Drag and drop the image into the gray box
      • Hit Submit
    • For multiple images
      • Create a .zip file of your images
      • On the blue bar above, select Tools > Zip Archive
      • zip archive
      • Drag and drop the .zip file you just created into the gray box
      • Hit Submit

Step 2 – Setting the images in slideshow to new images:

  • Under the image_header folder you just visited earlier, click on header-images and select Edit tabedit header
  • Right beside each image link there is a Browse button  that will let you choose another image to be in its place. Navigate to where you have uploaded the image (under the images folder), choose the image and hit Confirmselect photo
  • You also have the option to delete existing images (using the red Minus button) or adding new ones (using the green Plus button) and re-order the images (the two Up/Down arrows) to the left of the image link
  • Continue making changes to the existing images if necessary, and hit Submit when you are done modifying

Step 3 – Re-publishing: Republish header_images and the page that you have edited to make the changes live

General

The video aggregate web application is populated through the Brightcove Video Cloud (https://videocloud.brightcove.com). Static content areas can be modified through Cascade Server (https://cascade.wesleyan.edu). Rules mapping collections to tags can also be modified through Cascade. After tagging in Brightcove, the Brightcove API can take up to 15 minutes to update completely.

All videos must be tagged with the word “public” to show up on the site. Videos must also be contained within the NML account or shared with this account (http://support.brightcove.com/en/video-cloud/docs/media-sharing).

Home Page (http://video.wesleyan.edu)

Featured Videos

This section displays a photo gallery of Video Stills from any videos tagged with the word “featured”. This is displayed in the order of most recently published. There must be at least one featured video.

Recent Videos

This section on the home page is automatically generated from the Brightcove system. It displays the last twelve published videos that contain the tag “public”. If a video needs to be hidden from this section, apply the tag “hidefromhome”.

Search

Any video tagged with the word “public” will show up in the search results even if it does not belong to a Collection. Searches will find matches in the display name, short description, long description, and tags.

Collection Pages

Collections can be managed through Cascade Server under the Video Aggregate site on the page collections. When editing the page, each collection will have a Tag and Collection Name. The Tag will match what is tagged in Brightcove, and the Collection name will become the menu item, header, and links on the Video Aggregate site. Videos can belong to multiple collections.

Current tags for collections (subject to change)

academics

admission

alumni

arts

athletics

campus

events

faculty

students

Detail Pages

Detail pages will display the embedded video, title, short description, long description, and the first three related videos. If the video belongs to any collection, it will be shown on this page as well.

Long Description

Brightcove does not allow for HTML formatting in the long description field. The Video Aggregate site will interpret new lines as breaks(<br />) and carriage returns as paragraphs(<p></p>). URL’s will also be automatically converted to hyperlinks that open in a new window.

Any Brightcove video can be added to a blog post or page.  You can add multiple videos to a page or post, currently you can not add a playlist.

Install/Activate Plugin

  • contact New Media Lab to activate and set up the Brightcove plugin for your blog
    • put in a service request ticket at http://service.wesleyan.edu
  • New Media Lab will contact you to let  you know the plugin has been activated

Embed Video on Page/Post

  • edit the page/post where the video will be embedded
  • you can put text above the video and you can format it using the tool bar
  • place the cursor where you want the video
  • click the Add Media button
    add media
  • select Brightcove from the Insert Media on the left
  • fill in the Video number given to you by the person who created/uploaded your video
    • it is a 13 code number similar to this: 3958280905001
      brightcove-video-number
  • there is no submit button —  press Enter to add the video
  • on your post/page you will see the brightcove embed code
    • similar to this:
      brightcove-embed-code-on page
  • you can not see your video in preview mode
  • you can:
    • use the Preview button
    • Save Draft then Preview
    • Publish and look at page/post in production
    • if you choose Draft, be sure to Publish when finished

Edit Faculty Showcase

If you have a faculty showcase on your site and would like to remove, add, or edit the page, here are some instructions on how to do so:

  • First, if you have any new images to upload, navigate to the folder in your site that holds these faculty images.
    • Each site is different—for Theater, for example, the images folder “slideshow-image” is nested under the “faculty” folder, while for Biology, the folder is simply “faculty-images”.
    • When you upload your photo, be sure you also have a thumbnail version that is 55px by 75px. There should be an Asset under the “New” section of the toolbar that will make that thumbnail for you.
  • After you’ve uploaded an image and have a thumbnail for that image, navigate to your faculty showcase page. If you have a hard time finding that page on your left-hand navigation tree, navigate to that page in Cascade through the view window that allows you to preview your site.
  • When you’re on the faculty showcase page, hit “Edit” from the tabbed toolbar above the site preview window. You should see the following:
  • Screen Shot 2014-11-12 at 10.38.56 AM
  • On this Edit page, you will see the following options:
    • A green plus (+) sign that allows you to add a new faculty slide.
    • A red minus (-) sign that will delete an existing slide.
    • Blue up and down arrows that allow you to change the order of the slides.
    • “Faculty Name” field—add the name of your faculty member.
    • “Faculty Title”—add the title of your faculty member.
    • “Research Area”—serves as a place for you to add a description of the faculty member, not necessarily constrained to research.
    • “Personal Website URL”—you can add a link to the faculty member’s own website
    • “Photo”—Find the larger image that you originally uploaded for this faculty member.
  • After you’ve made your changes, be sure to hit “Submit” at the bottom!

Adding Library Alerts

How to add an “Alert” to the library home page

What to use Alerts for

The “Alert” section of the library home page is used to alert our users of information we need to get out to them immediately. In most cases, the information in an alert would only need to stay on the home page for 48 hours or less.

Examples of things that might go into the Alert section:

  • library emergency closing or unanticipated change in hours
  • our open/closed status during severe weather or campus-wide closings
  • catalog or OneSearch outage
  • a major database (such as JSTOR) is down
  • a brand-new, much asked for service has been added

This section of the home page appears only when there is content in it.  When there is no content, the Alert box disappears.

Who can post: To edit the Alert box, you must have a login to Cascade.  If you think you may need to add an Alert but do not have a Cascade login, let Lori know.

How to add an alert

  1. Log in to Cascade, http://cascade.wesleyan.edu.  Use your Wesleyan username and password to login.
  2. In the left hand navigation bar, single-click on the index page under the Base Folder.
    • You will see the library home page
  3. Cick the Edit tab at the top of the home page.
  4. The first box shown on the edit page is the Alert box.
    1. In the Start Date, choose the date that you want the Alert to be published on the web site (ignore the time option, it doesn’t do anything).
    2. In the End Date, choose the date that you want the Alert to be removed from the web site (ignore the time option, it doesn’t do anything).
      You must provide both a Start Date AND an End Date. Your item will not display on the public web page if you do not provide both dates.
    3. In the Heading, enter the text that you want to appear in the yellow title bar of the Alert box.
    4. In the main edit area, enter the text that you want to appear in the white part of the Alert box.  You can add html links and formatting in this text if desired.
  5. When done, scroll to the bottom of the page and click Submit.
    1. If you get any errors about the Summon URL being a broken link, just click the Submit button again (it’s a false error).
  6. Click the Publish tab to push your changes to the public web site.

The News Items are the 4 news stories that in desktop view sit to the right of the large image for the News Feature.  You have the ability to add descriptive text that is linked to a larger story. In the tablet view the News Items sit under the featured story and in the mobile view they become a swipe component.

You will also want to check the amount of  descriptive text to be sure it fits in the appropriate box for each view.

For every featured story you will need:

  • an image for each news item
  • descriptive text
  • link to larger story

Uploading the Images into Cascade

  • create the image
    • 240 x 170
  • upload the image(s) to cascade
    • use the dropdown to navigate to Home – Responsive
    • high light the images > news-items folder
    • for each image
      • go to New > Upload  File or Image
      • Browse to find the image on your computer
      • Submit to upload the image
    • be sure to rename each image using a good naming convention
      • select each image
      • go to Move/Rename
      • enter the new name in the System Name field
        • consider using the date in the name
        • for example: 20141204-longlane.jpg

Once the images are uploaded you will need to add your new item to the component.

  • use the dropdown to navigate to Home – Responsive
  • go to components > news-items
  • press Edit
  • you will see the data definition allowing for data input

    data definition news-items

    data definition news-items

  • use the paper with the magnifying glass icon browse to select the Image
  • enter the Caption
    • this is the text that sits on the right (desktop/mobile) or below (tablet) the image
    • can be no more that 75 character
  • enter the Link
    • this is where the caption text links to
    • use the paper with the magnifying glass icon browse to select an internal link
      — or –
    • type in an External Link
      • be sure to include http://
  • Reordering the News Items
    • use the up/down arrows to move the News Item up or down
      data definition reorder arrows
  • Submit your changes.

 

Preview your changes in Cascade

You should preview how the transparent box sits on the image and check that the caption and hashtag fit in the transparent box on all sizes of the responsive page.

      • you can do a preliminary check of changes within cascade
        • in Cascade go to Home > Responsive
        • click on index to see the page in View mode
        • resize the cascade window to simulate the desktop, tablet and mobile views
      • to allow others to see the image you can publish the homepage and the images to the Staging Server
        • go to Home > Responsive
        • publish the images
          • go to images > news-items
          • select each image (if you have multiples do them separately)
          • go to Publish
          • be sure to uncheck the Production destination
          • you only want to publish to the Staging destination
        • publish the index
          • go to Base Folder
          • select the index
          • go to Publish
          • be sure to uncheck the Production destination
          • you only want to publish to the Staging destination
        • after the images and index have been published to the Staging Server you can view your changes at
          http://cascadewww-staging.wesleyan.edu
        • you can check this url on a desktop by re-sizing the window to simulate other device sizes
          -or-
          you can use this url on a tablet and/or mobile device
      • if the text and/or image don’t work well at different sizes you may need to upload a new image or change the text
      • when satisfied you can Publish the index to both destinations (Production and Staging)

 

The News Feature is the large image on the homepage.  You have the ability to add descriptive text that is linked to a larger story and a #hashtag with a link.  The image changes size from desktop to tablet to mobile view so you will need to upload 2 separate images, one for desktop and tablet and one for mobile.  You will notice that the #hashtag is only viewable in the desktop and mobile version, there is not room for it on the tablet view.

Because a transparent box is overlaid on top of the image you may need to re-crop your images to be sure the overlay does not interfere with the image.  You will also want to check the amount of  descriptive text to be sure it fits in the transparent box.

For every featured story you will need:

  • 2 appropriately sized images
  • descriptive text
  • link to larger story
  • optional hashtag
  • optional hashtag link

Uploading the Images into Cascade

  • create 2 sizes of the image
    • 1007 x 560
    • 624 x 347
  • upload the images to cascade
    • use the dropdown to navigate to Home – Responsive
    • high light the images > news-featured folder
    • for each image
      • go to New > File or Image
      • Browse to find the image on your computer
      • Submit to upload the image
    • be sure to rename each image using a good naming convention
      • select each image
      • go to Move/Rename
      • enter the new name in the System Name field
        • consider using the date in the name
        • for example: 20141204-longlane.jpg

Once the images are uploaded you will need to add your new item to the component.

  • use the dropdown to navigate to Home – Responsive
  • go to components > news-featured
  • press Edit
  • you will see the data definition allowing for data input

    data definition for news-feature

    data definition for news-feature

  • use the paper with the magnifying glass icon browse to select the large image (Image for Medium Up Screens)
  • use the paper with the magnifying glass icon browse to select the small image (Image for Small Screens)
  • enter the Caption
    • this is the text that sits in the transparent box
    • can be no more that 60 character
  • enter the Link
    • this is where the caption text and the read more will link to
    • use the paper with the magnifying glass icon browse to select an Internal Link
      – or –
    • type in an External Link
      • be sure to include http://
  • if needed enter a Hashtag
    • the hashtag will appear below the READ MORE in the transparent box  on the image
    • be sure to include the hashtag symbol (#)
  • if needed enter a Hashtag URL
    • put in a fully qualified url for the hashtag
    • be sure to include the http://
  • Submit your changes

Preview your changes

You should preview how the transparent box sits on the image and check that the caption and hashtag fit in the transparent box on all sizes of the responsive page.

  • you can do a preliminary check of changes within cascade
    • in Cascade go to Home > Responsive
    • click on index to see the page in View mode
    • resize the cascade window to simulate the desktop, tablet and mobile views
  • to allow others to see the image you can publish the homepage and the images to the Staging Server
    • go to Home > Responsive
    • publish the images
      • go to images > news-featured
      • select each image (if you have multiples do them separately)
      • go to Publish
      • be sure to uncheck the Production destination
      • you only want to publish to the Staging destination
    • publish the index
      • go to Base Folder
      • select the index
      • go to Publish
      • be sure to uncheck the Production destination
      • you only want to publish to the Staging destination
    • after the images and index have been published to the Staging Server you can view your changes at
      http://cascadewww-staging.wesleyan.edu
    • you can check this url on a desktop by re-sizing the window to simulate other device sizes
      -or-
      you can use this url on a tablet and/or mobile device
  • if the text and/or image don’t work well at different sizes you may need to upload a new image or change the text
  • when satisfied you can Publish the index to both destinations (Production and Staging)

 

 

Homepage – Adding Events

The Events Section of the Homepage has 2 editable pieces.

The Event Listing Section contains information about actual events on campus.  Each listed event contains a link either back to the calendar or to an appropriate story about the event. For an event to appear on the homepage UCOMM needs to go into the University calendar and select the homepage category.  If there are no events marked for display on the homepage for a given day the events stored in the Events Component will be displayed

The Events Links Section contains links to the University Calendar, the Academic Calendar and two buttons, one for athletics and one for Center for the Arts.

Event Listing Section

Entering Non-Calendar Events

Remember, these events will only display if no events are marked for display in the University Calendar.

  • use the dropdown to navigate to Home – Responsive
  • go to components > events
  • press Edit
  • you will see the data definition allowing for data input
    data definition events
  • Start Date
    • use the orange calendar icondata-definition calendar icon to select the date for this item to appear on the homepage
  • End Date
    • use the orange calendar icondata-definition calendar icon to select the date for this item to stop appearing on the homepage
  • Title
    • the title of the event (be short but descriptive)
  • URL
    • URL to event information
    • must include http://
  • Date/Time
    • Calendar Information about the event
  • Events will show in order they are entered but they can be re-ordered
  • Tools for adding, deleting, reorderingdata definition reorder and manage item
    • data definition add item: to add another entry
    • data definition remove item: to remove an entry
    • data definition - reorder arrows: to reorder
  • Submit your changes.

Previewing  your changes

It is not easy to preview the events section.  The events will change daily and use the calendar and the non-calendar events entered into the component.  You can only look at “today’s” events, you can not preview the events for future days.

 

Event Links Section

The link to the University Calendar and  the link to the Academic Calendar are static, they can not be edited/changed.  The two buttons are editable — the image, the wording overlaid on the image and the link can be changed.

To change a button you will need:

  • appropriately sized image
  • wording for image
  • link

Uploading the Images into Cascade

  • create an appropriately sized image
    • 275 x 190
  • upload the images to cascade
    • use the dropdown to navigate to Home – Responsive
    • high light the images > events-links folder
    • for each image
      • go to New > File or Image
      • Browse to find the image on your computer
      • Submit to upload the image
    • be sure to rename each image using a good naming convention
      • select each image
      • go to Move/Rename
      • enter the new name in the System Name field
        • consider using the date in the name
        • for example: 20141204-longlane.jpg

Once the images are uploaded you will need to add your new item to the component.

  • use the dropdown to navigate to Home – Responsive
  • go to components > event-links
  • press Edit
  • you will see the data definition allowing for data input
    data definition- event-links
  • use the paper with the magnifying glass icon browse to select the Image
  • enter the Caption
    • this is the text that sits in the transparent box under the image
  • enter the Link
    • this is where the image and text will link to
    • use the paper with the magnifying glass icon browse to select an internal link
      — or –
    • type in an External Link
      • be sure to include http://
  • Events will show in order they are entered but they can be re-ordered
    • data definition - reorder arrows: to reorder
  • Submit your changes.

Preview your changes

You should preview how the transparent box with the text sits on the image on all sizes of the responsive page.

  • you can do a preliminary check of changes within cascade
    • in Cascade go to Home > Responsive
    • click on index to see the page in View mode
    • resize the cascade window to simulate the desktop, tablet and mobile views
  • to allow others to see the image you can publish the homepage and the images to the Staging Server
    • go to Home > Responsive
    • publish the images
      • go to images > event-links
      • select each image (if you have multiple images do them separately)
      • go to Publish
      • be sure to uncheck the Production destination
      • you only want to publish to the Staging destination
    • publish the index
      • go to Base Folder
      • select the index
      • go to Publish
      • be sure to uncheck the Production destination
      • you only want to publish to the Staging destination
    • after the images and index have been published to the Staging Server you can view your changes at
      http://cascadewww-staging.wesleyan.edu
    • you can check this url on a desktop by re-sizing the window to simulate other device sizes
      -or-
      you can use this url on a tablet and/or mobile device
  • if the text and/or image don’t work well at different sizes you may need to upload a new image or change the text
  • when satisfied you can Publish the index and the images to both destinations (Production and Staging)

 

Near the bottom of the homepage just above the college row image there is a place for one link to a special university initiative.  Currently it is #THISISWHY.

To change the initiative you will need:

  • the initiative title
  • link to the initiative

Changing the initiative in the component.

  • use the dropdown to navigate to Home – Responsive
  • go to components > thisiswhy
  • press Edit
  • you will see the data definition allowing for data input
    data-definition initiatives, thisiswhy
  • enter the Text
    • this is the name of the intiative
  • enter the External Link
    • be sure to include http://
  • Submit your changes.

Preview your changes

You should preview how the transparent box sits on the image and check that the caption and hashtag fit in the transparent box on all sizes of the responsive page.

  • you can do a preliminary check of changes within cascade
    • in Cascade go to Home > Responsive
    • click on index to see the page in View mode
    • resize the cascade window to simulate the desktop, tablet and mobile views
  • to allow others to see the image you can publish the homepage and the images to the Staging Server
    • go to Home > Responsive
    • publish the index
      • go to Base Folder
      • select the index
      • go to Publish
      • be sure to uncheck the Production destination
      • you only want to publish to the Staging destination
    • after the index has been published to the Staging Server you can view your changes at
      http://cascadewww-staging.wesleyan.edu
    • you can check this url on a desktop by re-sizing the window to simulate other device sizes
      -or-
      you can use this url on a tablet and/or mobile device
  • if the text and/or image don’t work well at different sizes you may need to upload a new image or change the text
  • when satisfied you can Publish the index to both destinations (Production and Staging)

 

 

 

The Explore Wes section contains 4 buttons linking to primarily admission content.  Each button is an image with text overlaid and a link.

For each button you will need:

  • an appropriately sized image
  • descriptive text to be overlaid on the image
  • a link to more content

Uploading the images into Cascade

  • size of the images
    • 285 x 190
  • upload the images to cascade
    • use the dropdown to navigate to Home – Responsive
    • high light the images > explore folder
    • for each image
      • go to New > File or Image
      • Browse to find the image on your computer
      • Submit to upload the image
    • be sure to rename each image using a good naming convention
      • select each image
      • go to Move/Rename
      • enter the new name in the System Name field
        • consider using the date in the name
        • for example: 20141204-longlane.jpg

Once the images are uploaded you will need to add your new item to the component.

  • use the dropdown to navigate to Home – Responsive
  • go to components > explore
  • press Edit
  • you will see the data definition allowing for data input
    data-definition highlights
  • use the paper with the magnifying glass icon browse to select the Image
  • enter the Caption
    • this is the text that sits in the transparent box at the bottom the image
    • you may have to adjust the text to fit the space
  • enter the Link
    • this is where the image and text will link to
    • use the paper with the magnifying glass icon browse to select an Internal Link
      — or –
    • type in an External Link
      • be sure to include http://
  • Events will show in order they are entered but they can be re-ordered
    • data definition - reorder arrows: to reorder
  • Submit your changes.

Preview your changes

Preview your image and text on all sizes of the responsive page.  Be sure the text fits in the transparent box on all sizes of the responsive page.

  • you can do a preliminary check of changes within cascade
    • in Cascade go to Home > Responsive
    • click on index to see the page in View mode
    • resize the cascade window to simulate the desktop, tablet and mobile views
  • to allow others to see the image you can publish the homepage and the images to the Staging Server
    • go to Home > Responsive
    • publish the images
      • go to images > explore
      • select each image (if you have multiples do them separately)
      • go to Publish
      • be sure to uncheck the Production destination
      • you only want to publish to the Staging destination
    • publish the index
      • go to Base Folder
      • select the index
      • go to Publish
      • be sure to uncheck the Production destination
      • you only want to publish to the Staging destination
    • after the index has been published to the Staging Server you can view your changes at
      http://cascadewww-staging.wesleyan.edu
    • you can check this url on a desktop by re-sizing the window to simulate other device sizes
      -or-
      you can use this url on a tablet and/or mobile device
  • if the text and/or image don’t work well at different sizes you may need to upload a new image or change the text
  • when satisfied you can Publish the index to both destinations (Production and Staging)

Older Posts »

Log in