56
Page | 1 Table of Contents Image Sizing............................................................2 Size your images, and name them logically.............................2 Upload your images first.............................................. 3 Create your item........................................................5 Notables, Announcements, and In the News Directions...................6 News Directions....................................................... 6 Adding media (news thumbnails, news featured image, notables)........8 Category/Tags Section................................................9 Adding Images to an item (with background snippet).................10 Adding an Image with No Background (no snippet).....................13 Adding Video to an Item.............................................14 Adding Links to an Item.............................................15 Editing an existing item...............................................16 To edit the text, images in the text, or video in the text...........17 To edit page title, description, keywords, tags, categories.........17 To edit Media (Thumbnails, Featured image)..........................19 Renaming a file (when you’ve forgotten to add the date at the beginning)..........................................................21 Moving a file (when you’ve created it in the wrong folder)..........22 Updating the URL in an RSS Feed.....................................23 Changing a story from Featured to not (or vice versa)...............25 Change/add an end date to a Featured Story..........................26 Deleting an RSS feed entry..........................................28 Creating an RSS feed entry..........................................29 Changing the date on an RSS feed entry..............................32 Cover Stories..........................................................34 Image Galleries........................................................37 Prepare your images.................................................. 37 Create the gallery................................................... 37

Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

  • Upload
    vonhu

  • View
    215

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 1

Table of ContentsImage Sizing.......................................................................................................................................................2

Size your images, and name them logically....................................................................................................2

Upload your images first................................................................................................................................3

Create your item................................................................................................................................................5

Notables, Announcements, and In the News Directions................................................................................6

News Directions.............................................................................................................................................6

Adding media (news thumbnails, news featured image, notables)...........................................................8

Category/Tags Section...............................................................................................................................9

Adding Images to an item (with background snippet)............................................................................10

Adding an Image with No Background (no snippet).................................................................................13

Adding Video to an Item..........................................................................................................................14

Adding Links to an Item............................................................................................................................15

Editing an existing item....................................................................................................................................16

To edit the text, images in the text, or video in the text..............................................................................17

To edit page title, description, keywords, tags, categories......................................................................17

To edit Media (Thumbnails, Featured image)..........................................................................................19

Renaming a file (when you’ve forgotten to add the date at the beginning)............................................21

Moving a file (when you’ve created it in the wrong folder).....................................................................22

Updating the URL in an RSS Feed.............................................................................................................23

Changing a story from Featured to not (or vice versa).............................................................................25

Change/add an end date to a Featured Story..........................................................................................26

Deleting an RSS feed entry.......................................................................................................................28

Creating an RSS feed entry.......................................................................................................................29

Changing the date on an RSS feed entry..................................................................................................32

Cover Stories....................................................................................................................................................34

Image Galleries................................................................................................................................................37

Prepare your images....................................................................................................................................37

Create the gallery.........................................................................................................................................37

Add the images............................................................................................................................................40

Insert the gallery into a page.......................................................................................................................41

Skidmore In the News......................................................................................................................................43

Troubleshooting “In the News"........................................................................................................................47

Page 2: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 2

Image SizingSize your images, and name them logically.

Naming Conventions - no spaces, lowercase only

Use the 2 digit month and 2 digit date, followed by keywords relating to the scope item There cannot be spaces in the names of any files you upload to OU – images or documents You do not need the year – you will be uploading into year-named folders mmdd-keyword-keyword-keyword-keyword.jpg

Home page “cover” images - 1920px wide, 1200px tall, 72dpi

Must be horizontal in nature rather than vertical Must have content focused right of center – left side of photo will be hidden by the left navigation

bar template located at /datastor/communications/shared/web files/Home page images/1920x1200

cover template.png example: 1207-beatlemania-concert.jpg

Featured story rotator image – exactly 480px wide by 322px tall, 72dpi

Should be more horizontal than vertical in nature naming convention - should match the story images in keywords, with featured as the last keyword example: 1207-beatlemania-concert-featured.jpg

Story body images that are right/left aligned – 200px wide, 72 dpi

Should be vertical rather than horizontal naming convention - should match the cover story in keywords, if there are multiple images add a

number at the end - mmdd-keyword-keyword1.jpg, yymmdd-keyword-keyword2.jpg example: 1207-beatlemania-concert1.jpg, 1207-beatlemania-concert2.jpg

Story body images that are full-width – 450 px wide, 72dpi

Should be horizontal rather than vertical Name as above for other story body images

Thumbnail image any story – 200px wide by 135px tall, 72dpi

Should be horizontal in nature rather than vertical This image can also be used inside the story, in which case you wouldn’t upload two versions – you

would just link to the image inside the story AND in the thumbnail area of the news form. example: 1207-beatlemania-concert-thumbnail.jpg

Page 3: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 3

