Drupal 8 User Guide

DRUPAL 8 U S E R G U I D E ETV Endowment

Etvendowment.org

LOGGING IN To log into Drupal, visit http://www.etvendowment.org/user and enter your Username and Password. Once logged in, click Manage in the upper left corner.

ADDING AND EDITING CONTENT To add new content to the website, navigate to the Content Menu and click Add Content. This will display a list of all the manageable content types on your website. Details about creating each type of content are included below.

For all content types: • If an image field has a required alt-text field, fill it in with descriptive text (do not use the file name). If the alt-text is not required, fill in descriptive text if the image contributes to fully understanding the content. If the image is purely decorative, leave the alt-text field blank. • Clicking Save will immediately publish the content to the live site. To save content without publishing, navigate to the Publishing Options tab, unselect the Published checkbox, and then click Save.

The Kitchen Sink page is a hidden page that shows all the different layers and offers a visual explanation of how they can be used. • Test site Kitchen Sink page: https://www.etvendowment.org.test.cyberwoven.net/kitchen-sink • Live site Kitchen Sink page: https://www.etvendowment.org/kitchen-sink

View a specific content type: • Page • Event • Article • Webform • Layers

Adding a Page On the Create Page screen: • Enter the page Title. This will display on the page and determine the page’s URL path.

• Select Page Header type: o Extended Titlebar:

Select your background image. Must be at least 1600p x 600p Open the Crop Image dropdown and move the crop around to select the portion of the image you want to show. Note: because the title and description text show bottom-left aligned, it’s best to make sure the focus of your image is in the center or on the righthand side. Enter description text if desired.

o Main Marketing Area Header

The Main Marketing Area Header, or MMA, is used on the homepage of the site and landing pages.

Enter your Headline Select your background image. Must be at least 1620p x 720p Open the Crop Image dropdown and move the crop around to select the portion of the image you want to show. Create link buttons (up to 2) if desired.

Once the header is complete, click on the Content Layers tab and add the desired layers to your page. Learn how to enter layer content on page 8.

To place this page within one of the existing menu structures, navigate to the Menu Settings

section and select the Provide a Menu Link checkbox. The Menu Link Title will automatically populate with the page Title. Next, select the parent item.

Adding an Event On the Create Event screen: • Enter the Event Title. This will display as the page title. • Select the event date and start time. • Enter an event Location. • Select the appropriate Event Type. If you select Virtual Town Hall, that will display as a subhead to the Event Title. If you don’t, then this text will not show.

Layer view:

• Expand the Edit summary area next to Body. This is for the short description that will display in the Events list view. • Enter the Body. This will display in the Event detail view. • Upload a featured Image and add a video link. Please note that the image must be 900 x 600 pixels. The image is required and will show with a play button on top if a video link is also added. The image will display in the Events list and detail views. When clicked on either the Events list and detail view, the video will open and autoplay in a lightbox.

Adding an Article Layer view:

On the Create Article screen: • Enter the news article Title. This will display as the page title. • Enter the author’s name, if desired. • Select the date. • On the Article Content tab, expand the Edit summary area next to Body. This will display in the Article list view. If you do not add a Summary, the Article list view will display a cropped version of the detailed article text. • Enter the Body. This will display on the Article detail view. • On the Images & Media tab, upload a featured Image and add a video link. Please note that the image must be 900 x 600 pixels. The image is required and will show with a play button on top if a video link is also added. The image will display in the Article list and detail views. When clicked on either the Article list and detail view, the video will open and autoplay in a lightbox.

Adding a Webform (this is located under Structure instead of Content)

After clicking Add Webform, enter the Title and an administrative description for your Webform.

On the next screen, add the desired form elements. Once selected, you can enter each element’s Title (descriptive label when displaying the element, ex: First Name), as well as optional details like Description and Default Value. Under Form Validation, choose to make the field required (if desired). Click Save Component. Repeat for remaining form fields. • Radio buttons allow a user to make a single selection from a list of options. To add radio buttons to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. Click Save Component. • A checkbox list allows a user to make multiple selections from a list of options. To add a checkbox list to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. Select the Multiple checkbox under Option Settings. Click Save Component. o To display a single checkbox option, enter just one Value. • A select list allows a user to make a selection from a list of options. To add a select list to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. In the Display section, check the Listbox option. Click Save Component. o To enable multiple selections, select the Multiple checkbox under Option Settings.

