NGNO Author/Editor How-To
Editorial Process
The editorial process for NGNO is managed by the J200 instructors, but works within the technical framework of our content management system, WordPress. This document describes the nuts and bolts of how NGNO is published.
In general, the process is this:
- Student posts a draft in WordPress and alerts the instructor or other editor.
- The instructor edits the piece as necessary, or kicks it back to the student for revision.
- When the instructor/editor is satisfied with the piece, it's made live and appears in all the right places on the site.
Learning Wordpress
WordPress is primarily known as a blogging platform, but is capable of managing non-blog sites as well. If you're new to WordPress, you may want to print this page and follow along as you try things for the first time. Most tasks are easier than they probably sound :)
Note that the J-School also maintains a testing and development installation of WordPress, which anyone can use as a practice sandbox. Log in here as [removed]. The dev installation of WordPress doesn't have the same public "theme" installed as NGNO, and it may not have certain plugins installed that NGNO has, so the experience won't be identical, but it's a good way to get your feet wet. If you need a change made to the devblog, let the webmaster know.
To write a post in WordPress, click the Write tab on the top horizontal menu. Enter the headline in the Title field. The story body goes in the Post field.
Important: Every piece consists of two sections: The summary and the actual story. Summaries are shown on the home page and on "index" pages such as category and monthly archive pages. Your summary should be around 40-70 words and should introduce (tease) the actual story. Then, on the formatting toolbar, click the button labeled "More." This will insert a separator mark. Enter the rest of the story below the <!--more--> separator.
You'll find an array of formatting buttons alongside the More button. Common ones are "b" for bold, "i" for italic, "b-quote" to create a blockquote, aka pullquote. To use them, select the text you want to format and click the button. You can create links by selecting the words you want linked, clicking the Link button, and pasting in a URL. The other formatting buttons are rarely used on NGNO.
Select the category or categories you want the piece to appear in from the selector on the right. Do not create new categories without instructor permission.
The "Post Slug" field will become part of the URL. It defaults to be the same as the headline, but we like short URLs, so please enter something shorter here. For example, if your headline is "Sprucing Up Fruitvale: Area Creates Tax District for Cleanup," your slug should probably be something like "fruitvale" or "sprucing-up-fruitvale." Do not use spaces in slugs.
You can select whether comments should be enabled for the story or not. This question is generally up to the instructor [POLICY ON COMMENTS?].
To preview your story and see how it will look in its final state, click the button "Save and Continue Editing." Then hold down the Cmd (Apple) key and click the Preview link at the top to open the rendered story in a new window. Check the story for formatting and correctness.
To edit an existing/older piece, click Manage > Posts and find the story in question. There's a search field at the top to help find older pieces.
If you have any unpublished drafts in the system, you'll see links to them at the tops of the Manage and Write pages.
If you have your own account on the system, you can change your password and email address by clicking "My Profile" at the top right. In the Profile section, you'll also find a checkbox labeled "Use the rich visual editor." The "rich" editor hides the HTML as you add formatting and media content to a story. This may seem nice, but you'll find as you start working with media in stories that it's essential to be able to work with the HTML directly in some instances. Therefore, the rich editor is turned off on all new accounts by default. You can turn it back on, but will probably want to disable it again when you start working with multimedia content.
To learn more about WordPress, search the web for "learning wordpress."
Creating Accounts / Byline Types
Bylines on NGNO are created in one of two ways: Either they're autogenerated from the author's login information, or they're pulled from a separate "byline" field. In general, most NGNO users will have their own WordPress accounts, and will have their bylines generated automatically.
Because there are two ways of generating bylines, it is not essential that every author on the system have their own login. Ultimately this is up to the instructor of each J200 class.
Instructors can create accounts on the system for their students by going to the Users tab in WordPress and scrolling down to the Add New User section. Choose "Author" from the "Role" picklist.
If a user has their own login on the system and posts their own story, the byline will be theirs automatically. However, if a student is only going to post one or two stories in the semester, and if the instructor has a GSR whose responsibility it is to edit/post stories for other students, then the student doesn't really need an account.
If a user does have their own account on the system but someone else (an editor) is posting for them, the editor should choose the correct author from the Post Author picklist to the right of the story editing page in WordPress.
If a user does not have their own account on the system and someone else is posting the story from the "student" login, the editor should scroll down to the Custom Fields section below the post and select "byline" from the picklist. In the "Value" field they should enter:
name=Joe Smith
email=joe@smith.com
(substituting the actual name and email address of course). Regardless the method, the correct byline will appear on the published story.
Creating a byline for a story by someone who does not have an account in WordPress.
This method works only when the "official" author of the story is set to "student."
Style Guide
Because all J200 classes are collaborating on a single publication here, it's important that we all use the same formatting styles.
Headlines should be in Headline Case: All words initial-capped except for "the, for, a, to, and, of, an."
Datelines should be the first string in the story body (NOT in the summary!), in all caps, followed by a single space, a single dash, and another single space. For example:
OAKLAND - A mother and her two-year-old daughter were....
Do not enter the date or your personal byline into the summary or the body text. The date is handled automatically, and can be altered with the Date selector at the right. See above for notes on bylines.
[INSTRUCTORS - PLEASE PROVIDE ADDITIONAL STYLE GUIDELINES]
Content Areas
As described above, each story can belong to one or more categories (called "Departments" on the homepage). The NGNO homepage consists of stories pulled in various ways from various categories. You'll need to know the following rules in order to control what appears where on the homepage.
The top/main story will always be the most recently added story in the category called "Featured 1."
The two featured stories in the middle sidebar are the two most recently added stories in the category called "Featured 2."
Other stories in the system appear below the main featured story in chronological order. Stories in Featured 1 or 2 or Breaking News are excluded from this section.
Breaking News appears in its own section in the second sidebar.
The RSS feeds are pulled in from external sites. J200 instructors decide which sites to pull RSS content from.
Comments
Any story is optionally open for public comments. Comments are a powerful way to enrich the scope and impact of almost any story. However, whether a given story actually should accept public comments is up to each J200 instructor.
Comments are automatically emailed to the author of the story IF that author has their own account on the system.
Any content system that accepts comments will get heavily spammed. While we have a very good two-stage comment spam protection system, inevitably some will get through the gauntlet onto the live site. It is critical that spam comments never be allowed to remain on the live site for long - if they do, the site will be hammered 10x harder by spambots the next day.
A system called Akismet will automatically detect 99% of spammy comments, doing most of the heavy lifting for us. Visit the Comments section on the WordPress back-end to see what Akismet has caught recently.
Comments not identified by Akismet as spam are "moderated" the first time. This means that the first time Joe Blow leaves a legitimate comment, it must be approved by the story author before it goes live on the site. Story authors will get an email asking them to approve the moderated comment. Once approved, future comments from Joe Blow will go live on the site automatically.
Blogging / Breaking News
The "Breaking News" section of the site functions as a sort of blog, and is intended to be used for quick shots on developing stories. To use it, simply post to the Breaking News category. Instructors will describe how the Breaking News section is different from the rest of the site editorially.
Special Reports
J200 classes sometimes develop their class output as a custom web site, independent of the NGNO framework. The disadvantage of this is that they lose all of the content management system features described in this document, including public comments, searchability, easy multimedia insertion, etc. The advantage is that they're not constrained by an externally imposed layout and design.
If a class produces one of these "Special Reports" on their own, all they have to do is have it technically vetted by the webmaster, who will then manually upload it to the server and link to it from the Special Reports page.
Multimedia
Virtually any type of media element (images, audio, video, Flash, etc.) can be added to any story. It's critical that media be "web-ready" before uploading. This means that images are 72dpi and set to the resolution described below, audio is compressed MP3 (not uncompressed AIFF or WAV), video is properly compressed and sized, etc. These skills will be taught in the multimedia portions of your instruction.
An "Upload" section appears below each post body in WordPress. Click "Browse" and navigate to your web-ready media file. Give it a title and, for image files, a description. See the specific media type instructions below for more.
To insert uploaded media in the story, position your cursor in the story body where you want the media to appear and click the button labeled "Send to Editor."
To change how the media is inserted, click the "Browse" button, select the media's thumbnail, and click "Edit." After making changes, you can send the media back into the story body (removing the original HTML for that media first of course).
Important: During the production of a story, it is not uncommon to go through many versions of the same media element before getting everything just right. For example, you may have a 30MB audio file to add to the site's Podcast section. After producing your first draft, you might find a mistake in the audio, and upload a 2nd version. And a 3rd, and so on. All of these large files will take up room on the server, bloat our backups, and cause headaches for the admins. Please delete any images, audio, video, or other media that is not actually used in your story. You can do this by returning to the story editing page in WordPress and scrolling down to the "Upload" section. Click the Browse tab and you'll see all media that's been uploaded for that story. Click a media thumbnail, then click Edit. You'll find a Delete button there. Thanks for your help keeping the server orphan-free.
Adding Images
As described above, each story has a summary section and a body section. The summary appears on the homepage and the body appears on the main story page. Summary areas on the homepage have a different width than body areas on story pages. Therefore, if you want a smaller version of an image to appear in the summary on the homepage, you will need two versions of it in the story - a "thumbnail" in the summary section appropriately sized for the column it will live in, and a full-size version for use in the story body. If you don't need a thumbnail to appear on the homepage, then a single full-size version for the story body is sufficient.
While WordPress can resize images for you during upload, we strongly recommend preparing them in Photoshop first. This gives you the chance to optimize the image in other ways first. Plus Photoshop does excellent image scaling. It also has an excellent "Save for Web" feature to help you make the file size small while keeping the image quality high. However, feel free to experiment with the image resizing feature in WordPress.
To make a photograph web-ready, open it in Photoshop, perform any image optimizations or cropping you like, then pull down Image > Image Size. Set its dpi to 72 first, then set its resolution.
The maximum width for images in the main story body is 640px.
The maximum width for images in the homepage content column is 430px.
The maximum width for images in the homepage sidebar is 170px.
Image height is not important.
There is no need to create your thumbnail in Photoshop - once your main image is prepared, you can let WordPress create the thumbnail for you.
While still in Photoshop, pull down File > Save for Web. On the right, select JPEG, quality=60 and export your finished image file.
For story body images: In the Upload dialog, give the image a title and a description. The description will become the image's caption. If you've already prepared your images in Photoshop, uncheck the "Resize" checkboxes in WordPress. After upload is complete, you'll get a series of options that let you select whether to create and display a thumbnail version or not; whether to align the image left, right, or not at all; whether to display a caption with the image; and whether to link the image to itself, to the current page, or to leave it unlinked. It may take some experimentation to get comfortable with these controls.
Editing an image's linking attributes.
Left-align an image
You do NOT need to upload your image again to create the thumbnail version. You created both a full-size version and a thumbnail version on the server when you first uploaded it. To insert the 2nd version of your image, select it in the image browser and select a new set of options, this time selecting "Thumbnail" rather than full-size version. Link it to nothing.
When you've got everything configured properly, click Send to Editor. Make sure that the text you want to wrap is butted up against the end of the img tag in the story editor, not on a line by itself.
The published version will look like this:
Adding MP3 Audio / Podcasting
Any story on NGNO can have embedded audio as an MP3 file. In addition, any story with embedded audio that's associated with the "Podcast" category in WordPress will automatically appear as part of the NGNO Podcast.
Export your finished audio as compressed MP3. Bitrate is important! For spoken word, 64kbps is generally adequate. If it sounds poor, try exporting at 96kbps or even 128kbps. You can use Audacity, SoundTrack Pro, iTunes, or QuickTime Pro to generate MP3 files from your completed audio. These skills should be taught in your multimedia instruction.
DO NOT upload uncompressed AIFF or WAV files to NGNO.
After uploading an MP3 file, select "Link to File" and insert the linking HTML code into the story body. You will probably want to change the link text to read something like "Listen to interview with Ed McMahon."
Adding QuickTime Video
Video should be uploaded either in Flash format (see below) or as QuickTime. Video should be compressed according to the recommendations in our multimedia guides. However, for this site you can optionally get away with the wider resolution of 420x315. Check the file size of your exported video carefully -- your web-ready video files should consume no more than 4MBs per minute of video (in other words, a 4-minute video should not be larger than around 16MBs). If your file size is too large, then something is wrong.
DO NOT upload uncompressed or improperly compressed video to NGNO.
After uploading a compressed QuickTime file, select "Link to File" and insert the linking HTML code into the story body. Now edit out everything but the actual URL for the uploaded video. You should be left with something like:
http://journalism.berkeley.edu/ngno/.../dogtown.mov
(Sample URL shortened for brevity). Now surround this URL with code so it looks similar to the following:
[QUICKTIME http://journalism.berkeley.edu/ngno/.../dogtown.mov 320 256 false true]
Notice the four parameters at the end of this string. The two numbers are the width and height of the video. In the example above, note that the height is 256px, rather than the usual 240px. This is because the QuickTime controller bar is always exactly 16px high. You must add 16px to the height if you use a controller, or else it will be invisible.
The first true/false option lets you control "autoplay" - whether the video should play automatically when the page loads. When this is set to false, the user must click the play button to watch the video.
The second true/false option lets you specify whether the movie will have a "controller" beneath it (highly recommended).
A final option is to use a "poster frame" to stand in for the video. Using a poster frame means that the user is not forced to download all 12MBs of your video file just because they visited the page. Instead, a one-frame movie loads where the movie goes. Clicking the poster frame causes the movie to load. Unfortunately, you cannot use a standard JPEG image as a poster frame - you must use a one-frame QuickTime movie. To create one, launch QuickTime player and import an image file (which could be a still from the video you want to show, or anything else). Then pull down File > Save As and choose "self-contained movie." Give your one-frame movie a name like koipond-poster.mov. Upload the poster frame into the site. Now you've got your compressed video file (let's say it's koipond.mov) and a poster frame for it. Insert the whole wad into your story like this:
[QUICKTIME http://journ.../koipond.mov http://journ.../koipond-poster.mov 320 256 false true]
In other words, specify the full URL to the movie file, followed by a space, followed by the full URL to the poster frame, followed by the parameters.
Adding Flash
Flash media can be embedded into any story page. It should have a maximum canvas size of 640px wide.
After uploading a finished Flash .swf file (do not upload .fla files!), select "Link to File" and insert the linking HTML code into the story body. Now edit out everything but the actual URL for the uploaded Flash. You should be left with something like:
http://journalism.berkeley.edu/ngno/.../pyramids.swf
(Sample URL shortened for brevity). Now surround this URL with code so it looks similar to the following:
[kml_flashembed movie="http://journalism.berkeley.edu/ngno/.../pyramids.swf"
width="640" height="480" /]
(The above should be on a single line). If your Flash presentation requires a particular version of Flash to be installed on the viewer's computer, you can also specify that by adding an additional parameter, e.g. fversion="9". With that parameter attached, a user with Flash 8 installed on their computer would be prompted to upgrade their Flash plugin before viewing the content.
That's all there is to it!
Adding Other Types of Multimedia (e.g. SoundSlides)
In some circumstances, classes or individuals may come up with unique multimedia presentations, consisting of several media elements, complete with their own HTML. A good example of this is the "mini site" generated when you create a SoundSlides slideshow.
There is no way to upload a complete folder full of media elements through WordPress (or any content management system that I know of). If you have a SoundSlides or other multimedia presentation to deliver, first see the documentation on our multimedia training site so you know your way around. Once you've published your project, you'll have a "Publish to Web" folder inside your project folder. Rename that folder with the project name (all lowercase, no spaces or punctuation), drag that folder to a network location such as Group Folders, and tell the webmaster where to get it. I'll place it on the web server for you and give you some embed code to use in your story.
Making sure your multimedia pieces get the right icon
Items that are uploaded directly through WordPress (like images) automatically get a small icon below the post entry on the homepage to indicate that media is attached. But because SoundSlides pieces don't get uploaded through WordPress, they don't get this icon automatically. To enable the icon for your piece, look in the post editor the section called "Custom Fields." Select "has_multimedia" from the picklist and enter a value of "1" or "true." Re-save the post and the icon will appear on the homepage.