Upload your images first Log in to OU on the News page – http://www.skidmore.edu/news/ Click the “Pages” link in the top left to expand your view to full-screen

Navigate to the folder that you need for uploading

News – Click on the appropriate year folder, and then scroll down and click the “images” folder link Cover Story – Images go into the News images folder for that year. Announcements – Click on the “announcements” folder link, and then click on the appropriate year Notables – Click on the “notables” folder link, and then click on the appropriate year Portfolio – Click on the “top” link, scroll down the left column for “portfolios”, and then click on the

appropriate year

In Pages view, click on Upload in the top right corner.

Page 4: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 4

You’ll notice this screenshot also highlights the “breadcrumb links”, which will always confirm where you are in the folder structure. This can help you to navigate as well, by clicking on any of the links in the breadcrumb set.

Set the image access properties, and upload your images.

Set access to “News” Click Add Files, find the first image file on your computer, and then click Open Repeat for any images being used for your item (cover photo, internal photos, thumbnail, etc.) Do not click Overwrite unless you are deliberately uploading a new version of an image (see

directions below). Scroll down and click upload, wait for the process to complete and a message to display with

successful results

WHEN YOU ARE DONE UPLOADING YOUR IMAGES, YOU MUST NAVIGATE TO THE PROPER YEAR FOLDER TO CREATE YOUR NEWS STORY (/2015/ FOR EXAMPLE). DO

NOT FORGET THIS STEP!

A STORY CREATED IN ANY OTHER FOLDER WILL NOT POST PROPERLY IN FACEBOOK OR TWITTER.

Uploading a new version of an image (to correct errors, etc.)

First, make any edits to the existing image file on your computer. Save it with the same name. This is important so that you can overwrite the one existing on the

server, instead of uploading multiple copies and taking up extra space.

Page 5: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 5

Navigate to the same folder where you uploaded the original image, wherever that was. The most obvious location is usually /news/2013/images, but it could be /news/notables/2013/images, etc.

Follow the directions above for uploading, except make sure to click the Overwrite box before clicking upload.

o If it was a cover story, the image should update automatically on the home page with no further action (unless your computer has a cache of the website, in which case you will still see the old version. Check on someone else’s computer when in doubt.)

o If it was an image embedded in a story/notable/profile/etc, go back to your item, delete the image, re-embed it, then republish the story.

Create your item In the upper left, click on Content, and then Pages.

Navigate to the PROPER YEAR directory for creating your new item, by clicking the blue breadcrumb links highlighted in the earlier screenshot.

This is an important step – stories posted in any other folder will not post properly in Facebook or Twitter! Always click on the year folder before clicking “New”.

Click “New”

Select the type of item you would like to create – News Article (used for News, Announcements, and Notables), News Alert, or Portfolio

Page 6: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 6

Notables, Announcements, and In the News DirectionsNotables and Announcements will follow the directions below for News, except:

Featured does not apply to Notables or Announcements Notables require a thumbnail of 125px by 125px, along with any image you wish to include inside

the body of the piece There are no images associated with Announcement In the News Directions – are included separately at the end of this document.

News Directions (check out the News Tips and Tricks document for some extra hints)

Click New News Article Fill out the various parts of the form (detailed below)

Page 7: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 7

News Type: Select News, Announcement, or Notable from the dropdown Featured – only applies to News stories, and only if you have uploaded an appropriate sized image

previously Page Title – this is your story headline Keywords – used by search engines. You should use whatever tags and categories you plan to use

for the story as keywords (available at the end of this document.) You should also enter the standard keywords of Skidmore, Saratoga Springs, New York, North East, NY, Liberal Arts, College, University, creative, thought, matters, higher education

Description – the short blurb/intro of the story, the text in the black box on the home page (this is also the text that appears when the item is posted on Facebook and Twitter)

Story Text – here you will enter your story texto You can copy/paste from Word, but you will have to use the “Remove Formatting” button

(eraser, next to the “Bold” icon) to remove background code. To do so, highlight all of your text and then click the “Remove Formatting” button.

o You will then need to double check your formatting (italics, bullets, bold, etc.)o You can add links by highlighting the text to be a link, and clicking the link button (directions

below)

Page 8: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 8

o You can add images by clicking the “Insert/Edit Image” button (directions below)o You can add video clips by clicking the “Insert/Edit Embedded Media” button.(directions

below) Post date – the date of creation, in long form (January 12, 2013) End date - only applies to Featured stories, in mm/dd/yy format

Adding media (news thumbnails, news featured image, notables)This is for thumbnails and featured story images only, skip if you do not have those

Media Title – Alt text for the image Image – click on the “Select a file” link to select the image. You will have to navigate to the folder

that you uploaded to – news/year/, or notables/year/, or announcements/year/. Scroll to find the image you uploaded as the cover image, and choose it.

