US Supreme Court Building in the Spotlight

Portfolio: Creating a “Spotlight” Issue

Posted on by sgkubrak

This is a comprehensive document dealing with the ins and outs of creating the “Spotlight” internal newsletter for the Administrative Offices of the US Courts system. The “Spotlight” was seen by all of the thousand or so employees at the location on Capital Hill, including all the Justices of the Supreme Court. Graphics have been redacted and names changed for security purposes.

Creating a “Spotlight” Issue

This document is broken into 5 sections:

  • Creating the homepage
  • Adding Images as assets
  • Creating articles
  • Attaching assets to articles
  • Creating redirects

Getting Started With Spotlight

Creating the homepage

The simplest method for creating most pages in Spotlight is to clone a page from the previous month.

  1. From the AOWeb CMS, click 2011 archive
  2. Click on any of the existing month pages
  3. Select ‘clone’ from the menu
  4. Change the dates on the information page to the appropriate month
  5. Update the meta tags under the tab named “meta”
  6. Record the Page ID for the newly created page

Once the main page has been created, the Navigation for this issue must be created.

  1. Go to the root of the CMS menu
  2. Click navigation
  3. Find the latest Spotlight navigation, something like ”Spotlight_2011_ArchiveMay_2011_nav”
  4. Clone it
  5. Update the information on the first two tabs to reflect the current issue
  6. On the layout page add the Page ID for the issue created in step 6 above

Adding Images to the asset folder:

This is generally a 3 step process that involves adding images to an asset directory, adding slideshows directly to the server (if they are needed), and adding text and markup to the actual article pages.

  1. From the root of the CMS on the assets page, open the Home directory, and then open the Spotlight directory.
  2. Create a new folder to reflect this month’s issue, name it yyyy-mm.

In this folder, there needs to be a sub folder for each group of images that have thumbnails. For example, if there is an article called “green living tips”, that has images with enlargements, there needs to be a folder called “green” with another folder for thumbnails of those images. That folder should be called “thumbs”. In this folder should be put any image related to that article that is named tn_xxxx. This image must be named using that convention and must be named exactly as the full sized image is named, minus the tn_. For example a fullsized image called “electric_car.jpg“ should have a corresponding thumbnail called ”th_electric_car.jpg”

IMAGE REDACTED FOR SECURITY.

Take note of the Folder ID for these folders as they are important for use in the egrail functions in the article pages.

Adding other Spotlight Images

All other images, can just be dumped directly into the root folder for that month, since these images will be referenced directly. These images may be in the following formats xxxx.jpg, xxxx_main.jpg or extended.jpg. Other conventions are possible but it is usually the same theme. When adding images that are in folders (i.e. green1.jpg in the screen shot above) The image caption (from captions.doc) must be added in the description field. Please use html encoded special characters (‘ instead of apostrophes etc.) as the egrail will interpret any quotation marks as the end of the image tag, resulting in the image breaking.

Adding slideshows to the Spotlight server:

This is the only time anything should be added directly to the live servers. However, this is done because there is generally not enough time to host the slideshow on the test server then move it and change the code. The folder provided can be dropped into the month folder on jdc62 and 63. The month folder will not exist as this is the live server and the rest of the site has not yet been deployed. The folder must be created and proper permissions given. The slideshow folder from OPAF will probably be named “publish_to_web” or something similar, but it would be better to rename it to something memorable and simple since it will be referenced in the code. In the April 2011 issue a slideshow of the new electrical generators was included, here is that file structure:

IMAGE REDACTED FOR SECURITY.

Note the file structure and that it is the Spotlight directory with the capital “S” not the lower case “s”. In this example you can see the generator slideshow folder as well as completed files and redirects. You will not see these html files when creating the slideshow.

Adding the article text and markup:

There are several types of article pages, we will begin with the standard article. Most of the content conventions in the standard article hold in the other article pages.

Spotlight Standard Article

This article has no special bells and whistles it’s simply text with possibly a few pictures added.

On the information tab, add the name, and use Article for the Layout. In the Attributes tab select the “Spotlight Issue Content-LightView” template. In the category section you must select “Spotlight-Content”.

Firstly, the layout tab is where the content is added. The content text uses <p></p> around paragraphs provided. Em dashes need to be replaced with the html &mdash; as they will not display properly on all browsers. Generally it makes sense to html encode all special characters anywhere in Spotlight when in doubt, as it saves a lot of headaches in debugging/proofing. Adding images to the articles will be explained in a later section.

Spotlight Feature Article

On the information tab, add the name, but use Feature_Article for the Layout. In the Attributes tab select the “Spotlight Issue Content – LightView” template. In the category section you must select “Spotlight – Content” and “Spotlight – Featured”

IMAGE REDACTED FOR SECURITY.

Featured articles have special information in their template pages. After the body is the teaser title. This is a small title that will be used on the front page of Spotlight. This information comes from the Teaser Text.doc that is provided by OPAF. Under that field is another called teaser. This is for text that will be displayed below the title on the homepage. This text is located in the same document as before, right under the teaser title.

