Feed on
Posts
Comments

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)

Homepage – footer graphic

The Footer Graphic is the large image on the bottom of the homepage.  It sits under the footer and is only visible on the desktop version of the homepage.

For every featured story you will need:

  •  1 large image
    • 1399 x 800

upload the image to cascade

  • use the dropdown to navigate to Home – Responsive
  • high light the images > footer 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 image is uploaded you will need to add your new item to the component.

  • use the dropdown to navigate to Home – Responsive
  • go to components > footer-img
  • press Edit
  • you will see the data definition allowing for data input
    data-definition footer image
  • use the paper with the magnifying glass icon browse to select the Image
  • Submit your changes.

Preview your changes

You should preview the how the image displays – it should only display on the desktop view 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 > footer
      • 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)

 

All of the menu items in all of the red dropdown menus are managed in one place.

Locating the file to update

  • use the dropdown to navigate to Home – Responsive
  • go to components > menus
    • main-nav – updates all of the red dropdown menus
      • there are a lot of loops/levels in here, so you will need to pay attention to where you are.

Example of Loops

start of menu loop

start of About loop – add the text and link for About

start of drop down

start of column 1 – add name for About’s column 1

start of items – add all of the navigation text and links for About’s first column

end of items

end of column 1

start of column 2 – add name for About’s column 2

start of items – add all of the navigation text and links for About’s second column

end of items

end of column 2

start of column 3 – add name for About’s column 3

start of items – add all of the navigation text and links for About’s third column

end of items

end of column 3

end of drop down

  end of About loop

start of Admission & Financial Aid loop

start of drop down

start of column 1 – add name for Admiss & Finaid’s column 1

start of items – add all of the navigation text and links for Admiss & Finaid column 1

end of items

end of column 1

start of column 2 – add name for Admiss & Finaid’s column 2

start of items – add all of the navigation text and links for Admiss & Finaid column 2

end of items

end of column 2

start of column 3 – add name for Admiss & Finaid’s  column 3

start of items – add all of the navigation text and links for Admiss & Finaid column 3

end of items

end of column 3

end of drop down

end of Admission & Financial Aid loop

…..

….

end of menu loop

 

 

Updating the Menus

  • use the dropdown to navigate to Home – Responsive
  • go to components > menus folder
  • go to the block main-nav
  • press Edit
  • you will see a data definition allowing for data input
    Screen Shot 2014-12-03 at 3.02.45 PM
  • Each of the red dropdown menus is assigned a number
    • Left Menu >> Menu Item 1 is the About menu
    • Left Menu >> Menu Item 2 is the Admission & Financial Aid menu
    • Left Menu >> Menu Item 3 is the Academics menu
    • Left Menu >> Menu Item 4 is the Campus & Community menu
      • For each of the menus you can set:
        • Link Text – the text for the main navigation
        • Internal/External Link – link for main navigation
  • Each of the Main Menu Items has a loop for it’s content
    • Left Menu >> Menu Item (1,2,3, or 4)>> Drop Down
  • The content has 3 loops – one fore each column
    • Left Menu >> Menu Item (1,2,3, or 4) >> Drop Down >> Column (1,2, or 3)
    • Each of the columns in a section should have a name
      • Left Menu >> Menu Item (1,2,3, or 4) >> Drop Down >> Column (1,2, or 3) >> list
        • Section Name — this is the title for column 1 in this section
  • Each column contains a loop that holds all of the items/navigation in that column
    • Left Menu >> Menu Item (1,2,3, or 4) >> Drop Down >> Column (1,2, or 3) >> list >> List Item
      • list Items
        • Link Text – clickable text in the menu
      • enter either an Internal or External Link
        • 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
          • 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.

Preview your changes

You should preview how the text fits in the red dropdown 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 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)

 

A site-wide alert can be displayed on the top of all pages that have the “black bar”.  The alert box is yellow and contains text and a link to more information.

Adding a site-wide alert message.

  • use the dropdown to navigate to Home – Responsive
  • go to components > site-wide-alert
  • press Edit
  • you will see the data definition allowing for data input
    data-definition - site-wide-alert
  • enter the Message
    • you have access to the GUI for formatting
    • it would be best to limit yourself to bold, italics and links
  • when you are ready to put the message into production check the Enable Alert Yes box
  • Submit your changes.

Preview your changes

You should preview how the alert box displays on the top of all pages in 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 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)

 

ITS will be performing maintenance on the network on Saturday morning, Jan 10, between 7:30 and 11:00 AM.  There will be no period when the entire network will be offline, however there will be rolling intervals of down times between 15 and 30 minutes across the campus within this window. The maintenance affects campus connections only.  Users will be able to connect to systems from off campus without interruption.

« Newer Posts - Older Posts »

Log in