Thumbnail – you may select the same image again, or leave blank Media description – a more full description than the alt tag, if necessary Media keywords – for search engine purposes, you should include some of the keywords already

used for your story

Page 9: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 9

Category/Tags SectionApplies to all items

Categories – these affect how things are sorted out on the various department pages. Check off all that are applicable.

Tags – these effect how things can be cross-referenced or searched for on our site, and sorted into some department pages. Check off all that are applicable.

Additional Tags – any applicable tag that is not already listed. These will always include names and places and class years. Please refer to standards documents (available at the end of this document.)

o This field must begin with a comma!o Do not copy/paste into this field. Errors are introduced by the differences between commas

in different fonts, etc. Always type into this field.o , tag, tag, tag, tag

New page filename – this will become the URL for the story, so it should be very short and consistent with how you named the images for the story.

o start with the date, then 2-4 keywords separated by hyphens 0410-keyword-keyword-keyword.pcf

o NO CAPITALS OR SPACES! The system will reject your story and you will have to begin again!!!

o name it exactly how you named the images for the storyo do not erase the .pcf part, that is a required file type (like .docx, or .pdf)

If the Overwrite box appears, leave blank New page access – leave at inherit Click Create

Page 10: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 10

Adding Images to an item (with background snippet) Click on the Edit button, and then the horizontal green Edit bar.

Place your cursor where you would like the image to be displayed – usually starting on the left margin of the story

Click the snippet button

