Now that you have learned the concepts and content creation methods of a page, you will now learn about other types of documents, such as Articles. In this page's tutorial, you will learn what an Article is and how to create one. 

Anatomy of an Article

An Article is a type of document that displays a story or news piece. This is what an Article looks like on a website: 

anatomy-article.png

Creating Articles

Step 1: add an Article to your website
  1. In the top-left corner of Cascade, select: Add Content > [your website] > Article
    • Note: Some Cascade accounts will have a "News" option in place of "Article." If you do not see "Article" in your website's folder within the "Add Content" menu, select "News" (both will create an Article). If you do not see either of those options, or if you do not see your folder in the "Add Content" menu, contact itweb@jmu.edu and they will set you up with that menu option.
Step 2: Name the Article

To name an Article, add the month and day of publishing to the beginning of Article file names. For example, a news item titled "Professor Receives Grant" scheduled for publishing on March 8, 2019 should be named:

03-08-professor-receives-grant

Step 3: Select a placement folder

Place all Articles in the JMU site's "News" folder. Within the News folder should be a folder for your website, and within your website folder should be folders by year and sometimes by month. You should place your Articles in the folders corresponding to the year and/or month for its publication date. To navigate to your website's News placement folder, click on the Placement Folder field and select: Browse > JMU > News > [your website] > [year]. Follow along with the example below:

article-placement-folder.gif

If your website's News folder does not have a folder for the current year, please ask itweb@jmu.edu to provide you with one.

Step 4: Start filling out some basic fields
  1. Enter the Article title in both Title fields (less than 30 characters)
  2. Enter a publish date and/or time
    • Note: If you want to write articles before its publish date, uncheck "include when indexing" under the Configure tab so that the article will not appear in any feed until it is published; if you do not uncheck this box before the article is published, it will appear in your feed if tagged and will lead users to a broken link. Be sure to recheck the box when the article is published.

      include-when-indexing-checkbox.png

  3. Add an optional subtitle
  4. Enter a 1-2 sentence summary of the Article in the Summary field
  5. Enter your e-ID (not your full name). Your e-ID will be converted to your full name automatically. If your e-ID is not converted, contact marketingemail@jmu.edu to discuss author permissions to have your e-ID added to this block.

Once these fields are filled out, continue.

Tagging Articles

When you create Articles, you will also create Feeds for Articles to appear in. For Feeds to know which Articles to display, you must assign tags to your Articles. For example, an Article with a "JMU Home" tag will appear on the JMU homepage and the JMU News homepage. An "education" tag will make the Article appear on the Education topic page, just as a "business" tag would make it appear on the Business topic page. 

To add a tag to an Article:

  1. In the Article's top toolbar, select: Edit > Content tab
  2. Scroll down to "Tags" within the "Primary Skin Page" section

article-tags.png

Tagging Articles with your department tag


In the tags section, you should see that your department tag is already added. If you do not see your department tag, contact itweb@jmu.edu.

Tagging Articles with another department's tag


If you wish to add a second tag that is not your own, see instructions for another department's tag.

Note: "Related Articles" feeds will only show related Articles with the same first tag as the current Article. For example, if an Article has the first tag "_tags/_topics/business" and a second tag "_tags/source/college_of_business," the Related Articles" section will ONLY have articles tagged "_tags/_topics/business."

Adding Pull-Quotes

You can use pull-quotes within your articles to draw attention to a quote. To create a pull-quote:

  1. Navigate to your Article and select Edit > Content tab in the top toolbar
  2. Scroll to the location you want the pull-quote and type "PUT PULL-QUOTE HERE"
  3. Click on the "<>" icon in your WYSIWYG toolbar and scroll to the location you want the pull-quote to reside.
  4. Copy and paste this code into the HTML, replacing your "PUT PULL-QUOTE HERE". Then edit the text in bold with your quote and person's name. 
    • Note: "sidebar-right" could also be "sidebar-left" if you want the pullquote to be left-aligned.

      <table border="0" class="sidebar-right">
      <tbody>
      <tr>
      <td style="width: 300px;">
      <p class="pullquote">"HERE IS THE QUOTE"</p>
      <p class="pullquote-attribution">PERSON'S NAME</p>
      </td>
      </tr>
      </tbody>
      </table>

pullquote.png

Adding Images

Most article images will require text-wrapping. See Adding Images for details about right-/left-aligned images, captions, and wrapping images with text.

If you wish to embed a single tweet or Facebook post as an image in your Article, use this Embed Social Media Posts Guide.

