Drupal User Guide for Authors

0 Drupal User Guide for Authors SSU WEB CONTENT EDITING Information Technology Services SALEM STATE UNIVERSITY ITS-TRAINING@SALEMSTATE.EDU Author User Guide DRAFT version 2

Author User Guide DRAFT version 2 1

2 Table of Contents My Content Author User Guide Table of Contents... 2 User Account & Management... 4 Overview... 4 Account login... 4 Author capabilities... 4 Locating My Content... 5 Locate content by My Content Author tab... 5 Locate content by Site Navigation... 6 Edit Content... 7 Add Text Block... 8 Adding Text... 10 How to add an image... 11 Embed an image... 11 Image sizes... 11 Best Practices: Helpful Hints for Working with Photos on the Web... 12 Media Uploading and Replacing... 13 How to add a Link... 15 Link Styles... 15 How to add a PDF... 16 Embed a PDF... 16 Link a PDF... 18 Working with Display Types - Advanced Options... 19 Add Feature FULL Width... 19 Add Feature 2 Columns... 21 Add Feature 3 Columns... 23 Add Carousel... 25 Add Carousel Person... 27 Accordion... 29 Add Slideshow... 31 Add Facts... 33 Add Testimonial... 35 Organizing Sections... 37 Author User Guide DRAFT version 2

Author User Guide DRAFT version 2 3

4 User Account & Management Overview Description: Content editors (Authors) are responsible for editing and maintaining current information on web pages. This user guide provides BASIC steps for the following tasks: locating pages, editing pages with text, links and/or PDFs. Best practices and any special instructions or restrictions for use will be provided. Audience: Content editors, Authors Prerequisites: Review online resources in Canvas for Managing Your Online Content is desired by not required. Account login To log in to the website: 1. Visit https://www.salemstate.edu/user or click on the user icon in primary navigation (this URL is to be used during content migration, after content migration is complete use https://salemstate.edu). 2. Enter your SSO username and password. Author capabilities As a content editor, you will be able to add or edit content on a typical page. There are a variety of content types to add and edit as needed. Most common tasks for editors will be adding text, adding links, adding media files or adding a PDF. Authors will not be able to create new typical pages or manage menu navigation (submit a request for assistance if needed). Additional resources for Content Editors can be found online in the Canvas course Managing Your Online Content. Author User Guide DRAFT version 2

5 Locating My Content Locate content by My Content Author tab 1. Log in with your username/password by selecting the user icon (use the Federated Log In to access SSO landing page). 2. Select View mode from the Actions column to display page From this My Content Author tab you can access ALL the typical pages available to you for editing. You can search typical pages by title, type and status or you can access them from the list table. You can also access, add and edit your Media Content from the Media tab. Author User Guide DRAFT version 2

6 Locate content by Site Navigation 1. Once you have logged in, navigate to the destination page from salemstate.edu 2. Scroll to the bottom of the page for additional options (view, edit, latest version) a. View will display page b. Edit draft enables edit mode c. Latest version will display a previously saved but not submitted for review version Edit options for your typical page will display only when logged in. Author User Guide DRAFT version 2

7 Edit Content Drupal lets you create a new revision every time a typical page or node is updated. This allows you to track how the node has changed over time on your site. It also allows you to revert back to a previous state if an error was made. By default all content types are setup to create a new revision whenever a node is saved. Revisions are turned on by default for blocks and content types on the site. If a node has a revision you will see a Revisions link when viewing a node on the site. This appears below the content, just above the footer. Alternatively if you are on the node edit form you will see the revisions tab in the top left corner of the form. If you have a NEW page that has not yet been published, you can access the latest version tab to view the page (it will display the last saved content created). After reviewing the page, you can log a message (optional) and select Apply to request a review (publish the page). Or you can select Edit draft to make additional changes to the content. Author User Guide DRAFT version 2

8 You must be in edit mode to make changes. Select the Edit button to expand edit options for the existing section: Text Block or use the steps below to add a new text block. Add Text Block Description: Text blocks are a great way to chunk out information related to your department or program. It is an easy display type that also allows to imbed an image or other media file such as a PDF. Sample view: Best Practices: Use caution with copy/paste for text. Use the text styles to adjust text with paragraph and heading styles. Heading title will defaults to Header 1 and Subtitle defaults to Header 2. If you have additional headers in the body, start with Header 3. This is important for how the content will be read (read order) by assistive technology used by visually impaired users. Use appropriate image size for text block for best display quality. Additionally, be sure to follow salem state s writing style guidelines when adding text content. Author User Guide DRAFT version 2