choose “layout” from the left drop down, and then whichever snippet is suitable from the right drop down (usually “Image with caption, Gray, (right)”

Click insert Click on the placeholder image, and click delete. Without moving your cursor, click the “Insert/Edit image” button

Page 11: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 11

Click the browse button

If you aren’t put into the appropriate images folder, scroll down to find /news/, and then enter either the appropriate year folder, or /announcements/ or /notables/, etc.

Scroll to find your first image. Click on it, and it will load in the Image Preview window for you to double-check.

Click “Insert”

Page 12: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 12

Fill in an image description. This is the same as the caption you would want to put below the image on the page. Do not copy/paste this text, as errors can be introduced – type directly into the field.

If you want a border around the image, or space, click the Appearance tab. When you are satisfied with your settings, click Insert.

Page 13: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 13

In the body of your story, highlight the text below the image, inside the grey box. Paste your caption over it. Make all captions bold.

You will notice that your captions will need to have line breaks inserted to force the text to wrap neatly under the image, just as in the old CMS. You can re-enter the story to do so once it has been published.

Repeat with other images until finished, then click save at the top left of the page (diskette icon).

Adding an Image with No Background (no snippet) Place your cursor where you would like the image to be displayed – on the left margin of the story

usually. Without moving your cursor, click the “Insert/Edit image” button Click the browse button

If you aren’t put into the appropriate images folder, scroll down to find /news/, and then enter either the appropriate year folder, or /announcements/ or /notables/, etc.

Scroll to find your first image. Click on it, and it will load in the Image Preview window for you to double-check.

Click “Select file”

Page 14: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 14

Fill in an image description. This is the same as the caption you would want to put below the image on the page. Do not copy/paste this text, as errors can be introduced – type directly into the field.

If you want a border around the image, or space, or special alignment (left, right, etc.) click the Appearance tab.

When you are satisfied with your settings, click Insert. Repeat with other images until finished, then click save at the top left of the page (diskette icon).

Adding Video to an Item Place your cursor where you would like the video to be displayed

Click the “Insert/Edit Embedded Media” icon

First method: copy/paste an embed code

Find the video on YouTube or Vimeo. Click the Share or Embed button.

Sometimes the Embed option is nested under Share.

Select Custom size – suggest size for a full-width video is 400px wide, and allow the video site to auto-fill the height.

Copy the Embed code. Go back to the page in OU Campus,

and place the cursor at the location where the video should be displayed. Click on the Insert/Edit Media icon. Paste the URL into the Source tab of the embed media popup. Click on Insert.

Second Method: Inserting a video with URLONLY WORKS WITH YOUTUBE

Page 15: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 15

1. Find the video on YouTube2. Copy the URL for the video from the top address bar3. Go back to the page in OU Campus, and place the cursor at the location where the video should be

displayed.4. Click on the Insert/Edit Media icon.5. Paste the URL into the Link URL box on the General Tab.6. Click on Insert.

If desired, the dimensions can also be updated to define the size of the displayed video.

The media will not render within the WYSIWYG Editor. Instead it will appear as a yellow box the size of the intended media. Once the page is saved, the video will render in the preview.

Tips and Tricks

Insert the video into an Image with Caption snippet as though it were an image, to get the grey background behind it and a bit of space/padding around the outside edges.

Adding Links to an Item Links are created by highlighting the text to be made into a link and clicking on the “Insert Link” icon.

The “Insert Link” icon will not appear until you have highlighted text or an image! Click the Insert/Edit Link button

If you are linking to an outside URL (Google, Amazon, etc.) you can paste the URL into the Link URL box and click Insert at the bottom, and you're done.

If you are linking to a Skidmore page with a www address, click the Browse button to the right of the Link URL box.

Navigate to find the file that you want to link to. You can click through the folder structure in the left column, or use the breadcrumb links above the folder structure to navigate.

Page 16: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 16

When you find the file, click on it, and then click "Select File" at the bottom of the popup The next popup will be for filling out the properties of the link

o Anchors: Only used when making anchor/link pairs o Target: Where the link will open.

When you're linking to something within the Skidmore site, the link usually should open in the same window. The exception often is for news stories, where you’d want a department page to open in a new window so they don’t leave the news story.

When you're linking to something outside of your own site, or outside of Skidmore, the page should open in a new window.

o Title: A navigation title for your link, not requiredo Class: Only used for links in your site's LEFT navigation

Click "Insert"

Editing an existing item Navigate to the directory where you created item, by clicking the blue breadcrumb links highlighted

in the earlier screenshot, or using the yellow folder to expand your view to split screen and navigating that file listing.

Page 17: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 17

Click on the name of your entered item when the file listing refreshes Your story will load into the right pane

To edit the text, images in the text, or video in the text

Click the Edit button Click the green Edit bar on the main text area of the story

In the text editor that opens up, you can edit anything that you see – text, images, video, and the publication date of the story

When you have made your edits, click the Save icon in the top left of the WYSIWYG bar

Click Publish Now

Enter a brief comment of what you changed in the comment field, and then click Publish

To edit page title, description, keywords, tags, categories must be done in both Properties and RSS feed

Navigate to your story/item in the proper folder (news, announcements, etc.) Click on the link to load it in the right hand box. Click the green Check Out button.

Page 18: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 18

Click the Properties button, first, and then make your changes in the fields provided

Click Save. Click the RSS button next.

Click Edit (hover over the Title Row and Edit / Delete will appear)

Page 19: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 19

Make the exact same change that you just made in Properties, in the fields provided for the RSS feed (title, description, etc.)

To edit categories or tags, you must edit the Extra XML fieldo You must be very careful when doing so – there must be a comma between each item,

and erasing any of the code aspects ( < >, etc) will break the RSS feed of the item. When you have made your changes, click “Update” Click “Rebuild Feed” in the top right corner of the RSS display

Go back to your original news story. Click the green Publish Now button. Enter your brief comment of what you changed in the comment field, and then click Publish.

To edit Media (Thumbnails, Featured image) Upload your new media according to the directions at the beginning of this document for uploading

media for any regular news story.o Preferably, overwrite the old versions of these images you are replacing, or delete them

from the server, so as not to waste space. You can refer to this document for uploading directions, or http://www.skidmore.edu/webhelp/faqs/uploading.php, or consult with a web team member.

Click the light bulb button and go to page properties

Page 20: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 20

Click the RSS Link

Click the edit link (hover over title for Edit / Delete to appear)

In the popup window you can edit the media attached. Notice the X link to delete the media formerly attached to this item, and the green plus sign to browse for new items to attach.

Page 21: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 21

o Link – please select the news story that this item should be attached to - REQUIREDo Title – the title of the news story, as already entered in the system - REQUIREDo Description – the description of the news story, as already entered in the systemo Thumbnail – click Choose Media File to select your new uploaded imageo Keywords – the keywords of the news story, as already entered in the sytem

When you have made your changes, click Create Click “Rebuild Feed” in the top right corner of the RSS display

Go back to your original news story. Check out the story, and then click the green Publish Now button.

Enter your brief comment of what you changed in the comment field, and then click Publish.

Renaming a file (when you’ve forgotten to add the date at the beginning) must be done in the Pages view and in the RSS feed

In the Pages View, hover over the file that you wish to rename, and go to File -> Rename.

Page 22: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 22

Click on Rename, and in the popup box, enter the new name for your file.o Do not remove the .pcf part of the file name

Click enter when done. You will then need to go into the RSS feed for the story and change the URL to match this new name

or location. Please skip down to the directions for Updating the URL in an RSS Feed.

Moving a file (when you’ve created it in the wrong folder) must be done in the Pages view and in the RSS feed

In the Pages View, hover over the file that you wish to move and go to File -> Move.

Click on Move, and in the popup box, you can choose what folder to move the file to. Click on the breadcrumb links to navigate to the proper folder first (red line) and then when you are in the correct location, click on Move.

Page 23: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 23

The system will process your command, and then pop up a successful completion window. You will then need to go into the RSS feed for the story and change the URL to match this new name

or location. Please skip down to the directions for Updating the URL in an RSS Feed.

Updating the URL in an RSS Feed (After renaming or moving a file, or adding new media to the item)

Navigate to your story/item in the proper folder (news, announcements, etc.) Click on the link in the left column to load the story into the right hand box. Click the green Check Out button.

Click the RSS link .

Page 24: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 24

Click on the title for the RSS item associated with your story.

Update the Link box with the new URL for your story – if you renamed it, if you moved it to a new folder, whichever you did, update the URL in the Link box to reflect that.

When you have made your changes, click “Save” Click “Rebuild Feed” in the top right corner of the RSS display

This command may take several minutes to process. This is perfectly normal, and you should wait until it is complete before continuing on to the next step.

Page 25: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 25

Go back to your original news story. Check it out if necessary, and then click the green Publish Now button.

Enter your brief comment of what you changed in the comment field, and then click Publish.

Changing a story from Featured to not (or vice versa) Navigate to your story in the proper news folder. Click on the link in the left column to load the story

into the right hand box. Click the green Check Out button.

Click the RSS link .

Click on the title for the RSS item associated with your story.

Update the Extra XML box to change the text for <ouc:featured>XXXX</ouc:featured> to read either yes or no, as your case may be.

o You must be very careful when doing so – erasing any of the code aspects ( < >, etc) will break the RSS feed of the item. Only edit the text of the words “yes/no”.

Page 26: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 26

When you have made your changes, click “Save” Click “Rebuild Feed” in the top right corner of the RSS display

This command may take several minutes to process. This is perfectly normal, and you should wait until it is complete before closing your browser.

Change/add an end date to a Featured Story Navigate to your story in the proper news folder.

Click the RSS link .

Page 27: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 27

Click on the title for the RSS item associated with your story.

Update the Extra XML box to change the text for <end>mm/dd/yyyy</end>, or if necessary type in the entire line at the end of the box to add an end date to the featured story.

o You must use the syntax mm/dd/yyyy.o You must be very careful when editing in this box – erasing any of the code aspects ( < >,

etc) will break the RSS feed of the item. Only edit the text of the words “yes/no”.

When you have made your changes, click “Save”

Page 28: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 28

Click “Rebuild Feed” in the top right corner of the RSS display

This command may take several minutes to process. This is perfectly normal, and you should wait until it is complete before closing your browser.

Deleting an RSS feed entry removes an item from displaying on the New page or archives does not delete the actual story – you can re-create the RSS entry later to re-display the item on the

News page Navigate to your story in the proper news folder.

Click the RSS link.

If you intend to republish this item at a later date, click on the Title link, and make a note of all of the information on the popup screen – either do a print-screen or a copy/paste of all of the information, and then click Save. You will need it all later to recreate your item!

If not, continue to the next step.

Page 29: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 29

Click on the garbage can icon underneath the Delete column for the RSS item associated with your story.

Click “okay” or “confirm” or “continue” on the confirmation popup. Click “Rebuild Feed” in the top right corner of the RSS display This command will take several minutes to process. This is perfectly normal, and you should wait

until it is complete before closing your browser.

Creating an RSS feed entry re-displays an item that was previously deleted from visibility in the News and Archives areas creates a link to an external news article without filling in the entire news form (esp. for

departmental news)

Page 30: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 30

If you are re-creating a feed that you have previously deleted, you will need the information that you copied down from the RSS entry before deleting. If you do not have that information, you will need the following:

Title Description URL of the story categories to include in the Extra XML area tags to include in the Extra XML area Featured story, or not? All images should have been uploaded when the story was created, and be in the relevant

/news/year/images/ folder. If they are not, upload them first. Navigate to your story in the proper news folder.

Click the RSS link .

You will be given a blank RSS item form to fill out. If you have the information from the prior item, enter it all here. If not, you will need to enter brand new information.

o Do not copy/paste the title or description! It may introduce code errors that may cause issues with the News display. Type directly into those fields.

You cannot add any thumbnail or featured images at this time, you will have to create the item and then come back in and edit it (see directions above) to do that step if required.

Page 31: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 31

Title: The title of the story as you would have it appear on the News page or in the black box on the home page.

Description: Story blurb, as it would appear on the News page or in the black box on the home page. Link: Paste in the URL of the existing story. Author: Will be filled in automatically. You may change it if you wish, but if you do, you must

preserve the carats around the email address <[email protected]> Publication Date: Will be filled in automatically. You may change it to the information you copied

from the previously existing story, but be careful to preserve the syntax of that date format, including where periods and commas are located.

o You can leave off the timestamp and just put in the date – Mon, 3 Dec 2012 Extra XML: This field is for keywords, tags, and indicating whether this will be a featured news story

or not. If you have the existing XML from your story, copy it into this area. Otherwise, you may copy the sample code below exactly, and paste it into the Extra XML field, and then edit it using the suggested categories and tags list at the end of this document (or any tags you choose to enter).

o In the example code, the only parts that you edit are in red. Be careful not to edit any of the code syntax (<, >, etc) or you will break the news RSS item.

<ouc:category>arts</ouc:category>

<ouc:tags>ensemble, acjw, carnegie hall premieres, samuel carl adams, performance, music</ouc:tags>

<ouc:featured>no</ouc:featured>

When you are done filling out the form, click Create.

Click “Rebuild Feed” in the top right corner of the RSS display

Page 32: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 32

This command will take several minutes to process. This is perfectly normal, and you should wait until it is complete before closing your browser.

Changing the date on an RSS feed entryo “bumps up” an item on the News display so that it can be prominent againo the order you wind up with is somewhat subjective based on the publication dates of items already

showing in the news stream

Navigate to your story in the proper new folder. Click on the link in the left column to load the story into the right hand box. Click the green Check Out button.

Click the RSS link .

Click on the title to edit the RSS item associated with your story.

o Update the Publicaton Date box to change the text to a new desired publication date.o You must be very careful when doing so – erasing any of the code aspects ( < >, etc) will

break the RSS feed of the item. Only edit the text of the words “yes/no”.o You must adhere to the date format established, or you may break the RSS feed item.

Note that there is no period after the abbreviated day or month.

Page 33: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 33

o You do not need to edit the timestamp.

When you have made your changes, click “Save” Click “Rebuild Feed” in the top right corner of the RSS display

This command will take several minutes to process. This is perfectly normal, and you should wait until it is complete before closing your browser.

Page 34: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 34

Cover StoriesNavigate to http://www.skidmore.edu/news/ and click on the link for your story to check the presentation. Copy that URL if you are posting this as a cover story – you will need it for the form.

Important note: Do not copy/paste into the Cover Story form. This will break the cover story preview feature, and may also cause some errors in displaying text. Always type directly into the form.

Be sure that you have properly uploaded your cover story photo, as directed Part 2 of this documentation

o Remember that images should have their main content focused to the right of center. The left navigation will hide the left edge of the image, and the black text boxes will hide part of the right edge of the image. Items of interest at the top or the bottom might also be cut off – centered focus is best.

Navigate to the main Skidmore index page to enter your story

o Click on Content, and then on Pageso Click the blue link for topo Scroll down the list in the left column to find index.pcfo Click on the blue link for index.pcf

Click the Edit button, then click on the small on the small orange Multi Edit button that will appear

Page 35: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 35

1) First, you will remove old stories and update the remaining stories in a new priority order.