When creating a webform, avoid using fields that have the same label. This can be confusing to someone using a screen reader. If fields with the same label must be used, create logical groupings using a fieldset that has a descriptive name. For example:

If you’d like to have form submission notifications automatically emailed, navigate to the Emails subtab, enter the email address that should receive the notifications, and click Add. On the Edit E-mail Settings screen, add any additional customizations to the notification email and click Save e-mail settings.

To view webform submission data, click the Structure link in the top toolbar and select the Webforms tab. Under Operations, click Submissions to view all, Download, or Clear submission data.

Adding Layers Layers are used throughout the website to provide consistent, flexible content structures. On some pages, layers are included by default and on others content managers can select which layers they want to use. To add a new layer to a page, find the Layers dropdown field and choose which layer you’d like to add.

Each layer and its options are detailed below.

WYSIWYG Layer view:

• Enter content using 1 or 2 WYSIWYG. • If 2 WYSIWYGs are used: o Select a Layout to customize how the content is split across columns o Select the “Vertically center content” checkbox to vertically align the content on both sides. o Cyberwoven recommends distributing content as equally as possible across columns when possible.

Accordion Layer view:

• Enter Headline and Description, depending on what best introduces the content. • On the Accordion Items tab, add Accordion Item Headline and Body text. • Click “Add Accordion Item” to continue adding items. • On the Layer Settings tab, select Layer Background Color.

Block Layer view:

• Select the preset Layer Block that you want to show on the page.

Call to Action Layer view:

• Enter Headline and text, depending on what best introduces the content. • Add URL and Link text for up to two Link Buttons. • Select a Layer Color Scheme.

Icon Layer view:

• Enter Headline and Description, depending on what best introduces the content. • Select Icon for Icon Layer Item and enter Headline and Text. • Click “Add Icon Layer Item” button to continue adding items.

Launchpad Layer view:

• Enter Headline and Description, depending on what best introduces the content. • Select Launchpad Icon and enter Headline, Text and Launchpad Link. • Click “Add Launchpad” button to continue adding Launchpads.

Link List Layer view:

• Enter Headline and Description, depending on what best introduces the content. • Expand Link List Items section and add Link List Files.

Membership Levels Layer view:

• Enter Headline, Description and Link Button, depending on what best introduces the content. • On the Membership Levels tab, enter Membership Levels with Level Name, Contribution amount, and Description, if desired.

Number Grid Layer view:

• Enter Headline and Description, based on what best introduces the content. • Enter Number Grid items with Headline, Description and Link, if desired.

Spotlight Layer view: Content right, no eyebrow, image, no background color, no background image.

• Enter eyebrow text, headline, body text, and a link, depending on what best supports the content. • Select or upload an Image. Minimum image dimensions are displayed as part of the file requirements in the CMS. • To feature a video, include a Vimeo or YouTube link in the Images & Video section. This will display a play button on top of the spotlight Image that when clicked, plays the video in a lightbox. • In the Settings tab, select the spotlight orientation. This will determine whether the content displays to the right or the left of the image. Select the Background Color and Background Image, if desired.

Staff Listing Layer view:

• Enter Headline. • Add Staff Member Name, Position, Location, Image, Bio and Contact Information. • Click “Add Staff Member” button to add new staff members. • Click on the icon next to “Staff Member” to drag and reorder the order of staff on the page.

Testimonial Layer view: Headline, quote, attribution, no image, blue layer color scheme

Layer view: Quote, attribution, no headline, video, no layer color scheme

• Enter the Headline (if desired), Quote and Attribution. • Select a featured image or video, if desired. • Select a layer color scheme. Defaults to None.

Gallery Layer view:

• Enter Headline and Description, depending on what best introduces the content. • Add Gallery Images. Click “Choose Files” to continue to add images to list. • Click on the icon next to each image to drag and reorder the order of images in the Gallery.

Webform Layer view:

• Enter eyebrow text, supporting text, and a link, depending on what best introduces the webform. • Select which webform you’d like to display from the drop-down list. See the Managing Webforms section for more details.

MANAGING TAXONOMIES Taxonomies are used to categorize and standardize types of content on your website. To manage taxonomy terms, navigate to the Structure menu and click Taxonomy. Details about management options are included below. • To view all terms in a taxonomy list, click List Terms. • To edit an existing term, click edit and update the Name field. Click Save. • To delete a term, click edit and then click Delete. • To rearrange the order of the terms in a list, click the cross next the term and drag it to the preferred placement. Click Save.

USING THE RICH TEXT EDITOR

The rich text editor simplifies HTML editing. Most of the tools are similar to those found in word processing programs like Microsoft Word. Details about the commonly used web-specific components are below.

Source

The source view allows you to see the HTML and make changes directly in the code. Cyberwoven does not recommend using this view unless you have experience working with HTML.

Paste Options

• Paste – this is default method and pastes text verbatim into the editor. To avoid style conflicts within the HTML, Cyberwoven does not recommend using this option. Always paste text into Notepad or Text Edit on your computer first – then copy and paste from that text editor into the CMS.

Images

To insert an image, click the image button in the toolbar. The Image Properties dialog window that opens will let you set configuration options. Details about each property tab and its options are included below.

Image Info The Image Info tab allows you to select your image and configure the way it appears on the page. Cyberwoven recommends always resizing images before uploading them to the website to ensure appropriate scaling on smaller screen sizes. Details about each configuration option are included below. • Alternative Text – a text description of the image that tells users with assistive devices (like screen readers) what the image is about. Alt-text should be added to all images. If the image contributes to fully understanding the content or if the image is a hyperlink, fill in descriptive text (do not use the file name). If the image is purely decorative, enter “” in the alt-text field. • Align – the alignment of the image in the document can be set to left, center or right. • Caption – checking the Caption box allows you to enter an image caption once you are viewing the content area again. To resize an image once it’s uploaded, hover over the bottom right corner of the image until the diagonal around displays. Drag the corner of the image to resize.

Upload The Upload tab allows you to add new images to the website. To upload an image, click the Browse button. Select the image you want to upload and click the Send it to the Server button. The Link Info tab will open and the URL of the uploaded image will automatically appear in the URL field.

Tables

Tables should be used to display structured information and data. Do not use tables as a content layout tool. To insert a table, click the table button in the toolbar. The Table Properties dialog window that opens will let you set configuration options. Details about each property tab and its options are included below.

Table Properties The Table Properties allows you to configure your table and the way it appears on the page. The only required properties are the number of Rows and Columns, however column headers, row headers, and a summary of the table’s content and purpose are helpful for site visitors who use a screen reader. Defaults for the other properties have been built into your website to ensure design continuity. Cyberwoven does not recommend making any other custom configurations using this tab.

Once inserted into the document, content can be entered into the table and additional modifications can be made. Details regarding commonly used cell, row, and column modifications are included below. To access these options, double click or right click the table to reveal the table menu.

Rows • Insert Row Before – inserts a new row before the one that contains the cursor. • Insert Row After – inserts a new row after the one that contains the cursor. • Delete Rows – deletes a row that contains the cursor.

Columns • Insert Column Before – inserts a new column before the one that contains the cursor. • Insert Column After – inserts a new column after the one that contains the cursor. • Delete Columns – deletes a column that contains the cursor.

Cells • Insert Cell Before – inserts a new cell before the one that contains the cursor. • Insert Cell After – inserts a new cell after the one that contains the cursor. • Delete Cells – deletes a cell that contains the cursor. • Merge Cells – merges multiple cells in one. This option is only available if two or more cells are selected. • Merge Right – merges the selected cell with a cell on its right. The content of both cells becomes joined. This option is only available if no more than one cell is selected.

