Drupal 10+ Basics

 

 

 

 

 

If you don't see the answer to your Drupal 10 question here or need site editor training, you can send your query to Web.Support@dartmouth.edu or by submitting a ticket via the ITC Services Portal.

 

Logging in to the editor:

Go to your sites homepage and add "/saml_login" to the URL, without quotations.

Examples:

• Department of English: https://english.dartmouth.edu/saml_login
• Department of History: https://history.dartmouth.edu/saml_login

After you enter the login link, you will be asked for your NetID, password and DUO authentication. 

 

Navigating the site as an editor:

After you've logged into the site, you will see 4 icons in the upper left – a drop of water (Front page), a piece of paper with the corner folded (Content menu), a stack of papers (Structure menu) and a question mark within a circle (Help).

For most functions, you will use the Content and Structure menus. 

Through the Content menu, you can create pages, articles, download content from other Drupal 10 sites, and upload media to the Media library. Within the Content Overview, you can see and search through all published and unpublished content on the site. You can search for specific content by Title, Content type and Published status. Along the top, you can also view content by the content type (such as Files, Accordion, Media) and add that type of content. When creating some content this way (such as Accordion), the content exists, but it will need to be added to a page to display.

Through the Structure menu, you can make changes to the main navigation, create news tags and profile types. 

 

Editing a Page:

After logging in, you will see a set of green buttons, located at the top/left of every page.

View – If you’re already viewing the page, clicking this will refresh the page. If you are in Edit, it will bring you back to the page.

Edit – Allows you to edit the basic page details, such as the page title, Hero description, Hero image, Menu link title, etc. You can also unpublish the page by toggling the Published toggle (located by the Save button).

Delete – Deletes the page you are on. Don’t click on this unless you are certain that the page needs to be deleted. If you just need the content to no longer be visible on the live site, you can unpublish the page (via Edit). The Delete option will not show if the page has children nested underneath. Some pages Web Services will need to delete.

Layout – This allows you to add/remove/move content blocks (such as WYSIWYG, Accordion, etc) to the page. .

Clicking on Layout will show another set of buttons:

Save Layout – Click this to save any changes made within Layout.

Discard Changes – Click on this to discard any changes made since the layout was last saved.

Reorder sections – Doesn't do anything.

 

Editing existing content:

Drupal 10+ allows you to edit and save without needing to go through a draft and publish process (as seen in Drupal 7). To edit existing content on the page:

1. Hover over the content you want to edit, locate the pencil in the upper right corner of the block.
2. Click on the pencil, and then click "Edit," to open and edit the content. Please note, if you are in "Layout," when you click the pencil, you need to click on "Configure" to edit the block content.
3. Make your changes and click Save. If the page is published then the changes are immediately visible on the site.

You can edit the page title by clicking "Edit" at the top of the page.

 

Creating a new block or adding an existing content block to a page:

1. Navigate to the page you wish to edit, click Layout.
2. Scroll down the page and locate the section in which you would like to add the content, click on “+ Add block.”
3. If you're creating new content, choose the block/content type that you wish to create (WYSIWYG, Accordion, Checkerboard, ect). Otherwise, you can find existing blocks by clicking "More" and searching for the Admin title of that block.
4. Populate all of the required fields (indicated with the red asterisk *) and add the desired content in the Body/Description area.
5. Add block.
6. Scroll to the top of the page, Save Layout.

 

Creating a General Page:

One of the ways that you can add new content to your site is by creating new pages. The General page type is designed to be flexible with a variety of components to suit the needs of many different topics and purposes. General pages are intended to be used as internal pages. The “hero description” area replaces the Introduction area in Drupal 7 (DCRS).

1. Hover over the "Content" menu.
2. Next, hover over “Add content” and click on “General.”
3. Add a Title, and the Hero Description, Hero image (if desired).
4. The Menu Link Title will populate automatically, based on the page Title, but you can change it now, if needed.
5. Also in the sidebar, you will see the "Parent link" field. Set this field to determine where in the menu the new page will appear. For example, setting this to "About" would place the new page below "About" in the menu.
6.  If you want to work on the page without publishing it, you can toggle the "Published" toggle located next to the Save button. You can come back and publish the page later by clicking "Edit" at the top of the page.
7. Click Save, if you are ready to proceed. 