Remove old stories - Scroll down through, and uncheck the Show box for any stories that are due to expire or have already expired.

Reorganize remaining stories in priority order - Change the Priority numbering so that the remaining stories are in the desired order.

o Remember to include an expired “not showing” article in the desired spot for your new story.

Scroll to the bottom and click Save.

IMPORTANT NOTE!

There are three reserved slots on the cover story form. These are the last three in the form, and they are reserved for an admissions story (usually the virtual tour but that can change), a Skidmore Mind story, and a blank page for emergency use only. This means that under normal circumstances, there are only 7 cover story rotation slots.

You can distinguish the “reserved” slots because they have no end date entered – they are not intended to ever end, just to have their images updated occasionally to keep interest.

It is possible that because of timely event stories, it may be necessary to use either the Skidmore Mind or Admissions slot for a short time. Please make sure to work with Andrea and Dan if that happens, and please schedule yourself to restore the “evergreen” story again after your event is over – the person who takes down an “evergreen” story is in the best position to copy the original content before taking it down, and put it back up afterward.

Do not use the reserved emergency slot for other purposes. It is pre-loaded and pre-formatted and must be ready for use at all times (it is the final one in the form.)

2) Next, you will add in your own new Cover Story, replacing one that is already there.

Click the orange Multi edit button to go back into the Cover Story form. Scroll down to the portion of the form that you reserved for your new story, and fill out the entry

