1) Size Your Images, and Name Them Logically

1) Size your images, and name them logically.

Naming Conventions -no spaces, lowercase only

use the 2 digit month and 2 digit date, followed by between 1 and 4 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 - 1200px wide, 800px 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
naming convention - mmdd-keyword-keyword.jpg
example: 1207-beatlemania-concert.jpg

Story body images – 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

Portfolio images, for inside the portfolio– 700px wide, 72dpi

naming convention – mmdd-keyword-keyword.jpg
example: 1207-beatlemania-concert.jpg

Portfolio thumbnail image (used on portfolio page AND news page) – 240px wide, 140px tall, 72dpi

naming convention –keyword-keyword-portfolio-thumb.jpg
example: 1207-beatlemania -thumb.jpg

Portfolios

1) Upload your thumbnail

Log in to OU on the Portfolios page –
Click the green arrow in the top left to expand your view to split-screen

Navigate to the folder that you need for uploading

Click on the appropriate year folder, and then scroll down and click the “images” folder link

Click the green arrow in the top left (vertical column) again to expand to the full page action view

Upload your image(s)

In page action view, click on Upload in the top right corner. Make sure you’re in the /images/ folder by checking the blue “breadcrumb” links!

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 Browse, 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 BACK TO THE PROPER YEAR FOLDER TO CREATE YOUR NEWS STORY (/2013/ FOR EXAMPLE).
DO NOT FORGET THIS STEP!

A PORTFOLIO 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.
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.
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.)
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.

2) Create the gallery to embed in the body of the portfolio

To create a new image gallery, navigate to Content > Assets.
Click on New and then Image Gallery.
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
Click Save.
In the next popup, there are many settings to fill.
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.

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.

To ensure that all image thumbnails are consistently sized and shaped, elect to crop the image. This willensure 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 "New" 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 "New" is clicked, a box will appear allowing a local image to be selected. Keep in mind that the image is to be selected from the computer, and it is not possible to browse for images already uploaded to the site.
Only one image can be selected at a time. When the desired image is located and selected, a pop-up with the image will appear. Make any desired edits, and then use the "Upload As" button to complete the selection.
After uploading the new image, enter in the image's title, description, and caption.
Do not copy/paste into these fields! You may extraneous code that will cause display errors. Type into these fields.
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.

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 simplydragging 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.

3) Create a Portfolio

Navigate to the appropriate year directory in the /portfolios/ directory.

Click on the green right arrow to expand your view to page action mode.
Click “New” in the top right corner.

Choose New Portfolio Article from the choices.

Fill out the various parts of the form, which is very similar to every other type of New form (detailed below).

Page Title – what should appear in a navigation, if there were to be one
Keywords – used by search engines. You should use whatever tags and categories you plan to use for the story as keywords.
Description – the short blurb/intro of the story, this is also the text that appears when the item is posted on Facebook and Twitter.
Gallery type – is Orbit by default. You may change that, options are listed and shown as examples on
Story Text – here you will enter your story text.
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.
You will then need to double check your formatting (italics, bullets, bold, etc.)
Embed the portfolio gallery (directons above in the photo gallery directions)
You can add links by highlighting the text to be a link, and clicking the link button (directions above)
You can add images by clicking the “Insert/Edit Image” button (directions above)
You can add video clips by clicking the “Insert/Edit Embedded Media” button.(directions above)
Post date – the date of creation, in mm/dd/yyyy format

Media Title – Alt text for the thumbnail 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 – /portfolio/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

Category/Tags Section – applies to all

Categories – these affect how things are sorted out on the News page (left navigation and top checkboxes). Check off all that are applicable.
Tags – these effect how things can be cross-referenced or searched for on our site. 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 for how class years should be referenced.
This field must begin with a comma!
Do not copy/paste into this field. Errors are introduced by the differences between commas in different fonts, etc. Always type into this field.
, 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.
start with the date, then 2-4 keywords separated by hyphens
0410-keyword-keyword-keyword.pcf
NO CAPITALS OR SPACES! The system will reject your story and you will have to begin again!!!
name it exactly how you named the images for the story
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
Click Edit, and re-enter your portfolio. .

3) Insert the gallery into your portfolio

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.
Click on Select Asset.
If the Asset is a Web Content Asset, a Source Code Asset, an Image Gallery Asset, or a Managed Form Asset, it cannot be previewed in the WYSIWYG Editor, but it will still have a wrapper:
.

Note that even though the Asset is not displayed in the WYSIWYG Editor, it will still render in the page preview. However, Source Code Assets will not always render with preview.

After you’ve entered your asset into the page, click save to preview your selection.
You may want to experiement with different styles of image gallery (found in a drop down menu in Page Properties by clicking the Props button)We have many types to choose from.

When you are satisfied with your text and the look of your photo gallery, publish your portfolio.
(Should you need to delete an Asset in the WYSIWYG Editor, click anywhere on the Asset wrapping and press Delete key, and then publish the page.)