ARTICLE width height
lead 1000 600
right-aligned 310 varied
left-aligned 310 varied

 

Adding Teasers

The teaser is the brief summary that will show with the Article when it appears in a Feed:

feed-tumbnail.png

To add a teaser, select: 

  1. "Edit" in the top toolbar of the Article
  2. Scroll down to the "Teaser" text box and type your summary. 

article-teaser.png

Adding Footnotes

The footnote is the space at the bottom of the Article where you place references, an additional statement about the author, and/or additional notes you want to include.

footnote.png

To add a footnote, select:

  1. "Edit" in the top toolbar of the article
  2. Scroll down to "Footnote" and add the appropriate text.

Adding Lead Images/Videos

Lead images/videos are displayed at the top of the Article and are used to represent the Article in Feeds and on Facebook. To create a lead image or lead video for your Article, Feeds, and Facebook, follow these steps:

Adding Lead Images


Step 1: Add Article Image to _images folder
  1.   Select: Add Content > _Responsive > Article Image


    create-article-image.png
  2. Place the Article Image in your appropriate images folder (select: Browse > JMU > _images > [your website]) 

Step 2: Add image to thumbnail field

1. Creating an "Article Image" as specified above will automatically create a thumbnail image (172x103) beside your 1000x600 lead image within the folder you placed the Article Image. Choose the automatically created thumbnail image here:

thumbnail.png

If you do not supply a thumbnail image, Cascade will substitute a random JMU thumbnail like this. 

article-feed2.png

Step 3: Add lead image/video to Article and Facebook
  1. On the Article, select: Edit > Content tab
  2. Scroll down to the "Add lead image" field and select:
    • Browse > JMU > _images > [your website] > [the image you saved from step 1]
  3. In the Lead Image/Video Caption field, add an appropriate caption
    • Note: This caption will appear under the Lead Image on the Article as well as on Facebook

      lead-image-caption.png
  4. In the Facebook image field, browse for the image the same way you did in the instruction above, however Facebook will use the lead image if you do not specify a Facebook image here.  If for some reason you want the Facebook image to be different from the lead image, you can specify a Facebook image.

Adding Lead Videos


If you want to have a lead video at the top of your Article in place of a lead image, copy and paste the video's URL into the "Lead Video URL" field.

  1. Copy the video's URL (for example: https://www.youtube.com/watch?v=rIydfi1juZc) from Youtube or Vimeo
  2. Click "Edit" in the top toolbar of the Article, and then select the Content tab
  3. Scroll down until you see the "Lead Video URL" field

    lead-video-url-field.png
  4. Paste the URL in the field

We still encourage you to upload a lead image and thumbnail image in addition to pasting the video so that a more related image will appear in a feed and Facebook posts rather than a generic image. This will not affect what appears at the top of the Article; the video's URL will override any lead image uploaded.

Updating Articles

When an Article's information has been edited, a link to the Article's update will appear at the top of the Article for readers to click on: 

update1.png

When readers click the "Read update" link, the link's anchor will take the reader to the bottom of the Article where the new information is displayed beneath a horizontal line:

 

update2.png

 

Once you have updated the Article's content, follow these steps to add a "Read Update" and link to the update at the bottom: 

Step 1: Add "Read Update" link
  1. On the Article, select: Edit > Content tab
  2. In the WYSIWYG content field, add: "Updated [Month] [Day], [Year] - Read update" on a new line at the top, above the existing article content
    • Note: Be sure to adjust the date accordingly and apply boldface like the example above
Step 2: Add an anchor to "Read Update"

Next, you will need to add an anchor to "Read Update" so that when readers click on the link, it will take them to the bottom of the Article where the update is below the horizontal line. Follow these steps to add an anchor:

  1. In the WYSIWYG content field, highlight "Read Update"
  2. Select the anchor icon in the content field's toolbar (looks like a ribbon)
  3. Add an anchor I.D. that is relevant to the content to where you are anchoring (in this case, you could type "update")
  4. Scroll down to the updated information in the article and highlight the first word within the update
  5. Select the anchor icon and make the anchor I.D. the same as the I.D. you assigned to "Read Update"
    • If you chose "update" as the "Read Update" anchor I.D., then the anchor for the first word in the update should also be "update"

Configuring Articles

Hiding "related articles"


Check both "No Block" fields to remove the block and format in Region 22

artcon1.png

 

Hiding the social media icons


Set the block in "EXTENDEDCSS" Region to the "article-hide-social-icons" shared block

artcon2.png

Back to Top