areaso DO NOT copy/paste into this form, or you run the risk of introducing code that breaks the

preview mode. Type into the boxes.

Page 36: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 36

Show – check “on” to show your story, or “off” to remove it from the visible listing Start date – fill in if you have a specific date you want the story to start. Note the format

example in the right column.o Stories will either begin immediately upon posting if no date is given, or at 12:00am

(midnight) on the date you indicate. End date – fill in if you have a specific date you want the story to end. Note the format example

in the right column. o Stories will end at 11:59pm on the date that you indicate (will be visible all day.)

Priority – the order in which stories display, 1-10 Image area

o Image description – alt tag for the photo, or what you might caption it if it were in a story.

Do not use double quotes in an image description, single quotes only. Do not copy/paste.

o Choose photo link – click, and then click the blue “top”. Scroll down and select /news/, then /2013/, and then /images/. Then scroll to select the cover story image you uploaded.

Title – the title of your story, as it should appear in the black box. You may use the <em> </em> to have italics in this area.

Description – black box text. You may use the italics tags in here as well. Link text – always just the single word “More” Link URL - Paste your news story URL into this box Position – the position of the black box of text on the page. Choose from top, middle, or bottom. Logo – choice between two Skidmore logo colors, light (white) or dark (green). When done, scroll to the bottom and click save.