Under the teaser text is the feature image. This is the image for the article that goes on the main page of Spotlight and is usually titled as xxxx_main.jpg. It should have already been added as an asset explained in the images section of this document. Browse to find the appropriate files and add it. There is no reason to add align or h/vspace information. In the feature_image_alt box add the alt text that is provided in the Layout Cover Note.doc file. It is under the Main Feature Alt tag column. No meta tags are needed.

Spotlight Profile Article

These are standardized for every issue and it is a simple matter of following the pattern established in the other issues. Simply clone from a previous issue and change all the locations of the files. The image file for these documents is usually titled profile_xxxx.jpg.

Personnel Actions/Service Anniversaries

These two articles are standardized as well and contain no images. It is a simple matter of cloning from one month to the next and replacing the text.

All articles that have links that leave the DCN environment must use a redirect page as per our SOP. The August 2011 issue has several examples of redirects.

Adding images to the Spotlight articles:

Indeed, there are many ways images are used in these article pages. This section will attempt to highlight the nuances endemic to these pages. Again if there is anything unclear outlined here, please refer to a similar page from another month’s issue.

Extended caption images:

This type of page is similar to a standard article page, but has one large image in the middle of the page. This is added by directly adding the image asset to the page. In the April 2011 issue there is an extended caption called “And the winner is…” On the layout tab add the reference to the image as such:

<div style=“text-align:center;”>
<img src=“AssetUrl(36579)” alt=“Photo of Henry Weeks” title=“Photo of Henry Weeks” align=“top”
border=“0”></a> 
</div>

This is the example from that month. Change the AssetUrl id to the one for your new article, and change the alt and title tags to match.

Gallery images:

This displays several thumbnail images on one page with a clickable image rotator added as seen in this page: http://wcms.ao.dcn:8080/Spotlight/2011/Archive/April_2011/Financial_Forums_Take_Off_for_Future.html.

These images are assets added in a table above all the content text. The code is on that page and can be copied and pasted into a new page.

<td summary=“project”>EgrailUserFunction(AssetList, *7094*,,<div class=“photoLBtright”><a href=“wms_asset_url” class=“lightview” rel=“gallery gall” title=”wms_asset_description”><img src=“/img/as/sets/*7095*/tn_wms_asset_name” alt=“Image of Financial Forum”…

In the code above, the highlighted numbers are the ID’s for the image directory and the thumbnail, respectively, for that article (see the section on adding images above for reference). These have to be added to every image to display. The last line of the egrail adds the counter “0,1,aid”, those must be incremented from more than one image. 0,1 is one image; 1,1 is for 2 images, 2,1 for 3 etc.

No enlargement images

Often included in articles that have just one thumbnail sized image with no enlargement. They are similar to extended caption pages. In the April 2011 /Spotlight/article, “Resident Kadzban Helps Revamp Communications System” the code for including the non-enlargeable image is:

<img src=“AssetUrl(36582)” alt=“Image of Jason Kadzban” title=“Image of Jason Kadzban” align=“top” border=“0”><div class=“photoCaption”>Jason Kadzban</div>

Simply copying the code and changing the highlighted asset ID, as well as the title and alt tags will add this image. This article also shows how to add gallery images which is included in the .

“Around the AO/ Where in the World” images

These are very similar to gallery pages, but the galleries tend to be broken up throughout the article. In the April 2011 article “Where in the World Are AO Employees?” the gallery is broken into 3 pieces. Individual galleries are inserted in individual tables. Generally the tables for the images sit above the text you want to display. Since they are all the same article, they all use the same # notation as explained above.

Slideshow images

Slideshow images look similar to extended captions, but the code is much different. There is a slideshow in the April 2011 article “TMFJB Generator Project Complete” that the code can be copied and pasted from the page.

In the link
<a href=“#slideshow’ class=“lightview’ title=“topclose:true, autosize:true”><img src=“AssetUrl(*38042*)” alt=“Link to slideshow” title=“Link to slideshow” align=“top” class=“photoBorder”></a>
the highlighted Asset is the asset id for the image added in the images section. The next bit of code is the addition of the flash object to include the show. The code must be changed in two places as both are the references to the file locations that were added in the above section. http://aoweb.ao.dcn/Spotlight/2011_Archive/April_2011/generator/soundslider.swf?size=1&format=xml. The highlighted text shows the name of the folder where the slideshow lives.

Movie images

Pages that have movies embedded in them are the same as ‘extended caption’ pages. They only need the link to the file (hosted on another server) to function. September 2010 “AO Day at Nationals Park” has an example of that code.

Creating redirects

Redirect pages need to be created for the new pages when, and only when, the site is deployed, these pages live on jdc62 and jdc63. For example for May2010 /app01/iplanet/servers/docs/Spotlight/2010_Archive. These pages have to be appended with “2” to show that it is a redirect. Simply copy the Entire_Issue2.html page and make changes for all the pages in this current month. All of the urls must be sent along with the “deployed” email so that OPAF can send them in their email. i.e.

“The site is deployed, here are the redirects:
http://aoweb.ao.dcn/Spotlight/2010_Archive/May20102.html
http://aoweb.ao.dcn/Spotlight/2010_Archive/May_2010/Entire_Issue2.html
… ”

This concludes this SOP. Changes may be made in the future and this document will be updated appropriately.