Creating a News Article in Drupal

Login

You should log in via CAS, which is the same login you use for myUSF and the old USFconnect functions.

  1. Go to w​ww.usfca.edu/user
  2. Click on “​L​og in using CAS” ​l​ink
  3. If you are not redirected to CAS page, hit the yellow LOG IN button
  4. Log in with your myUSF name and password
  5. You are logged in to Drupal when you see the black control bar along the top of your screen

Accessing the “News” Content Type

  • On the black admin bar at the top of the page, find “CONTENT” and pull down and select “Add Content.”
  • From the Content Type list, click “NEWS.

Editing the “News” Content Type

  • Select a Section. This will connect your content to the proper editorial group. This is a required field. Either select an area related to your office or department at USF or select the section titled News.
  • Add an Administrative Title. This field is the title value that shows up in the administrative interfaces, such as the edit window list. This field is required. The Administrative Title can be the title of the news story
  • Add a Display Title. This is the headline of the news story. This field is required.
  • Add a Sub Title. This optional field can be used to add a subtitle to your news story.
  • Add the Original Author. This is the author byline of the news article.

Adding images into the “News” Content Type

In Content Carousal Images. This field allows you to add a single image or create a multi-image carousel. The image will appear full width at the top of the news article. It should be a high-resolution image, not smaller than 775px x 436px.

  • Click “Browse” and get a pop-up window.
  • The top tabs give you three options for adding an image:
    • Upload a file from your hard drive
    • Select an image on the web using its URL
    • Select an image that is already uploaded (Library or My files) to Drupal.
  • After uploading a file, choose a folder where image will reside.
  • Click “Next.”
  • Choose a media type. If you are adding just one photo, select “IMAGE.” If adding multiple images, select “CAROUSEL MEDIA OBJECT.”
  • For “IMAGE,” fill in the image Name, Alt Text, and Title Text, and select a Media Folder again. For “CAROUSEL MEDIA OBJECT,” fill in name and a file caption. Then select a Media Folder. For destination, select “PUBLIC” file.
  • Click “Save.”
  • A thumbnail of the image will appear. Three manual crops are required using the pull down menu. The image will appear in the editing light box. For most images, select “Maximize selection” button in the bottom right corner. You may drag the small square points at the edges of the photo to adjust the crop.
  • Click “Save.”
  • Repeat these steps to add additional images to a carousel.
  • You can reorder the sequence of photos by dragging the “crosshairs” icon located to the right of the photo thumbnails.

Adding Tags and Text

Add News Terms. News terms are used to place the news story in various feeds and “Related News” areas around the website.

Select a News Category. Select one news category, used for filtered searches in the News & Media section of the site.

Add text to Body. The Body Field is a rich text editor-powered content area that allows you to place the content of the page.

  • Text Format. Located just below the Body text box, this feature allows you to select the format of the text. Filtered HTML removes code for easier use. Full HTML shows the full code. TIP: WSIWYG functionality only works when using “Filtered HTML.”
  • Follow good HTML practice and only use headers in descending order.
  • Inline images can also be inserted here. Click on the “Add Media” button on the far right of the tool bar. You can upload a new image or use one from the library. Set size of the image via the Options -> Display As dropdown menu on the second popup screen. Images align to the right by default with padding applied. 
  • Be careful with cutting and pasting text into the body area as you can copy unwanted code. Always double check pasted coded by changing the Text Format dropdown menu to “Full HTML” to make sure code remains simple and clean.

Adding Video and Supplemental Content

Embedding Video. When embedding a video from Vimeo or YouTube, insert the embed code using “Full HTML.” Use a “customized” width of 750 pixels for the video to ensure the video spans the width of the content column.

Below Content Title. If you plan to add an image carousel below the news story, place the title here. It is optional.

Below Content Carousel Images. Add images for the carousel here.

Below Content Node Reference. You can add certain components, such as an In Content Flexible Callout or an In Content Image/Video Callout, below the news story. To add, use the Node ID or start typing the title of the component. The name should appear in a pop up menu. If it does not, you may not be permitted to add the component.

Source URL/Source Name. Not functional.

Image. Add an image that will be used as a teaser thumbnail.

  • IMPORTANT: When using the same image as above, you must alter the file name. Example: If the file name used above is “groceries-for-seniors.jpg”, then this file name could be “groceries-for-seniors-copy.jpg.” After uploading the image, you must manually crop the image.

Final Steps

  • Media Type. Type the term “Articles” into this field.
  • Authoring Information. Usually do not need to edit this. This allows you to edit the name of the person posting the article and the publishing date.
  • Publishing Options. Usually there’s no need to alter the moderation state here. It can be done after hitting "Save." Under Moderation State you can control whether your changes are saved as a Draft, Published or Needs Review.
  • Save. Hit “Save” at the bottom of the page.
  • Publish. When the article is displayed, go to “Set moderation state” and change “Needs Review” to “Published” and hit “Apply.” If additional edits are required, select "Edit Draft" on the black bar at the top of the page.