After the page has been created, you can click on Layout and "+ Add block" to add content blocks (such as a WYSIWYG block) to the page. 

 

Downloading content (such as Articles/Profiles):

You can download content, such as news Articles or People Profiles to your site. Please note that you are downloading a copy of the content for display, you cannot edit downloaded content.

1. Hover over the "Content" menu on the left.
2. Next, hover over “Content share” and select "Download Content."
3. Click "-Select-" under "Choose Download Site" and select the site you wish to download from. For example, select "Home (Dartmouth News)" for Articles, or "Faculty Directory" for Faculty Profiles. Only Drupal 10 sites will show as a Download Site.
4. Next, click "-Select-" under "Choose Content Type" and select your content type (such as Articles or People Profiles). 
5. Search for the content by entering the title or name in the "Search" field.
6. Check the box to the left of the content and click on the "Download" button.

Some other things to note about downloaded content - 

If you downloaded an article, it will appear on your News listing page, based on its published date (most recent at the top).

For People Profiles, you may need to set the Profile Type after downloading the profile. The Profile Type determines where the profile shows on the People page.

If you need a new Staff or Student People Profiles created, please email us at web.support@dartmouth.edu.

 

Removing downloaded content (such as Articles/Profiles):

You can remove downloaded content two ways.

• First, via the "Content" menu, and "Overview." Here you can search for the content within the "Title" field, then click the down arrow under "Operations" and click "Unsubscribe."
• Second, go back to "Download Content" and "Remove Download."
  1. Hover over the "Content" menu on the left.
  2. Next, hover over “Content share” and select "Download Content."
  3. Click "-Select-" under "Choose Download Site"
  4. Click "-Select-" under "Choose Content Type" and select your content type (such as Articles or People Profiles). 
  5. Search for the content by entering the title or name in the "Search" field.
  6. Check the box to the left of the content and click on the "Remove Download" button.

 

Updating the Menu (main navigation):

As a site editor you can reorder, re-label and remove menu links from the navigation. However, the top level of the main navigation is locked. If you need changes at the top, please email us at web.support@dartmouth.edu. 

1. Hover over the "Structure" menu.
2. Next, hover over "Menus" and "Main Navigation." 
3. Here you can drag/drop pages to change where they appear within the main navigation. You can also edit the individual menu link titles and attributes by clicking on the "Edit" button under Operations (far right column).
4. Scroll down and click Save.

Some other things to note about Menus/Navigation - 

Deleting a menu link does not delete the page. Deleting the page deletes the menu link.

The "Add link" button in the upper right of the Overview, while visible, is not usable for Site Editors. If you need to add new menu links to the navigation, you can do so by creating pages (see the "Creating a General Page" instructions above). 

 

Adding media to the Media Library:

Videos - 

If you want to add a video to your site, you first need to upload it to either YouTube or Vidmeo. Please note that in Drupal 10+, Youtube and Vimeo embedded video players require a placeholder Poster Image. If you don't have a poster image ready, you could take a screen shot of something in the video and use that.

1. Hover over the "Content" menu on the upper left.
2. Hover over "Media" and click on "Media library."
3. Click "+ Add media" in the upper right corner and select "Remote Video."
4. Add the YouTube (or Vimeo) URL to the "Remote video URL" field.
5. Add the "Poster image" for the video, by clicking "Add media." 
6. Click Save.

Images - 

When uploading images, it is important to select the correct Orientation and to add "Alternative text" This is a short description of the image which is used by screen readers, and displayed when the image doesn't load. This is important for accessibility.

1. Hover over the "Content" menu on the upper left.
2. Hover over "Media" and click on "Media library."
3. Click "+ Add media" in the upper right corner and select "Image."
4. Add a "Name" for the file.
5. Click "Choose File" to select the file from your computer.
6. Populate the "Caption" and "Photographer" fields, if desired.
7. Update the "Orientation" field, if needed. This field defaults to "Landscape."
8. Click Save.

Documents - 