9 Steps for adding: 1. Select Add Text Block 2. Select Add Heading 3. Add Title (required for ADA accessibility, select display heading box if you want title to display 4. WYSIWYG Editor Elements explained, from left to right: 1. Provides custom formatting options for text in the editor. 2. Bold text. (not ADA compliant) 3. Italicize text. (not ADA compliant) 4. Link text. 5. Remove link. 6. Embed a table. 7. Embed a bulleted list. 8. Embed a numbered list. 9. Embed an image. 10. Embed a blockquote. 11. Paste from word. (Recommended - helps with formatting) 12. Clear formatting - clear any special formatting applied to the selected text. Author User Guide DRAFT version 2

10 Adding Text Add text to the WYSIWYG Editor by typing in the body box. Use the block styles to assign appropriate heading and text formats. Paste from Word Use appropriate formatting styles after pasting text into body. Use of appropriate headers and following ssu style writing guidelines is required. Do no use bold or italics when formatting. Author User Guide DRAFT version 2

11 How to add an image Embed an image You can add images in line with your content by following these steps. 1. Select the E (Embed) button. This will load the same popup window you use when adding an image or video to content. The only difference is that only images are supported for embedding in the WYSIWYG. 2. After selecting your media as normal, you ll be prompted with an additional screen: View mode: This determines the aspect ratio of the image. Several options are available, but there are two options: Inline Square and Inline Wide that were specifically designed for use in the WYSIWYG. Align: Whether the image should be centered, aligned left, or aligned right. Caption: a brief caption that appears with the image, just below. Image sizes To ensure that the image is uploaded with the highest display quality, you may need to resize an image. Images are restricted to a 2 MB limit. See optimal sizes for images below: WYSIWYG Editor Inline Square: 400x400 Inline Wide: 400x266 Display Types Carousel: 708x596 Testimonial: 828x465 Slideshow: 854x640 Feature Full: 1280x790 Feature Aligned: 768x640 Feature 50/50: 600x400 Feature One third: 372x372 Feature Two thirds: 785x372 Menu Feature: 280x210 Author User Guide DRAFT version 2

12 Best Practices: Helpful Hints for Working with Photos on the Web 1) Don t forget photo permissions. You can find release forms in Polaris: https://polaris.salemstate.edu/post/32/marketing-and-creative-services-howtos 2) Save a copy! If you have a great image that you d like to use for the web, save a copy before you resize it. You may want the original size image for something else. 3) If you need to crop a photo, save the larger of the two dimensions (width or height) first. For example, if you have a 1200 x 800 image and you need it to be 1100 x 400 pixels, resize the image to 1100 pixels wide first. Then crop the photo to the appropriate height. 4) Keep ratios locked. This means that if you change the width of an image, the height of the image will change accordingly. Otherwise, you can get skewed/stretched images. In Preview on a Mac, this feature is the Scale Proportionally checkbox. In MS Paint, this feature is the Maintain aspect ratio checkbox. 5) It s always better to size down than size up. By trying to make a small image larger, you lose resolution, which can result in a blurry or pixelated image. Most of the current website photos are too small to be transferred to the new site. Marketing may have some images on file that meet your needs. 6) Test your windows. You can resize your browser window to see how your page looks on a mobile device. 7) Naming conventions. Use a naming convention that allows you manage you media easily. 8) ALT Text. ADA compliance is required for published images. Add alternative text to an image that provides a clear description of what displays in the image. This text is read by assistive technology devices. 9) Caption image. Different from ALT text, caption is used to identify who or what is displayed in an image. Author User Guide DRAFT version 2

13 Media Uploading and Replacing When the E embed button is selected media options display. Upload Image: Add a new image to the site. Upload an image, give it a name and some alt text. This will add it to the page as well as the site s library for other editors to use. Replacing Image: Do not use the edit media button within the page. Instead, please remove the media and then upload a new or select an existing image. When you edit the media, that image is replaced across the entire site. Add Video: In some instances videos may be added. Videos from YouTube and Vimeo can be embedded. All videos must contain closed captions or provide access to a transcript. Author User Guide DRAFT version 2