• Merge Down – merges the selected cell with a cell located on its bottom. The content of both cells becomes joined. This option is only available if no more than one cell is selected. • Split Cell Horizontally – splits the selected cell in two, creating a new cell on its right. The content of the cell appears in the original, left cell. This option is only available if no more than one cell is selected. • Split Cell Vertically – splits the selected cell in two, creating a new cell on its bottom. The content of the cell appears in the original, upper cell. This option is only available if no more than one cell is selected. • Cell Properties – opens the Cell Properties dialog window that lets you configure cell size, type, color, and content alignment. Defaults for all of these have been built into your website to ensure design continuity. Cyberwoven only recommends customizing the cell properties listed below. o Rows Span – this setting stretches the cell downward over several rows. Entering a numeric value sets the rowspan attribute. o Columns Span – this setting stretches the cell to the right over several columns. Entering a numeric value sets the colspan attribute. o Horizontal Alignment – the horizontal alignment of table cell contents. The following options are available: Left, Center, and Right. o Vertical Alignment – the vertical alignment of table cell contents. The following options are available: Top, Middle, Bottom or Baseline.

To delete the whole table and its contents, use the Delete Table option.

Text Formatting

A variety of text formats have been built into your website to make content styling easier. To apply a format, highlight the text you’d like to change and then select the desired format from the dropdown menu.

To ensure design continuity, Cyberwoven does not recommend using any non-custom styles or formats.

Hyperlinks

To insert a link, select the text you want to link and click the link button in the toolbar. The Link dialog window that opens will let you choose the link type and configuration options. Details about each link tab and its options are included below.

Link Info Link Type specifies the category of the link that will be inserted. Details about each type of link are included below. • URL – the web address of any online resource, like a website, a document, or an image (i.e. http://example.com/about.html or http://example.com/images/image1.jpg). Other options associated with URL links are included below. o URL specifies the web address that the link is pointing to. If linking to another page on your website, enter the relative URL (i.e. /about-us) rather than the absolute URL (http://example.com/about-us). Advanced The Advanced tab lets you configure additional link options such as assigning it CSS classes. Defaults for all of these have been built into your website to ensure design continuity. Cyberwoven does not recommend making custom configuration using CSS classes (with the exception of buttons, as described below). Also under the Advanced menu, you’ll see an option to Open in new window. This should be checked if you wish for your link to open in a new browser window.

Add Button

To add a button, type the text for the button into the WYSIWYG content, highlight the button text, and click the link button in the toolbar. Put the link into the Link field and add a link Title if

desired. Expand the Advanced section, and type “button” into the CSS classes field, then click Save.

Finish your work in the WYSIWYG, then click save on the page and those links will appear as buttons on the page.

Add Files

To upload a file, click the Browse button. Select the file you want to upload and click the Open button. The URL of the uploaded file will automatically appear in the URL field.

Make sure that all PDFs uploaded to the site are accessible. PDFs that are missing a document title, a document language, auto-tagging, and alt text on images are difficult for people using

screen readers to consume. More information on how to create accessible PDFs can be found here: https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html

MANAGING NAVIGATION MENUS To adjust which pages display in the menus, click the Structure link in the top toolbar and then click Menus. Next to the menu you’d like to edit, click Edit Menu. Click and drag to reorder or reorganize the pages in the menu. Click Save.

MANAGING URLS Aliases An alias or vanity URL is a different name for an existing URL path. To create a new alias, navigate to Configuration / Search and Metadata / URL Aliases / Add Alias. In the Existing System Path field, enter the relative URL of the page you want to create the new alias for. In the Path Alias field, enter the new alias. Click Save.

Existing aliases can be managed by navigating to Configuration / Search and Metadata / URL Aliases.

Redirects A redirect reroutes an existing URL path to a new path. To create a new redirect, navigate to Configuration / Search and Metadata / URL Redirects / Add Redirect. In the Path field, enter the relative URL of the page you want to redirect. In the To field, enter the new URL you want to send this path to. Typically, the Redirect status will be 301, but this should be customized if needed. Click Save.