In Drupal 10+ document files (txt, doc, docx, pdf, etc) insert as buttons (vs links in Drupal 7).

1. Hover over the "Content" menu on the upper left.
2. Hover over "Media" and click on "Media library."
3. Click "+ Add media" in the upper right corner and select "Document."
4. Add a "Name" for the file.
5. Click "Choose File" to select the file from your computer.
6. Click Save.

 

People Profiles: 

If you need a new Staff or Student People Profile page created, please reach out to us at web.support@dartmouth.edu with the following information:

• Name (First Last)
• NetID
• Profile Type (Staff, Student, Visiting Scholars, etc). Depending on your site, the Profile Type may determine where the profile shows on the People page.

After the profile has been created, you can add content to it by clicking "Edit" at the top of the profile page itself.

Faculty profiles are managed by Arts & Sciences. You can download Faculty profiles via Content Share (see steps for downloading content below). If you do not see the Faculty profile you need, you can email Arts & Sciences at Arts.and.Sciences.HR@dartmouth.edu to inquire about the status.

 

Frequently used Blocks:

 - WYSIWYG Block:

The WYSIWYG block replaces the Content Chunk from Drupal 7, which makes up the majority interior page content in Drupal 7 (DCRS) sites. You can insert almost any kind of content into this block: text, images, documents, buttons, etc. WYSIWYGs can be used in both the main section and full-width sections on a page. 

To add a WYSIWYG:

1. Fill out all required titles.
2. Add text, image, links.
3. Use Edit toolbar to style the content.
4. Scroll down and click an “Add block” button.
5. Scroll up to the top of the page and Save Layout.

 - Accordion:

An accordion block can hold either a single expandable section or a series of expandable pieces of content. This block replaces the "Expandable" option found within in the Content Chunks in Drupal 7 (DCRS). Accordions are a great option for FAQs, lists and longer pages. Accordions can be used in both the top section and full-width sections on a page.

To add an Accordion:

1. Click on Add Block -> click on Accordion
2. Fill out all titles, add description if needed.
3. Click on “Add new Accordion” button.
4. Add a Title of the paragraph or question.
5. Add paragraph or answer to question.
6. Style text if needed by using Edit toolbar.
7. Scroll and add the URL and a Link title (only if you need a button).
8. Click on green button “Create accordion” to add your accordion item.
9. Repeat steps 3-8 as you need more Accordions.
10. Click on “Add block” green button and Scroll up to the top of the page and Save Layout.

 - Checkerboard:

Checkboards are a flexible block that can be used alone or with other checkerboards. This block works best with a photo in each checkerboard. Be sure to select the alignment you'd like for which side the photo appears. Checkerboards can also have buttons. This block is one option for replacing grid tiles from Drupal 7 (DCRS), especially grid tiles with a photo.

To add a Checkerboard:

1. Fill out required title fields.
2. Add content to the description if needed.
3. Click on Alignment dropdown button and choose left or right alignment of the image/video.
4. Click on Add Media to add an image or video.
5. Add Button URL and link text (if you need a button).
6. If you added button then click on Target dropdown and choose how it will be opened: Same window or New window.
7. Click on Add block and scroll up to the top of the page and Save Layout.

 - Profile Block:

You can add Profile blocks to pages you create, to display selected People profiles (Staff, Faculty, etc) on on that page. Each Profile block can display 1-4 profiles, but you can place more than one on a page. If you need a new (Staff) Profile Detail created, please email us at web.support@dartmouth.edu (include the name and NetID for the new profile).

 - Prominent Promo:

Designed to be used as a call out. A great place to put content from that would appear in a Promobox (D7, DCRS).  This block will only work in a full-width page section.

 - Image and Video Gallery:

This block replaces the slideshow in Drupal 7. This block will only work in a full-width page section.

To add an Image and Video Gallery:

1. Fill out the title fields.
2. Add content to the Description and use Edit toolbar to add link, special characters if needed.
3. Add Button URL (CTA) and link text (if you need a button).
4. Click on Add media button (Slides) to add an image or video. Repeat as many images/video you have to upload for the gallery.
5. Click on Add Block and Scroll up to the top of the page and Save Layout.