Page 37: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 37

You may preview your stories on this next screen (note that it shows every story that is selected for display – including ones scheduled in the future). Check the sizing of the cover story image, the placement of the left navigation bar, the placement of the text box, and the color of the Skidmore logo. You may discover at this point that the image you’ve chosen is somehow inappropriate – make edits to the image and upload a new version (see directions at the top with uploading images).

If you cannot preview items in this screen, it’s likely that at some point, bad code was copy/pasted into the form. You can either go into each item and retype the text in the boxes, or you can wait until over time those boxes get refilled with properly typed information. This is why it is so important to not copy/paste into the Cover Story form.

When satisfied, click Publish Now. In the Version description, note which stories were removed, and which were added, etc. This is

necessary in case we have to revert backward past a change that has been made, due to errors or a desire to remove or restore a certain story, etc.

Click Publish again, and you are finished.

Image GalleriesPrepare your images

Edit all of your images to be at 72dpi. For sizing:o If you are creating a rotating gallery for the top of a page, size to 700px by at most 250px

tall. Make sure that all images are the same height!o If you are creating a gallery for inclusion on a page, or in a news story, the height and width

do not have to be consistent, although sometimes it is desireable to make the width consistent for a better presentation on the page.

Create the gallery1. To create a new image gallery, navigate to Content > Assets. (note this page may take a few minutes

to load)

2. Click on New and then Image Gallery.

Page 38: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 38

3. Name the Image Gallery. This name should begin with your department, and then what the asset contains, and end with what type of asset it is. Portfolio – Keyword Keyword Gallery. Enter a description and keywords as well.

Asset Name - This field should begin with your department name, and then a dash, and then the type of form you are creating. Examples are Admissions - Summer Open House Registration and Campus Safety - Silent Witness Form. These terms are searchable on the Assets tab so that you can find your assets (forms, image galleries, etc) quickly by department, keyword, etc.

Description - A brief description of the form. If the Asset Name is descriptive enough, you can just copy it here. Otherwise, be brief, but make sure that the description is specific enough to clarify any questions that someone else may have about the purpose of your form.

Tags - Another way to search for your assets in the system. You should always tag your asset with at least your department name (Portfolio, in this case) and type of asset (gallery). Tags will always be converted to lowercase in the system.

Content editable by: This field will control who can edit your asset after creation. Use the drop down menu to select News.

Page 39: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 39

Thumbnail: Set the thumbnail size, if different than the default of 100x100

To modify the thumbnail size, either drag the thumbnail border to the desired size, or enter the desired sizes into the text boxes. Be sure to click "Set Size" AND "Save" for the new settings to take effect.

Aspect Ratio: Select whether the image should maintain its original aspect ratio or be cropped based on the thumbnail size.

The thumbnail's aspect ratio defaults to original, which means that the image will not be cropped, but differently sized or shaped images may appear differently than each other. The dimensions of the thumbnail will be relative to the original aspect ratio and will be no larger than the shortest side.

Page 40: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 40

To ensure that all image thumbnails are consistently sized and shaped, elect to crop the image. This will ensure all images are formatted to the dimensions defined. However, this will create a crop from the middle of the image, and may cut out elements of the image.

Remember to click "Save" for the change to take effect within the Asset. Then click Edit again to go in and start adding your images.

Add the images To add new images, simply click on either of the "Add" buttons found under Images. Both do the

same thing, and as images are added, the images will appear between them, leaving one button at the top and one at the bottom.

When "Add" is clicked, a box will appear allowing a local image to be selected. After uploading the new image, enter in the image's title, description, and caption.

o Do not copy/paste into these fields! You may extraneous code that will cause display errors. Type into these fields.

o Do not use double quotes in image titles – only single quotes will be displayed.

Depending on the image gallery style that you will eventually use to display your images inside the portfolio, you may need to experiment with whether the caption that displays is what is entered in the Title area, the Description area, or the Caption area. Enter just a few images and test to see which applies to your gallery style.

Page 41: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 41

AD Gallery (with or without thumbnail) – caption goes into the Title box. Orbit Gallery – caption goes into the Description box.

In some gallery styles (such as Orbit), you can enter a URL into the Caption field so that when a visitor clicks on the image, they are taken to a web page. That is another aspect to experiment with and change according to your preferences.

Repeat this process for all desired images.

Once images are uploaded, change the order of the images by simply dragging them to the desired order using the gray box with the four lines. It is possible to delete images using the X in the upper-right hand portion of the image's box.