14 Use Existing: Browse all media on the site and select an image or video that already exists. Use the filtering provided to filter the list. After finding the image, check the box on the left, scroll to the bottom, and select Embed. Author User Guide DRAFT version 2

How to add a Link To add a link to your content follow these steps: 1. Highlight the copy in the editor that you would like to be a link 2. Click the link button in the editor toolbar. After clicking this link the link dialog will open. 3. Type a path as you would your browser or, for links to internal content, type the title of the page. Link Styles Add a link per instructions listed above. Next highlight the link and select the Styles dropdown, you should see a list of options demonstrated below:

16 How to add a PDF There are two options for adding a PDF, E embed a file or Link text to an existing PDF file previously added. Embed a PDF 1. Place cursor to the location for PDF or highlight text to embed file 2. Select Upload PDF as media to embed and provide Media Name (this is not the text that will display, use a Media Name naming convention best for managing your media). Select Choose File to locate a new PDF. 3. Locate the file, select the file and click Open to continue

17 4. Confirm file is correct (if not select Remove) and select Embed to continue 5. Review selected media and select Next to continue 6. Embed Media to complete 7. Select Save and Create New Draft to continue 8. PDF will display with icon (Sample)

18 Link a PDF You can link to existing PDFs by using the Link button instead of embedding. 1. Select text and select the hyperlink button in the editor 2. Start typing to find existing content or paste the URL. This is where using optimal naming conventions come in handy. Content and Media types will display for existing links containing typed text. 3. Select PDF desired and select Save to continue 4. Select Save and Create New Draft to preview 5. PDF will display as a link on the page

19 Working with Display Types - Advanced Options Add Feature FULL Width Description: Use this display type to when using your best image to feature your program or department. Full width displays the image across the page with text display options on top (overlay) or to the right/left side of the image. Sample views: 1. Full width overlay text (Title/heading, subtitle and CTA displayed) 2. Right side image view left side text (Title/heading, subtitle, body and CTA displayed) 3. Left side image view right side text (Title/heading, subtitle, body and CTA displayed)

20 Best practices: Use appropriate image size for best image display quality and avoid lengthy body text when displaying text on right or left. Steps for adding Feature Full with display type: 1. Select Add Feature Full Width 2. Select Text Position (note that if overlaying text on top of the image, the body filed will not be displayed) 3. Add Title and subtitle (optional fields) 4. Add body (if using right/left text position) 5. Add media (upload new or add existing media, see steps on page 10) 6. Add a CTA (optional, used when you want to direct to another internal or external page or link) 7. Select Save and create new draft to view

21 Add Feature 2 Columns Description: Use this display type to feature programs, upcoming news and events or other pertinent information you want to chunk into a layout that contains images and text within a column. Sample View: Best practices: Do not make content subtitle text heavy. It s designed to be brief and to the point. Use CTAs to redirect to another typical page that contains more details. Steps for adding: 1. Select Add Feature 2 Columns 2. Select Add Heading 3. Add Title (required for ADA accessibility, select display heading box if you want title to display) it will display above your media

22 4. Select Add Content Block 5. Add content Title (this will display on the content block with media), add content Subtitle (optional, this will display under the content title) and if you want to link title to an existing node, use the CTA field (also optional) 6. Select Media to add image and follow steps for adding an image on page # 7. Select Add Content Block and repeat steps 4 and 5 to add next content block 8. Select Save and create new draft to view

23 Add Feature 3 Columns Description: Use this display type to feature programs, upcoming news and events or other pertinent information you want to chunk into a layout that contains images and text within a column. Sample View: Best practices: Do not make content subtitle text heavy. It s designed to be brief and to the point. Use CTAs to redirect to another typical page that contains more details. Steps for adding: 1. Select Add Feature 3 Columns 2. Select Add Heading

24 3. Add Title (required for ADA accessibility, select display heading box if you want title to display) it will display above your media 4. Select Add Content Block 5. Add content Title (this will display on the content block with media), add content Subtitle (optional, this will display under the content title) and if you want to link title to an existing node, use the CTA field (also optional) 6. Select Media to add image and follow steps for adding an image on page # 7. Select Add Content Block and repeat steps 4-6 to add next content blocks 8. Select Save and create new draft to view

