Web Content Editing Guide

Creating a New Page
Editing an Existing Page (Check-out a Working Copy)
Working with Text
Working with Images
Working with Links
Creating a News Blog Item
Changing the URL for a Page
Changing the Named Creators of a Page
Changing the Folder Display Mode
Detailed Example: Updating Your Profile (Faculty and Senior Staff)
Here is a TEST PAGE for trying things out

Creating a New Page

Login to the website.
Navigate to a folder where you have permission to add content.
On the green, tertiary menu bar, select "Add new..." > "Page".
The "Add Page" form appears. Fill out the sections of the form as you like, using the "Save" button at the bottom of the form as many times as you like. You are creating a draft page, which cannot be viewed publicly at this time.
Consult the following sections of this document for guidance on working with text, images, and other items.
When you are ready for your page to be reviewed, view the page and, on the green tertiary menu bar, select "State: Draft" > "Submit for Publication" (unless your supervisor has directed you to take a different approach).

Editing an Existing Page

Login to the website.
Navigate to the page that you wish to change.
On the green, tertiary menu bar, select "Actions" > "Check out".
If you do not see "Check out" as an option under "Actions", please contact the ISAW IT team for assistance.
On the interstitial "Check out ..." page, under the heading "Details", select "Parent folder" then select the "Check out" button.
If "Parent folder" is not available, please contact ISAW IT before proceeding.
The website content management system will create a "working copy" of the page you are checking out. That copy is automatically set to "drafting" mode and you are given permission to edit it. It will be displayed to you within a few seconds, once the checkout and working copy creation process is complete.
If at any point, you feel you have created a working copy in error, you can cancel the checkout and delete the working copy by choosing "Actions" > "Cancel check-out" from the green, tertiary menu bar.
Use "Edit" on the green, tertiary menu bar to edit the draft working copy. You can select "Edit", make changes in the edit form, and save those changes (using the "Save" button at the bottom of the form) as many times as you like without affecting the original (baseline) copy that is still published. Other sections of this guide page will tell you how to make various kinds of changes to the page.
Once you are satisfied with the changes, the working copy can be "checked in", thereby replacing the baseline copy and automatically transitioning to the same publication status as the baseline. If you have been granted the "reviewer" role in the portion of the site you are modifying, you will see a "Check in" option under "Actions" on the green, tertiary menu bar. Select this option only when you are sure that your changes are ready to be published.
If you do not see the "Check in" option under "Actions", send an email to a colleague who does have the "reviewer" role, including a link to your working copy, and ask them to check in the page. If you are unsure who to email, please contact the ISAW IT team for help.

Working with Text

When editing an item, you will typically have a "Body Text" field in which to enter content (including text and images). The styles and formatting options are limited by design, so that our web site maintains a consistent theme. After typing a block of text, you can apply a pre-defined style to it from the "Style..." pull-down menu, and/or apply basic format options using the buttons for bold, italics, alignment (left, center, right, fully-justified), bullets, numbers, or indentation.
Note: underline is disabled.

Saving Your Work

Whenever you make changes to the text, links, images, or settings in a content item, remember to click the "save" button at the bottom of the editing page in order to preserve your changes.

Pasting Text from Existing Documents

This section could easily be titled "Pasting Content from Microsoft Word Without Breaking Your Page," because Word documents are the most frequent sources of trouble when the formatting of a page has gone mysteriously wrong.

Many content editing programs insert into your copied text a significant quantity of extra page-formatting information that you didn't intend to bring along, which can play havoc with presentation on our website. The extra information often does not show up in any visible way when you are pasting the text into a web editing window, and so the confusing effects appear to pop up for no reason when the page is viewed.

Fortunately, our website content editor includes a special plain-text paste function that strips all the troublesome formatting while preserving basic formatting like italics, bold, paragraph transitions, etc. Here's what to do:

Open the content item into which you want to add text, and scroll to the editing field.
In your source program (MS Word or otherwise), select and copy the existing content that you want to copy into the web item you're editing.
Position the cursor in the web content editing field where you want the copied texts to go. Note the appearance of the editing toolbar at the top of the editing field.
In the editing toolbar, select either the "Paste as Plain Text" icon (to strip all formatting) or the "Paste from Word" icon (to remove troublesome formatting elements but preserve basic styles). A dialog box will appear. Follow the instructions in the dialog box.
Continue editing, reviewing, and submitting content in the normal manner.

Working with Images

If the image that you want to use is already stored on the web site, you can insert it into your page by clicking on the toolbar button that looks like a tree. Images can be manipulated after they are inserted, though it's best to use an image that is already the right size for your intended use. You can also add a "lead image" to many items, including news posts, exhibition objects, and publication items. Lead images will appear in a listing view of multiple items. If your image is not yet uploaded, follow the steps below to prepare the file for use.

Preparing Images for the ISAW Website

Before uploading any image to the ISAW website, please make sure that you have permission from the photographer or owner of the image to distribute it online. After obtaining permission, you will need to make a derivative image that meets certain specifications to ensure image quality and website performance. There are additional tips if you're working on slides for the Home Page Slider.