When finished, click the Save button, and then publish your work.

Insert the gallery into a page While in the WYSIWYG Editor, place the cursor where the Asset will be entered.

Then find and click on the Insert Asset icon in the toolbar.

After clicking the icon, an Asset selection screen will appear.

Search for the desired Asset using the filter options (this is where the tags you used will come in handy.) Assets from all sites will appear, except for Managed Form Assets, which are site-specific.

Select the desired Asset by clicking on the blue “hyperlink” text in the left column of search results.

Page 42: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 42

Click on Select Asset.

When inserted into your page, the photo gallery will not display in Edit mode, and may not display in preview mode. It will display on publish.

. You may choose different styles of image gallery by editing the selection in the drop down menu

under Page Properties. AD Gallery Without Thumbnails is the best one for the top of a news story, AD Gallery with Thumbnails is popular for the bottom of a news story. You can try different styles to see which type looks best – but remember, where the captions go in the asset is different for each type of gallery, so you may have to go back to your asset and change the caption location if you change the gallery type.

After the Asset is entered, you’ve chosen your style under Page Properties, and page updates completed, save the page and publish as normal.

To delete an Asset in the WYSIWYG Editor, click anywhere on the Asset wrapping and press Delete key, and then publish the page.

Page 43: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 43

Skidmore In the NewsThe purpose of this project is to inform the Skidmore community about when Skidmore College is in an external news story from a news agency such as Times Union, The Post Star, The Saratogian, etc.

In the News items appear on the main Skidmore News page (www.skidmore.edu/news/) and there is an archive page at https://www.skidmore.edu/in-the-news/.

Below is a step by step process about how to insert an In The News item into the system. It works much like main news system but with a couple minor changes. Familiarity with website news system is recommended.

Step 1 – Login and navigate to the folder

Log into OU Campus on the News page as normal, and and navigate to the /in-the-news/ folder. At the top of the left column, click the link for “top”, and then browse down the list to find /in-the-

news/.

 

Navigate into the current year folder. Much like the news system, this is where all the articles are going to reside.

Step 2 – Create your article

Click “New” in the top right

Page 44: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 44

Select "News Article"

Fill out the New News Page form with the required information. o News Type – Select “Skidmore in the News” (required)o Featured – leave set to No.o Page Title – Enter in a title for the article. (required)o Keywords – Enter keywords for the article as with a news story. o Description – Enter in a short description for the article. (required).

As in other news stories, do not copy/paste here. Type directly into the form.o External URL – Link to the article where Skidmore College was mentioned in the news.o Story Text – you can copy/paste from the Description box to this one. (required)o Post Date - Enter in the current date, in long form – January 1, 2014. (required)o End date – Ignore this section.o Media – Ignore this section.o Categories – Add any categories for the article, as with a regular news story.

Page 45: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 45

o Tags – Add any tags for the article, as with a regular news story.o New Page Filename – give your article a name. (required)

Start with the date, then 2-4 keywords separated by hyphens 0410-saratogian-solomon.pcf NO CAPITALS OR SPACES! The system will reject your story and you will have to

begin again!!! do not erase the .pcf part, that is a required file type (like .docx, or .pdf) New Page Access – Leave at Inherited. When you are finished click the Create button at the bottom. DO NOT PUBLISH YET.

*** BEFORE YOU HIT PUBLISH ***Step 3 – Update the RSS to point to the news article you are referencing.

Click on the RSS link to open the Update RSS Item. Find the field that says "Link" and erase the URL in it. Substitue the URL for the news story you want

to link to. Click Update.

Page 46: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 46

Step 4 – Publish your article

Click on the big green Publish Now article, and then click the confirmation Publish button on the popup. Your article should appear in the In the News section of the News site.

Page 47: Image Sizing - skidmore.edu€¦  · Web viewThis image can also be used inside the story, in which case you wouldn’t upload two versions – you would just link to the image inside

P a g e | 47

Troubleshooting “In the News"My item appears in the regular news area, what happened?

One of two things has happened – either you have created your story in the wrong folder (/news/ instead of /in-the-news/) or you forgot to use the In The News template when creating it. Usually the best thing to do is to delete the original and make a new one in the correct area or using the correct template.

However, if you choose to delete an item, that will cause errors in the news feed – the feed will still try to deliver the story even when it’s not there, unless you update the feed too.

1) Republish the main News RSS feed and the In the News RSS feed.

Navigate to any story in the /news/2014/ folder or /in-the-news/2015/ folder – it does not matter which one, the top one on the list will do.

Click on the link in the left column to load the story into the right hand box. Click the lightbulb Check Out button.

Click on the “Rebuild Feed” link at the top of the box.

Click “yes” when asked if you want to rebuild the RSS Feed. This command will take several minutes to process. This is perfectly normal, and you should wait

until it is complete before continuing.