25 Add Carousel Description: Use to highlight various selling points of your department, from labs to simulations and fieldwork. Sample View: Best practices: Limit body text to a brief description and use the CTAs to redirect to more detailed information if necessary. Have 2 or more slides to enhance use of this display type. Steps for adding: 1. Select Add Carousel 2. Select Add Slide

26 3. Add Title, subtitle and body as needed 4. Add CTA (optional, use to redirect to existing node or external page) 5. Select Add Media and follow the steps for uploading and image or using existing media 6. Select Add Slide to include additional slide to scroll through, follow steps 3-5 for each slide. 7. Select Save and create new draft to view

27 Add Carousel Person Description: Used to highlight a person(s) and can be flexible in what information can be shared related to the image. Sample View: Best practices: Be consistent across multiple slides to ensure a similar look and field for this carousel. Use the appropriate image size to ensure proper image display quality. Use of CTAs is helpful for linking to internal or external pages. More than 2 slides is needed for using the scroll carousel previous and next option. Steps for adding: 1. Select Add Carousel 2. Select Add Slide 3. Complete the fields using consistency across the slides. Add Title, Name, Year of Graduation, Current Employer/Job title (or major/minor, school etc.)

28 4. Add CTA (optional, use to redirect to existing node or external page) 5. Select Add Media and follow the steps for uploading and image or using existing media 6. Select Add Slide to include additional slide to scroll through, follow steps 3-5 for each slide. 7. Select Save and create new draft to view

29 Accordion Description: Use to break up related chunks of content, working with lists or providing step by step instructions. Sample View: Best practices: Accordion item titles should indicate what can type of information can be found if selected and the body should be clear and to the point. Avoid including too many details. Instead, link to another page or use the CTAs to redirect to more information. Steps for adding: 1. Select Add Accordion 2. Select Add Heading 3. Add Title (required for ADA accessibility, select display heading box if you want title to display) it will display above your media, add subtitle for a brief description of heading, add CTA to redirect to existing internal or external destination (for example, Learn more...)

30 4. Select Add Accordion Item 5. Add content Title (this will display when accordion item + is selected), add content body (this will display under the content title) 6. Select Add Accordion Item to add more (repeat steps 4 and 5) 7. Select Save and create new draft to view

31 Add Slideshow Description: Use for displaying a series of related resources, facilities and buildings. Sample View: Best practices: Use image sizes that fit this display type and include CTA to link to other pages. Slideshows are best for displaying multiple images. Steps for adding: 1. Select Add Slideshow 2. Select Add Heading and add Title (required for ADA accessibility, select display heading box if you want title to display) it will display above your media.

32 3. Add subtitle (optional, will display below title and above media) and add CTA (optional, will display in top right hand corner of media). 4. Add Caption (will display on bottom left hand corner of media), this should be limited text and CTA is optional (best for redirecting to other pages or information). 5. Select Add Image to add first image (follow steps on pages 11-13 to add media). Repeat for each media item. 6. Select Randomize Image Order if desired. 7. Select Caption Background Color for slideshow. 8. Select save and create new draft to view.

33 Add Facts Description: Use the fact cards to call out quantifiable facts about the department. Utilize our icon library thoughtfully and use the suffix field only if necessary. Suffixes are + and %. Sample View: Best practices: 3 facts are required for using this display type. Make sure your description explains the number reflected. Steps for adding: 1. Select Add Facts 2. Select Add Heading 3. Add Title

34 4. Select Add Fact 5. Complete the required fields (number, suffix position, subtitle) and add an icon and CTA if desired. 6. Select Text Position of left or right to display next to image. 7. Select Add Image or Video (follow steps on pages 11-13 for uploading or adding existing media). 8. Select save and create new draft to view.

35 Add Testimonial Description: Testimonials are great for capturing a quote or stated experience by a person or person(s). Sample View: Best practices: Use appropriate image size for testimonials and use CTAs to redirect to additional information, links or resources. Steps for adding: 1. Select Add Testimonial 2. Select Add Heading

36 3. Add Title 4. Add Name, subtitle (optional) and Quote 5. Select text position to display on the left or right of image. 6. Select media using the steps for uploading or adding an existing image or video (see pages 11-13). 7. Select save and create new draft to view.

Organizing Sections To organize content, click and drag the cross arrows to arrange how the display types will display on the typical page. This is helpful when there is content that you want to move up or down on a page depending on what you are highlighting. 37