The following specifications are required for all images other than those destined for the home page slider:

Image Mode: RGB Color (8 bits/channel)
Resolution: 72 pixels/inch
Maximum pixel dimensions on the longest side: 1024
Color Profile: sRGB IEC61966-2.1
Format: JPEG (Quality: 80%, progressive, profile embedded)
Add appropriate metadata to the image, crediting the source/creator

The following steps can be followed to produce a derivative image that is ready to upload:

Open your original image in Adobe Photoshop.
From the menu bar, choose "Layer" -> "Flatten Image" (if this option is greyed out, go on to the next step).
Choose "Image" -> "Mode" -> "RBG Color".
Choose "Image" -> "Mode" -> "8 bits/channel".
Choose "Image" -> "Image Size..." to display the "Image Size" dialog box. In this box, enter the value 72 in the "Resolution" field. Then, find the larger of the values in the "Width" and "Height" fields and, if it is greater than 1024, replace it with 1024 (the value for the other axis will automatically recalculate). If the largest dimension is less than 1024, leave it as it was. Click the "OK" button.
Choose "Edit" -> "Convert to Profile" to display the "Convert to Profile" dialog box. In this box, set the "Destination Space Profile" to "sRGB IEC61966-2.1" and click the "OK" button. If the controls are greyed out and there is no value in the "Source Space Profile" field, you will need to use "Edit" -> "Assign Profile" to set the image color profile to the desired value (conversion therefore will not be required).
Add metadata. Choose "File" -> "File Info..." and select "Origin". Add as much information as you can about the image source. You can also go to the "Basic" section to add a specific copyright notice.
Choose "File" -> "Save for Web and Devices". In the resulting dialog box, look in the data pane to the right of the preview images. Below the "preset" combo box control, set the format combo box to "JPEG", then set the compression level combo box to "Very High" and put a check-mark in each of the "Progressive," "Embed Color Profile," and "Convert to sRGB" check boxes. Make sure the percentage value in the "Image Size" section is set to 100% and then click the Save button and follow the prompts to save the file to disk. Give it a short, mnemonic name that contains no spaces and ends in the extension ".jpg" (which Photoshop should provide for you).
You are now ready to go back to the website and upload this image.

Image Descriptions (Alternative Text)

Every image uploaded to the ISAW website must be accompanied by a short, textual description that can serve as an alternative for visually impaired visitors who are using screen reader software (this is both a Federal legal requirement and an NYU policy). In technical documentation, such a description is often called "alt(ernative) text." You can read more about the requirement in the "Non-Text Content" section of Understanding Content Accessibility Guidelines from the World-Wide Web Consortium. Steps for adding "alt text" to your images on the website follow in the next section of this guide.

Key requirements for good alternative text are:

Serve the same purpose and convey the same essential information as the image.
Keep it short.
If there is text visible in the image, repeat that text in the description (screen readers can't read images).

Upload and Embed an Image in Body Text:

When adding an image to the Body Text portion of a Page or other content item, follow these steps:

While editing the content item, insert the text cursor at the beginning of the paragraph to which you want to add the image.
Select the "Insert/Edit Image" (green tree) icon on the editor tool bar.
In the "Insert/Edit" dialog box, navigate to a folder on the website where you want to store the image, then select the "Upload" link.
In the "Add New Image" pane that appears at right, select the "Browse" button immediately below the "Upload file" subheading.
Locate the image file of interest on your local file system, select it, and then select the "Open" button.
Required: In the "Title" box, give the image a short title that will help you find it again on the website in the future.
Required: In the "Description" box, give the image a short textual description that will explain to other content creators what the image is about.
Select the "Upload" button.
Required: In the "Details" pane of the "Insert/Edit" dialog box, find the "Alt text" field and type in the alternative text you wish to use on the embedded version of the image.
Use the other controls in the "Details" pane to add captioning, adjust image placement, and designate image size, as desired.
Select the "OK" button.

Manually Embed an Image in Body Text

If you are manually editing the HTML in the Body Text of a Page or other Content Item, you can embed images using the standard <img> element. In order to comply with Federal law and NYU policy, you must include an "alt" attribute on the <img> element, and it must contain descriptive alternative text as explained above, sub "Description (Alternative Text)." For example:


<img src="banjo.jpg" 
     alt="A photograph of Pete Seeger's banjo on which one can read
          the words 'This machine surrounds hate and forces it to 
          surrender!"/>

Working with Links

When editing the "Body Text" field in a page, you can use the editing toolbar to add a link to a segment or text or to an image. There are two editing buttons that are used to manage links. The first, which is used to insert and edit links, looks a bit like 3 links in a chain. It appears just to the right of the the "insert image" button (which looks like a tree). The second button looks like a broken chain link.

Adding a Link

Select the text segment or image that you wish to turn into a link.
Click on the "insert/edit link" button in the editing toolbar to display the "Insert/Edit Link" dialog.

If you are linking to a resource on a website other than the ISAW website, click the "External" tab, and then enter the full URL (web address) in the "Link URL" field.
If you are linking to a content item elsewhere on the ISAW website, use the breadcrumbs at the top of the dialog box, the shortcuts on the left-hand side, or the search box to find and select the content item you are looking for. When you see the name of the item you're seeking in the right-hand pane, select the circular radio button to the left of the item name.

Scroll to the bottom of the "Insert/Edit Link" dialog box and click "Insert."

Editing an Existing Link

In the "Body Text" field, select the full text segment with the link that you want to edit.
In the editing toolbar, click the "insert/edit link" button.
Make the necessary changes in the "Insert/Edit Link" dialog box, scroll to the bottom of the dialog, and click "Update."

Removing a Link

In the "Body Text" field, select the full text segment with the link that you want to remove.
In the editing toolbar, click the "unlink" button to the immediate right of the link icon. The selected link in your text will disappear.

Creating a News Blog Item

One of the most common items to create is a news item for the blog. Here are the steps to add a new item, write your blog text, and set a date when it will be published (go live).

Adding a News Item

Login to the ISAW website.
Direct your browser to the ISAW News Blog (https://isaw.nyu.edu/news).
in the green menu bar, select "Add new..." and choose "News item" from the pop-up menu.
Fill out the news item form:
If editing of "short names" (URL slugs) has been enabled for your account, you will see a "Short name" field. Fill it with an appropriate value, ideally one that is short and mnemonic. Use only lowercase characters and insert a single hyphen for each space between words (e.g., tom-likes-cabbage).
Enter a short, appropriate "Title" for the news item (think: newspaper headline).
If desired, enter a "Summary" that will appear in search listings. If included, this summary will appear on the ISAW home page and on the news blog main page, as well as on the full news item. If omitted, summary information for the main and news blog pages will be extracted from the Body of the news item.
Enter the "Body Text" (i.e., the main content of the news item). Note that an editing toolbar appears at the top of your browser content pane when you insert a cursor into the "Body Text" field on the form. Please do not use Ctrl-V or Cmd-V or the browser edit->paste commands to insert content from Microsoft Word or another website. Instead, copy the content as you normally would, then click the "paste from Microsoft Word" button in the editing toolbar (it looks like a clipboard with a square Microsoft Word "W" logo on it). This prevents the introduction of potentially troublesome formatting from the original application while preserving basic formatting like bullets, italics, and bold.
If you want to include an image with the news item (recommended), first make sure that you have permission from its creator or owner to publish the image and that it has been formatted correctly, then scroll down and click the "choose file" button. Select the image file in the chooser that appears.
Add a short caption in the "Image Caption" box.
Select the "save" button.
Review the news item when the page reloads. If you need to make changes, select "Edit" in the brick-red toolbar to return to the news item form.
Once you are satisfied with the news item and have saved it for the final time, email the ISAW news coordinator to indicate that the item is ready for the next stage of review.

Setting the Publication Date

Suppose you are reviewing news items late in the evening on Friday. You'd like one of the items to appear on Monday morning in order to catch the rising news cycle, but you will be on an airplane at that time. The website makes it possible to move the item into "published" status now, but to set a future date and time for it to actually appear. Here's how:

Make sure you are logged into the website and that you have navigated to the news item in question.
On the green menu bar, select "Edit".
In the secondary menu bar, choose the "Dates" tab.
Using the controls provided under the "Publishing Date" heading, set the date and time (US Eastern) at which you want the item to appear. (There is no need to make any changes under the "Expiration Date" heading.)
Click the "Save" button.
Publish the news item as you normally would.

If you wish to verify that the item has not appeared publicly, open an "incognito window" (chrome), or "private browsing window" (firefox), and go to the main news blog without logging in.

NB: set the dates before you change the workflow state to "externally published" - otherwise the item will briefly appear until you get the dates set, and might in that interval get pushed to social media or noticed by someone anonymously browsing the site and thus noised abroad.

Changing the URL for a Page

To change the URL for an existing page or other content item in the site:

Login to the site.
Navigate to the parent (containing) folder. E.g., to change the URL of a profile for a particular visiting research scholar, navigate to Home > People > Visiting Research Scholars.
Click the "Contents" option in the editing menu bar.
In the list of content items, click the checkbox next to the item you wish to modify.
Scroll to the bottom of the page and click the "rename" button.
Make any desired changes in the "New Short Name" text box.
Click the "rename all" button.

Changing the Named Creators of a Page

By default, any page, news item, or other content you create will automatically be attributed to you in the byline. Here's how to change a byline manually.

Once you have created the content item, but before it is published, select "Edit" from the brick-red menu bar.
In the secondary editing menu (gray background with brick-red text), select the "Creators" tab.
In the "Creators" form, delete or add to the contents of the first text block. You can enter either website user account names or plain text. For multiple authors, put each person's information on a separate line in the box.
Select the "save" button at the bottom of the form.

Changing the Folder Display Mode

You can choose from a variety of options to format the appearance of a folder view. Using the "Display" menu in the green toolbar, you can select a summary listing, tiled view, or other template for displaying the contents of the folder. You can also select a specific item within the folder to be displayed as the default item, if you have designed a custom "landing page" for that folder (such as the guide landing page, or the exhibitions landing page).