Homepage — Adding News Items

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
    • high light the images > news-items folder
      (make sure you click the small arrow in order to highlight folder)
    • for each image
      • go to Add Content > File or Image
      • Browse to find the image on your computer
      • be sure to rename each image using a good naming convention in the File Name field.
        • consider using the date in the name
        • for example: 20141204-longlane.jpg
      • Save & Preview  to save draft and then Submit  to upload the image to system

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

  • use the dropdown to navigate to Home
  • go to components > news-items
  • press Edit  
  • you will see the data definition allowing for data input for news-items
  • click the box below Image 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
    • click the box 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
  • Save & Preview your changes and then Submit the draft.

 

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
        • after submitting the draft you should be able to view the changes and how the page looks
        • 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
        • 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 the 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)