Category Archives: Drupal CMS Intermediate and Advanced

Drupal Themes and Theme Switcher

Themes and the Theme Switcher

Please visit this link to view the Special Role Session video.

There are now a few themes for the different sites within Bryn Mawr’s website:

Themes have two different settings:

  • Main Theme, which is where the piece of content “lives”
  • Display Theme(s), which are places the piece of content can “visit”

Let’s dive into what that means.

Theme Switcher

Theme Editor

Theme Settings

Theme Switcher

The first thing you may notice when you visit brynmawr.edu is the top navigation bars have changed.

Depending where you are, you will see an underline on one of the three main areas to visit at the top right of the screen.

Here, since we are in the GSSWSR site you can see that the “Graduate & Postbac” link has the underline and you can see the GSSWSR logo on the left.  The Main Menu (Admissions & Aid, Degree Programs, etc) is unique for GSSWSR site.

If we clicked on the “Bryn Mawr Home”, it would take us to the Marketing site.

Here is an example of a page within the Marketing site so you can see a few things have changed with the theme.

In addition to the underline moving to under “Bryn Mawr Home”, you can see that the banner color and logo have changed.  The Main Menu for that particular site has also changed slightly.

If you want to visit any of the Graduate & Postbac sites, you can click or hover on that text and see a dropdown so that you can select the specific site to visit.

No matter which Homepage you visit

You will see engaging content that belongs (or “lives”) in that (Main) theme. There will also be links or teasers of content (like news or events lists) that belong (or “live”) in another (Main) theme but are getting referenced (or “visiting”) in that current (Display) theme.

Main Theme

The Main theme is a setting that is default set for all content, but may be adjusted on  Announcements, Basic Page, Event, Homepage, News and Story, if your permissions level permits. This Main theme tells the website that this piece of content “lives in” the Main theme or, in other words, should have the Main theme used when you visit the direct link to this content.

Display Theme(s)

The Display theme is a setting that is set for Announcements, Events, News and Story.

The Display theme tells the website that this piece of content is “visiting” or, in other words, is allowed to be displayed in all the themes that are selected in this field, whether as a direct piece of content (like a Basic Page or News) or via a Flexible Content Item that has one of these Display themes set.

Each piece of content that has these fields, should at the very least have the same Main and Display theme checked so that it can appear in that theme.

Tags

The Tags field is a setting for Announcements, Events, News and Story that helps the website categorize the content for display.

The Display Theme and Tags work together to pull the desired content into a display on a page.

Themes and Permissions in Drupal

Web Steward

As a Web Steward, you would only be able to create or edit a News and Basic Page.

You would be able to submit an Event or Announcement for review by Communications.

You would not be able to set the Main Theme.

Therefore, the piece of content that you create would retain the default Main theme of Inside Bryn Mawr or Marketing.

If you needed a piece of content to “live” in a different theme (like Graduate School of Social Work and Social Research), you would need to contact Communications communications@brynmawr.edu to have them set a different Main theme for that content.

Note how they will appear greyed out and unable to be selected/deselected.

Theme Editor

Certain Web Stewards can be assigned a supplemental role of Theme Editor if they are working to create and edit content for any of the Graduate Schools or Postbac.

If you find you need this supplemental role, please reach out to either Communications  communications@brynmawr.edu  or Web Services help@brynmawr.edu  to have your request granted.

What can this supplemental role do? This role of Theme Editor will allow you as a Web Steward to additionally set the Main Theme field for content you are able to create and edit.

Setting and editing theme settings

When editing a page, on the right side of the Edit Screen you will see something that says Themes or Themes and Options. You can open it and set the Main Theme field to be something other than the default setting.

The example below is a News page.

As such, we will need to set the Display Theme to include the new Main Theme we have chosen, so the content will always show up in it’s “home” theme.

There are two other Display Themes selected in our example, Marketing and Inside Bryn Mawr.

Because it is a News page, it has a default Display Theme of Inside Bryn Mawr and therefore this can not be deselected.

By setting these Theme fields on a News page, you are helping the website know which ones to display on a News listing page. This example, below, is the GSSWSR News listing page.

As you can see, the one article (Social Work Dean) has no label on it, because it is

  • Main Theme=GSSWSR
  • Display Theme=GSSWSR

The other two articles show in the listing with the label “Alumnae Bulletin” because they have

  • Main Theme=Alumnae Bulletin
  • with an additional Display Theme=GSSWSR.

The Main Theme can be considered your News articles’ home base.

This is where your News article will live and it also dictates what theme your News article will have.

Display Theme(s) dictate what other themes your News article can be displayed in – this includes being displayed in other Listing Pages as well as News 3-Up and News & Contact Flexible Content Items that may exist on Basic Pages.

Whenever a News article is published, it automatically gets added to the All College News hub on Inside Bryn Mawr. This listing page contains all News articles regardless of their Main Theme or Display Theme settings.

For more information, please see the documentation on News Content Type.

Syndication

By using the News 3-Up or News & Contact Flexible Content Items in a Basic Page, you can bring your News article into a Basic Page by either referencing a tag you associated with the News article or via manual selection.

If the Display Theme isn’t set in the News page for where you want it to display (like Postbaccalaureate Premedical Program), it may not display on a Postbac page that has a News 3-up, even though it has the correct tag (like STEM).


For more information, please see the documentation on News 3-Up and/or News & Contact.

Session Video

This is a Panopto Video and may require you to sign-in to view.

Special Role Session – Homepage and Theme Editor

Homepage content in Drupal

Note: The homepage content types are only available to Site Editors and people with the Homepage Editor role. If you have suggestions for homepage content, please contact College Communications.

Please visit this link to view the Special Role Session video.

Homepage Editor

This is a supplemental role designed specifically for Web Stewards who administer Graduate or Postbac websites within brynmawr.edu.  If you are in GSAS, GSSWSR or Postbac and feel you need this permission level, please contact Communications   communications@brynmawr.edu to discuss your needs.

Homepages

There are Homepages for:

You can see all of them if you Click on Content in the Admin Toolbar

Or visit https://www.brynmawr.edu/admin/content

Once there, select Content Type=Homepage and press the Filter button. If you are a Homepage Editor, you will only see Edit buttons next to the Homepages that you are allowed to edit.

The Homepage Content Type consists of Title, Hero carousel, and Flexible Content Items.

Here is the screen you see when creating a new Homepage. Notice that there is no URL alias specified. This only gets set when the page is to go live.

Title

This field doesn’t display, but it is important to be able to identify each unique Homepage that is built.

Flexible Content Items

All the usual Flexible Content Items are available here, as well as the addition of three Homepage Specific ones: Slide: Homepage Hero, Homepage Feature: Large, Homepage Feature: Medium, Homepage Feature: Story.

You can read about all the Flexible Content Items, including how to reorder them, in this tech doc.

 

 

Slide: Homepage Hero

This is for HOMEPAGE EDITOR, SITE EDITOR and above and is only available for the Homepage Content Type.

If only one Hero slide is added, it will be just a hero image. Once you add a second one, it becomes a carousel.

Only a title and an image are required for a Hero slide.

If you would like a link on the slide, you can choose between a CTA or a Video Link.

 

Here is what each type of link looks like on the slide


Back to Top ^

Homepage Feature: Large

This is for HOMEPAGE EDITOR, SITE EDITOR and above and is only available for the Homepage Content Type.

This Flexible Content Item is a great way to draw attention to an important program or feature. This Homepage Feature Large has one of the Feature Child block options overlaying the bottom portion of the image (see each example below). It has an image, title, intro field and space for up to three links.

  • Main List Item

  • Additional List Item

NOTE: These things will be displayed under a The Details heading

Here is how it looks with the Main List and the Additional List Item list

 

 

You can also have a quote (Feature Child: Quote), statistic (Feature Child: Statistic), caption (Feature Child: Special Caption) or link to a video (Feature Child: Video) displayed prominently.

Once you have a Feature Child option filled in, you are able to remove it if you want to change what you use there. Simply click the three dots on the right of that item and select Remove. Then you can decide to use a different option. Please note that once you remove it, you would have to create it from scratch if the removal was accidental.

Feature Child: Quote form looks like this

 

This is how it looks with a quote

 

Feature Child: Special Caption form looks like this

 

This is how it looks with the Feature Child Special Caption

 

Feature Child: Statistic form looks like this

 

This is how it looks with a Feature Child Statistic

 

Feature Child: Video form looks like this. You can see that you can pick an existing Remote Video or add a new one. You can learn more about adding videos in our Embedding Videos tech doc.

Here we will just select an existing one

This is what the form looks like after we have pressed the Embed button

 

This is how it looks with a Feature Child Video

 

Back to Top ^

Homepage Feature: Medium

This is for HOMEPAGE EDITOR, SITE EDITOR and above and is only available for the Homepage Content Type.

This Flexible Content Item is a great way to draw attention to an important program or feature. This Homepage Feature Medium has  one of the Feature Child block options overlaying the bottom portion of the image (see each example below). It has an image, title, intro field and space for up to three links.

  • Feature Child: Main List Item

  • Feature Child: Dropdown.  Here is the form for the Dropdown, where you can add up to 5 items

NOTE: These things will be displayed under a The Details heading along with the Additional List Items

Here is how it looks with the Main List and a drop down both closed and expanded

 

You can also have a quote (Feature Child: Quote), statistic (Feature Child: Statistic), caption (Feature Child: Special Caption) or link to a video (Feature Child: Video) displayed prominently.

Once you have a Feature Child option filled in, you are able to remove it if you want to change what you use there. Simply click the three dots on the right of that item and select Remove. Then you can decide to use a different option. Please note that once you remove it, you would have to create it from scratch if the removal was accidental.

The Feature Child Quote form looks like this

This is how it looks with a quote

This is how the Feature Child Caption form looks:

This is how it looks with the Feature Child Special Caption

 

Feature Child: Statistic form looks like this. NOTE you can only have a 4-character Statistic Number.

This is how it looks with a Feature Child Statistic

Feature Child: Video form looks like this. You can see that you can pick an existing Remote Video or add a new one. You can learn more about adding videos in our Embedding Videos tech doc.

Here we will just select an existing one

This is what the form looks like after we have pressed the Embed button

This is how it looks with a Feature Child Video

Back to Top ^

Homepage Feature: Story

This is for HOMEPAGE EDITOR, SITE EDITOR and above and is only available for the Homepage Content Type.

This Flexible Content Item has a few more fields than a typical Flexible Content Item Story 1-up.  This allows you to really feature a story and add extra links and text to it.

Here we see the fields available: Heading, Introduction, CTA, story, story title (this is something like Academic Excellence, to help promote certain categories), quote alignment, a The Details section that helps you provide more links and additional text to further enhance this content item.

Here are how all these fields look in the display:

 

Back to Top ^

 

Edit Biographies in Drupal

A Biography in Drupal is created in what is known as a Directory content type.

The Faculty and Staff Directory provides a searchable index of Bryn Mawr employees associated with their respective department(s) or office(s).

This Directory list is what used to be the Find Directory.  You can find this central listing page by going to https://www.brynmawr.edu/inside/people or by switching to Inside Bryn Mawr on the top right and then hovering over the person icon and selecting Faculty and Staff Directory.

This is the site-wide Faculty and Staff Directory page where you can search for a person by name or department.

Each listing combines basic information about an employee from Bionic (preferred name, title, phone, email, office, etc) with optional information each employee can add in their Biography (photo, office hours, CV, degrees, research interests, etc). You can also add a People List Flexible Content item to individual pages. Please read more about People List Flexible Content items here.

The Faculty and Staff Directory lists each person and each individual’s name links to their detailed Biography page. Click on an individual’s name in the list to view their full Biography Detail Page.

Updates/Corrections to Bionic data in a Directory:

Note: Data that comes from Bionic may only be updated in Bionic by HR or the Provost’s Office. If you need to change data here, email help@brynmawr.edu with the username of the person whose data needs to be corrected, and details about the correction (e.g. accent mark displays incorrectly, title should be updated to Professor, phone number should be updated to x5555).

Edit other faculty/staff Biography (Directory)

NOTE: Biographies are only assigned to the individual Drupal user whose biography it is. 

If another member of your department has asked you to edit their biography for them, please have them contact Communications communications@brynmawr.edu or help@brynmawr.edu  to request that edit.

Edit your own Biography (Directory):

Log in from https://www.brynmawr.edu/user

Press the “Bryn Mawr Login” button

Enter your college credentials and expect dual authentication.

If you don’t have a Drupal account you will not be able to log in to Drupal and will need to request a Drupal account.

Once logged in, if you need to edit your own biography, you will be able to access it via the website’s faculty/staff listing at https://www.brynmawr.edu/inside/people.

Search for your name using the filters at the top of the page.

Click on the name and you will be taken to your detailed Biography Page. Once there, you should be able to click the Edit button at the bottom of your screen if you wish to change or add anything in the User-Contributed area of your Biography.

If you have a Drupal account but don’t see the edit button, you would need to email help@brynmawr.edu so we can make you the author of your Biography, which then grants you edit permissions.

If you need a Drupal account in order to edit your biography, please contact Communications communications@brynmawr.edu or help@brynmawr.edu .

In the edit screen

The first tab is the PeopleSoft tab, which contains Bionic data you cannot edit.

All of the fields will be greyed out. 

Updates/Corrections to Bionic data in a biography:

Note: Data that comes from Bionic may only be updated in Bionic by HR or the Provost’s Office. If you need to change data here, email help@brynmawr.edu with the username of the person whose data needs to be corrected, and details about the correction (e.g. accent mark displays incorrectly, title should be updated to Professor, phone number should be updated to x5555).

The second tab is the User-Contributed tab. This is the default tab that is open. Use this area to add or update your photo and other information.

Photo

You can upload a new photo or change the one you are using by removing it and uploading a new one.

Title Note

You can add a Title Note. This would go below the title that comes in through Bionic

 

Education

You can add information about your Education in a limited WYSIWYG field. This allows for bold, italic and link text as well as bulleted and numbered lists.

Areas of Focus

There is another limited WYSIWYG field to add Areas of Focus that is limited to 500 characters.

Office Hours

The next field is a place to list office hours. This is a Flexible Content Item and so you can add more than one (i.e., for different office locations).  If you add more than one you can reorder them with the drag-n-drop.  The Custom Message field is a basic WYSIWYG and only affords you the ability to bold, italic and link text.

CV Upload

The next field is the CV upload field. It is grayed out as all CVs need to adhere to accessibility guidelines and must be approved by either the Provost’s or Communications Office.

In order to include your CV in your Biography in Drupal, you will need the assistance of the Provost.

Note: Faculty members who wish to post their CV to the website are asked to email Tina Bockius, Faculty Administrative Coordinator, at cbockius@brynmawr.edu.

Staff and other CV requests should be sent to communications@brynmawr.edu.

Website field

There is a URL and link text field so that you can have a link listed under your contact information

This is what it looks like on the page

Detailed Biography

The next field is an Advanced WYSIWYG that allows you to have text, photos, videos, tables, blockquotes, links (with special button styles or without), etc. You can read more about how to add all the things in this WYSIWYG in this techdoc article.

Social Media Callout

Finally, there is another Flexible Content Item that is the Social Media Callout.  Read more about how to create Social Callout Flexible Content Items here.This is a place where you can list ways for people to follow you in various social media channels. You are able to add more than one Social Media link to the Social Media Callout.

Here is what it looks like on the page.  It always comes in at the end of the Detailed Biography, right above the footer of the page. There is no ability to move it.

Click “save” at the bottom when you are done to save your changes.

 

Biography Listings in Drupal

People Lists are a Flexible Content item. You can read more about how to create one here.

People Lists are lists of Bryn Mawr employees associated with their respective department(s) or office(s). These lists combine basic information about an employee from Bionic (preferred name, title, phone, email, office, etc) with optional information each employee can add in their Biography (photo, office hours, CV, degrees, research interests, etc). People Lists can be added to individual pages and are populated by the same data that creates the central Faculty and Staff Directory for your convenience.

In our new site, you can find the central listing page by switching to Inside Bryn Mawr on the top right and then hovering over the person icon and selecting Faculty and Staff Directory.

This is the site-wide Faculty and Staff Directory page where you can search for a person by name or department.

The results looks like this

The Faculty and Staff Directory lists each person and each individual’s name links to their detailed Biography page. Click on an individual’s name in the list to view their full Biography Detail Page.

Adding or Editing Custom Directory Listings

To have a People List specifically for your department, you can make a Basic Page and add People List, or multiple People Lists if you need to categorize your people by ad-hoc groups such as Faculty and Staff.

Note: Data that comes from Bionic may only be updated in Bionic by HR or the Provost’s Office.

People: List

This Flexible Content Item allows you to curate a list of people to make a department or lab people page. It works similarly to how you can select News Items where you can only make selections on one page, embed them and then select more from a different page of the people picker pop-up

You can search for people by their name, or department

Just remember to hit Apply once you have put in your search criteria in the filters at the top

Once you have embedded people from one page of the picker, you will have to click Embed and then reapply the filters to find more folks on the next page of the picker for your search criteria

You can also drag and drop your selections to reorder folks

You can also use the Remove button to remove that person from the list you are creating. Note: This will only delete them from the People List. They will still appear on other departments’ listings if applicable and in the Faculty and Staff Directory.

You can also add multiple People Lists so that you could have a list of Faculty and then a list of Staff on the same page

Add or reorder people or groups as needed using Add People List.   To reorder, drag-n-drop individuals in a list or drag-n-drop People Lists within the Flexible Content area.

You can also use the Remove button to remove that person from the list you are creating.

Note: This will only delete them from this particular listing. They will still appear on other departments’ listings if applicable and in the Faculty and Staff Directory.

Program Descriptions (major/minor requirements) in Drupal

Program Description Page

The text on academic department “Program Requirements and Opportunities” pages is automated from Bionic. This data feeds the Bryn Mawr website, Undergraduate Course Catalog, and the Tri-Co Course Guide.

Corrections to Program Requirements and Opportunities text

Please send corrections or updates to Bryn Mawr requirements text to registrar@brynmawr.edu .

Editing Program Description page with Additional content

It is possible to edit these pages to add other text. Be aware that any text you add will only appear on the web page– not in the Course Catalog or other locations. All requirements information must be added via Bionic. Please send corrections or updates to Bryn Mawr requirements text to registrar@brynmawr.edu .

Course Editor Role

Some users have a special role called Course Editor that gives them the ability to edit Course and Program Description pages within their group.

In order to make edits to this type of page, you would need to have this supplemental permissions role.

If you do not have the Course Editor role, please reach out to Communications to update your Program Description page and/or get appropriate training to become a Course Editor yourself.

Adding more text to your Program Description page

Finding Content

When logged in, you can visit the Group Nodes page and sort by Type to find the Program Description page

Once you select the Type, press the “Apply” button to sort for that type of content.

You should see only one result in the table

If you have permissions as Course Editor, you should be able to see the Edit Node option in the Operations column.

Press Edit to get to the edit screen.

Alternatively, you can navigate to the Program Description page of your department and press the Edit tab at the bottom of the pageThis Edit tab will only appear if you have permissions to edit it.

Pre-Content

Use the Pre-Content WYSIWYG for adding text and images to the top of the page. This will be a great place to add things that pertain to all Programs offered (especially if more than one Description Code is displayed).

Here is the text we added as displayed on the page:

Callout Box or CTA

Just past the Pre-Content Text field is a place to add CTAs in the form of a Callout Flexible Content Item. This is a box with links, as well as an optional image and other text, to help highlight information important to the user. Read more about this Flexible Content Item here.

By clicking Add Callout, the Callout Flexible Content item will open

Here you can add a heading, image, text and links to a box that can be either grey or yellow. Most fields are optional, so this can be a simple box with links to a more robust box with highlighted info including photo, links and description text. In our example, we have added everything to show what it looks like.

Description Code

After the CTA section, there is the Description code, and the ability to add another one. Usually if you are editing the page there is no need to add another Description Code, unless the Program has expanded somehow to include something else.

Post-Content

After the Description Code area is a Post-Content text field. This is great for information that is supplemental

Note how this Post-content text comes in after the Description and before the Department-wide blocks (in this case, the Contact Us block)

Social Media Callout

The last extra you can add to the page is a Social Callout Flexible Content Item. Read more about this Flexible Content Item here.

Click on the Add Social Media Callout and you will see fields to fill in to add Department social feeds

Add as many as you’d like with the Add Social Media Callout Link button. Since this is just an example we didn’t use the URL with the handle in it.

Now if we save the page, you can see how that looks at the bottom of the page

 

 

Embed forms and other content in Drupal

To embed video, refer to these detailed instructions.

Embed Role

Some users have a special role called Embed that grants them full HTML permissions in the new site. If you have been granted Embed permissions, you may use these instructions to embed forms and other content that provide iframe or javascript embed code.

If you don’t have this permission but would like to request it please reach out to help@brynmawr.edu or communications@brymnmawr.edu for assistance.

Adding and Editing Embed Flexible Content

Only use embed content from known, trusted sites. Ask Web Services if you aren’t sure.

To add embed or full HTML content to your page, expand the Flexible Content dropdown and select Embed. Read more about Flexible Content Items here.

This Flexible Content Item is used to embed a form or something advanced that the WYSIWYG is programmed to strip out.  It is similar to the Full HTML ability in the old site.

It should only be used for specific code-related embedding needs. Using embed requires a special role..  If you don’t have the Embed role, you will see something like this:

If you do have the Embed role, you would see a non-WYSIWYG text box appear. In this example, we have pasted in the WuFoo embed code so a form will appear on the page.

Copy the code you wish to embed from your original source (such as WuFoo, Panopto, etc).

EXAMPLE:
For example, in Wufoo, hover over your form and click “Share” to get the form code.

Example screenshots of getting embed code from WuFoo

In Panopto, there are a few options to check, if desired. We care about the captions – so the “Show Captions” box should be checked as the default and viewers can turn them off if they need/choose.

Here’s a link to the Panopto doc with a video tutorial and details on all of the options: https://support.panopto.com/s/article/Embed-a-Video

Screenshot example of getting iframe code from Panopto

Once you have the code, paste it into the non-WYSIWYG text box of the Embed Flexible Content Item.

Save your page and see if the form or other content is displayed as expected.

Edit the Drupal page you want to add the video to.

Locate the point in your text where you wish to embed the code. If it is in the middle of the WYSIWYG, you will have to add another WYSIWYG then cut the text that should follow the code from WYSIWYG pre-code and paste into the WYSIWYG that should be post-code.

Then, add an Embed Flexible Content item.  Once you have the code, paste it into the non-WYSIWYG text box of the Embed Flexible Content Item.

Drag the Embed to be in between the two WYSIWYG

Save your page and see if the form or other content is displayed as expected.

 

 

Navigation Menus in Drupal

Please visit this link to view the Special Role Session video.

Site Navigation

The navigation that appears on the left-side of any Inside Bryn Mawr page is one continuous menu hierarchy for all the Inside Bryn Mawr pages.

If you need to get to the next highest level than where you are, please use the breadcrumbs or main menu.

Any menu item with a > means there are more submenu items for that one.

The four main areas of Inside Bryn Mawr are

  • Academic Information
  • Offices and Services
  • The Latest
  • Policies and Handbooks

Within these areas members of the Bryn Mawr Campus community will find most day to day information they need.

 

Adding a Menu Link for a Page

This is a task for only select people. If you do not have permissions and training as a Menu Editor on the site and you need a page to be part of a menu, please contact Communications communications@brynmawr.edu.

Menu Editor Role

The Menu Editor role is a special supplemental permission granted to Web Stewards that play an integral part in publishing lots of content for their department and need to place items in the menu on an extremely frequent basis.

SPECIAL NOTE on Menu Editor role: When granting this permission, we remind folks to: “please be cautious with any Menu Item. Please be extremely careful with menu item placement.  If you are unsure of where or how to place a page into the menu, please have someone in Communications help you communications@brynmawr.edu. Never delete a menu. Use extreme caution about deleting menu items. If you are unsure of whether or how to remove a menu item, please have someone in Communications help you communications@brynmawr.edu.  Remember, with great power comes great responsibility.”

If you are a Menu Editor, upon login you will see an additional Admin Toolbar tab called Structure.  You will also see on the right-side of the Create/Edit screen for your content a section called “Menu Settings”

Menu settings will be available on both News and Basic Page.

Adding pages to your department’s left navigation menu

Menu Links Within your Department

Once you are either creating or editing a News or Basic Page (Content Item), you will have the ability to provide a menu link for that Content Item in the Menu Settings area on the right side of the screen.

Creating a new Basic Page

 

Editing a Basic Page

 

Creating a new News page

 

Editing a News page

If you are establishing a menu link for the Content Item you are creating or editing, you will need to click on the Menu Settings text to open the section.

Once open,

you can check “Provide a menu link” to open the menu settings detail section

The Menu Link Title field will be the text that everyone will see in the menu for this link.  It will also be what you will look for when you set the Parent Link of a different page (more on that later). Be succinct but clear with what you write. By default, Drupal will make it the title of the page.

As you can see by our silly example, the terrible title has become the link text as well.

We can edit the menu to something a little better, while leaving the page title alone.

The next field is a Description field that is only displayed when you hover over the menu link text. By default it is blank.  We usually don’t fill it in.

The Parent Link is where you want this link you are making to live under.  In our example, there is a “Math Newsletters” parent link that we are using to place our “BMCUAT Test News Math Group” page under.

Since the Parent Link list is very long, there is a type ahead feature to narrow down where in the menu you can start from.  Again, in our example, we started typing “math”

From here we can use the scrollbar to slowly find which Math item we want to use as our Parent Link. Let’s find “Math Newsletters”

Once you find the item you want to use as your Parent Link, click on it and Drupal will set the Parent Link to that item.

The next field to fill in is the Weight field.  This will determine the order of the menu link items that appear under that Parent Link.

Drupal starts counting from 0, so the menu item weight goes:

  • First Item = 0
  • Second Item = 1
  • Third Item = 2
  • Fourth Item = 3
  • And so on

If I know there are already three menu items under the Parent Link and I just leave the weight field as the default (0) then it will be under all the other ones that were left as 0, but above any item that has another number in its weight. Here is an illustration of this:

In this example, the “BMCUAT” item was already in the nav and had the weight set to 0. We added “Math Test Page” and left its weight at 0 also. The next item “Math Newsletter Spring 2021” has a weight of 34 and the “Math Newsletter Fall 2020” has a weight of 36, while the item “Math Newsletter Spring 2020” has a weight of 37.

If we know there are already three menu items under the Parent Link, we can make the weight of our new item 3 so it will appear at the bottom of the list. If we don’t know the weight of the other items we can choose a higher number, like our example above.

Menu Links Outside your Department

Menu links that point to other sections within Drupal will move that visitor to that area of the website. This means that the left-side nav that they clicked on will change or disappear, depending on where that particular menu navigation link points.

In our example, both the BMCUAT item and the Math Test Page are News pages.

The News page is special in that it always lives within the main News area in the Bryn Mawr Home area or Marketing theme.

Because we put the menu link relating to that Content Item into our Math Left Nav menu, when a visitor clicks on it they will leave our Math Department (which is in our Inside Bryn Mawr area or Inside theme) and the Math Left Nav menu and enter into the News area, which has no Left Nav menu.

Having lots of navigation like this may become confusing for your visitors, so try to have most links in the Left Nav menu stay within your Department for continuity.  It is ok to have an occasional link be outside your department, but keep it to a small minority.

Reordering Menu Links

It is recommended that you do the following for each page that shares a Parent Link item:

Edit the page

Change the Weight of the Menu Link for the page

Then save the page.

View the page and refresh it to ensure the change you made is what you intended.

Go to the next page that shares the Parent Link Item and repeat

This method ensures that you only touch the correct link items that you intend.

Manually Reordering the actual menu

CALL COMMUNICATIONS TO ASSIST

Please contact Communications communications@brynmawr.edu.

If you find you really need to reorder an enormous amount of menu links under a whole Parent Menu Link item, you can go to the menu link list. NOTE: this is delicate work and can easily break the site! If you are unsure, please contact Communications communications@brynmawr.edu to help you.

PROCEED AT YOUR OWN RISK

In order to find the menu you need to reorder, you should pay special attention to the breadcrumbs on the top of the page

In this example we can see that the hierarchy is:

  • Inside Bryn Mawr
    • Academic Information
      • Departments and Programs
        • Mathematics
          • Math Newsletters

We would need to first find the Inside Bryn Mawr Main menu.  We can do that by hovering on the Structure tab in the Admin Toolbar and click on Menus

Once on the Menus page, we need to scroll til we find Inside BMC Main

Then click the Edit menu button on the right.

This will bring you to a list page of top-level menu items

Remembering our hierarchy from the breadcrumbs

  • Inside Bryn Mawr
    • Academic Information
      • Departments and Programs
        • Mathematics
          • Math Newsletters

We next need to find “Academic Information”.  Click the Edit child items link to open this level of the menu.

We next need to find  “Departments and Programs”.  Click the Edit child items link to open this level of the menu.

So now we can look for “Mathematics” and this will take some scrolling because the menu links are alphabetical.

It is easy to lose your place so go slow and pay very close attention.

Now that we have found “Mathematics” Click the Edit child items link to open this level of the menu.

Before we proceed, let’s draw attention to the breadcrumb that appears at the top of this menu page. It helps you know you are in the correct hierarchical menu item.

We next need to find “Math Newsletters”.  Click the Edit child items link to open this level of the menu.

Since we want to reorder the Math Test and the BMCUAT menu items we can drag the arrows up or down to reorder items.

You should now see an asterisk next to the menu title. This tells you something has changed.

Be sure to scroll all the way down and click “Save” when you are done. Save often if you are making a lot of changes.

Affirm that you see the expected change by visiting a page with the menu to review the link order

Session Video

This is a Panopto Video and may require you to sign-in to view.

Special Role Session – Menu Editor

Course listings in Drupal

Course Listings Page

Bryn Mawr course listings are automated from Bionic. This data feeds the Bryn Mawr website, Undergraduate Course Catalog, and the Tri-Co Course Guide.

Please send corrections or updates to Bryn Mawr course listings to registrar@brynmawr.edu.

Course Editor Role

Some users have a special role called Course Editor that gives them the ability to create and edit course and program description pages within their group.  If you do not have the Course Editor role, please reach out to Communications  communications@brynmawr.edu to update your course pages and/or get appropriate training to become a Course Editor yourself.

NOTE: Though the typical practice is that Communications will create the course and program description pages,  the course editor role does allow you to create those pages yourself.  Always consult with Communications communications@brynmawr.edu before creating a new Course page

Creating Course Pages

Go to your Group Management screen for the department in which you need to add a Course page and select Course from the “Add Content to..” right sidebar. In this example, we are in the Anthropology department’s Group Management screen.

This will take you to the Create Course screen

You will see that there are certain optional and required fields.

To make a plain Course page, you would fill in the Title field and the Code Type field. This will give enough information for the data feed to pull in the appropriate content.

To add more content, like links, images or supplemental text, you can use the following:

All these fields are described below in the Editing a Course Page section.

To add a Course Code to a Course page, you would need to select a Course Type from the dropdown

Then, depending on the type you chose, you would select either the Subject Code

Or the Conc Code (Concentration)

To pull in the relevant data for the Subject or Concentration.

You can add multiple courses this way by selecting the Add Course Code button and filling in the code type and code for another course to be displayed.

In this example of the Course edit screen, we see the Greek, Latin, and Classical Studies Course page (https://www.brynmawr.edu/inside/academic-information/departments-programs/greek-latin-classical-studies/courses) with three course by subject being pulled in

Once you are satisfied with your course content, you can press save.

Editing Course Pages

When logged in, you can visit the Group Nodes page and sort by Type to find the Courses page

Once you select the Type, press the “Apply” button to sort for that type of content.

You should see only one result in the table

If you have Course Editor permissions, you should be able to see the Edit Node option in the Operations column.

Press Edit  Node to get to the edit screen.

Alternatively, you can navigate to the Courses page of your department and press the Edit tab at the bottom of the page.  The Edit tab will only appear if you have permissions to edit it.

Adding Custom Text to Your Course Page

Pre-Content

Use the Pre-Content WYSIWYG for adding text and images to the top of the page. Pre-Content text displays above the boilerplate text that is present on all course pages. This will be a great place to add things that pertain to all courses offered (especially if more than one Course Code is displayed).

Here is the text we added as displayed on the page:


Description Field

Use the Description field in the Code section of the content entry form to add text to the top of the Course Code, above the boilerplate text present on all course pages but below Pre-Content text if any was entered..

Here is the page with the Pre-Content and the Description filled in:

As you can see these are two places where you could add custom text, links, button-links, images, etc. toward the top of the page to better curate your course information.

Since the Math Courses page had a photo on top, we will add it here in the Pre-Content area.

Add an image

When you click on the Image icon in the WYSIWYG toolbar  you will see a pop-up window appear that is defaulted to the Browse Library tab

To add an image, click on the Upload tab for uploading a new image or Browse Library tab for an already uploaded image. Please refer to our Adding Images tech doc for detailed instructions.

Additional Text

Within the Code section, there is an Additional Text field that you can use to add custom text, links, button-links, images, etc. toward the bottom of the page. One example of Additional Text is manually listing Haverford or Swarthmore course schedules and descriptions. For this example, use the table button available in the Additional Text field to create a table for your schedule. Please refer to our Tables in Drupal tech doc for detailed instructions on adding tables in a WYSIWYG.

Just past the Additional Text field is a place to add another Course Code, if you are displaying multiple Courses or Concentrations (like the Classics where they display Greek, Latin, etc.)


Post-Content

ThePost-Content field, located just past the Add Course button, is where you are encouraged to add things that you used to display in the sidebar on the old site. In our example for Math, there was a bit of custom text that would be perfect for the end of the page.


Social Media Callout

The last item in the Course content entry form is the Social Callout Flexible Content Item.  This is a great place to link to the department’s social media feeds.

Once you are satisfied with your changes, you can press save.

Tables in Drupal

Contents:

Tables in the WYSIWYG

You can also create a table in the WYSIWYG by putting your cursor where you want the table to be inserted and pressing the table icon in the WYSIWYG dashboard:

Once clicked, you will get a Table Properties popup window where you can tell it how many rows and columns you want, as well as if there should be table headers, row headers, a caption or summary

Once you are satisfied with the properties you entered, you can hit the OK button

Note: All properties may be adjusted later by right clicking (ctrl+click on a Mac) on the table and selecting “Table Properties.”

Then you will see the empty table inserted into your text, ready for you to fill out.

 

Pasting tables from Word or Excel

You can also insert a table and then paste a table from Word into it by highlighting all the cells.  You can also just put your cursor where you want the table to show up and paste the table from Word right there.  Either way, Drupal will popup a message that asks if you’d like the Word extra code to be cleaned up. You should say OK

This puts your data right in the table:

You can also copy some cells from an Excel spreadsheet and paste it right into the WYSIWYG or you can insert a table, highlight all the cells and then paste.  Here is how they look in the WYSIWYG, but they don’t look different in the actual page.

If you need to edit the table properties to, say, add a header row, you can right click to see what things you can do. You can add cells, rows, columns just by hovering over the triangle on the right to see more options. You can go into the table properties to add header row or header column

The rest of the things you can do is very similar to what you are used to with a typical WYSIWYG such as bold, italics, text alignment, and bullet points.

 

 

Editing an existing table

To make your table easier to edit, right click on the table and select “Table Properties,” then change Border Size to 1.

Add or delete rows by right clicking on the table and using the row menu.

If you are adding content from another source, paste content into one cell at a time, or type the content into Drupal directly, for best results. It is difficult to paste from a table in Word or other sources and get content into the correct cells.

To edit the properties of your table to add headers or other elements, right click (ctrl+click on a Mac) on the table and select “Table Properties.”

 

This will have a Table Properties modal popup. This is where you can set things like headers and the number of rows and columns.

 

Select which rows should be headers (e.g. First Row). Row and column headers are recommended for easier reading, and for accessibility to users of screen reading software.

 

Events in Drupal

“Events in Drupal” are advertisements of your event on the college website and also in the Daily Digest. Please note you will still need to book your room through the Conferences and Events department.

Contents

Submitting an Event:

Drupal Users: Content->Add Content->Event and fill out the form.

OR

On your Group Page, find the Submit Content area on the right and click on the Event link and then fill out the form.


Non-Drupal Users – Try either of these ways to get to the form

Navigate to https://brynmawr.edu/inside/events/submit  and fill out the form.

Navigate to Inside Bryn Mawr, then hover over The Latest and select Promote Your Event from the dropdown.  Fill out the form.


Back to top ^

Filling in the form for Drupal Users (logged in):

Event Title: Use an effective title, since this will display both on the website and in the Daily Digest. It is better to be concise whenever possible. If the actual name of the event is more than a handful of words, consider using a shortened title in this field and the expanded version in the body of the page.

Image – The Image field is collapsed by default since it is optional.  If you wish to add an image, please make sure you expand both Image fields as the outer field is for caption and orientation and the inner Image field is for actually uploading or embedding an image

DATE/TIME: This is defaulted to no date/time. Please use the date picker to choose the correct date for your event. Please be sure to enter an end date/time for your event.

Duration – Duration field is defaulted to 1 hour, so if your event is less or more time, please select the most appropriate choice.

Both the time and date fields are set to be manually filled in as:

  • mm/dd/yyyy – for the Date
  • hh:mm AM – for a morning time
  • hh:mm PM  – for an afternoon/evening time.

In some browsers you may encounter a calendar and clock icon that will allow you to use the picker if you click on the icons in the appropriate field. If you don’t see the icon, just put your cursor in the field and start typing the Date and Time manually.

Event Location: Choose from the dropdown menu, which includes “Off-Campus Event” “Online/Virtual Event” or “Other.”

 

Location Detail: Optional field. Enter additional details about the Event Location, like a room number or street address, and more information if selecting Other as the location.

Event Type: Choose from the checkbox list. This allows multiple choice.

Event Audience: Choose from the radio button list. This allows only one choice.

Email of person submitting this formthis field will be blank but is a required field so that Communications can follow up with publishing all the information needed for your event. You, the person filling in the form, should put your email address.

Event Contact Name: The person running the event, which could be different from the person filling in the form.

Event Contact Email: The person running the event, which could be different from the person filling in the form.

Blurb: A short summary of the event. This text will appear in the Daily Digest and the Events listing page and is limited to 200 characters.

Body – Optional field. The next field is an Advanced WYSIWYG where you can put images, videos, blockquotes, links, as well as bulleted and numbered lists. Information in this field will only display on the Event Detail Page.

Use this to add more information for the event. Do not repeat the blurb information as it will then appear twice on the Event Detail Page.

Zoom Links: If you add a Zoom URL link in the Body field, please be aware that it must be either a registration link or a recording link. Non-registration or non-recording Zoom links will throw an error on the screen and not allow you to save the event.

Flexible Content – This is to display Flexible Content Items on your event.  Since Events are reviewed and approved by the  Communications Team, you may want to check with them about the Flexible Content Items you may want to add.

Flexible Content Items on an Event are

  • WYSIWYG
  • Accordion
  • Announcement 4-up
  • Callout
  • Carousel
  • Columns
  • Contact
  • Embed
  • Feature: Grid
  • Feature: Large
  • Feature: Medium
  • Feature: Quote
  • Image Detail: Large
  • Image Gallery
  • Image List
  • News & Contact
  • News: 3-Up
  • People: List
  • Social Media: Callout
  • Social Media: Connect
  • Special List: Large
  • Special List: Small
  • Story: 1-Up
  • Story: 3-Up

 Please see our article on Flexible Content Items for more details.

Tags (syndication)

This next field is how you can syndicate your event across our website. By selecting tags that are relevant for your event it can be pulled into other pages by referencing that specific tag through an Event 3-Up Flexible Content Item on that page.

This Tag field is an Autocomplete field, so you will need to start typing to see some tags from which to choose.

You can add another tag by clicking the Add another item button.

The Tags field is a setting for Announcements, Events, News and Story that helps the website categorize the content for display.

The Display Theme(s) (see below) and Tags work together to pull the desired content into a display on a page.

Daily Digest Opt In/ Opt out – Default is for it to appear in the Daily Digest (opt in)

To Opt Out of Daily Digest Publication: You can also choose not to publish your event in the Daily Digest by checking the box next to that selection.  If you check the box, the only thing left to do is press Save.

Daily Digest Dates: This will promote your event to the Daily Digest e-newsletter on two specific dates you pick with the date picker as well as on the day of the event.

Display Themes

If you are filling out an Event Submission form as a logged in Drupal user, you will see a “Theme(s) & Options” link on the right-side of the screen.  If you expand it, you will see there are several choices you can make for where this event can display.

The Display theme is a setting that is set for Announcements, Events, News and Story. This tells the website that this piece of content is allowed to be displayed in all the themes that are selected in this field, whether as a direct piece of content (like a Basic Page or News) or via a Flexible Content Item that has one of these Display themes set.

Display Theme for Events is default set to Inside Bryn Mawr as that is the Theme where the Event Listing Page hub lives https://www.brynmawr.edu/inside/latest/events

Display Theme(s) dictate what other themes your Event can be displayed in – this includes being displayed in Event 3-Up Flexible Content Item that may exist on Basic Pages, etc.

So, if you want your Event to appear in GSAS themed pages that pull in an Event 3-up with the Tag STEM this event would have to have “STEM” in the Tag field and also have the Display Theme additionally set to Graduate School of Arts and Science (GSAS).

Press Save

Await confirmation that your Event has been published.

What to Expect Upon Pressing the “Save“ Button:

  • You will receive a message stating your event has been submitted for review.
  • The event will remain unpublished until Communications can review it.
  • If any additional information is necessary, you will be contacted by a member of the Communications Team.
  • When your event is approved and published, you will be contacted by Communications.
  • Your event will appear on the Events Landing Page on the date of your event.
  • If you did not opt out of advertising in the Daily Digest, your event will be advertised on the day of the event and on the dates you selected in the Daily Digest.
  • If you choose to add an Event 3-up Flexible Content Item to a page in your section, your event will appear there only if you have chosen the tag you added to your Event upon its creation.

Back to top ^

If you are a Non-Drupal User (not logged in)

Title: Use an effective title, since this will display both on the website and in the Daily Digest. It is better to be concise whenever possible. If the actual name of the event is more than a handful of words, consider using a shortened title in this field and the expanded version in the body of the page.

DATE/TIME: This is defaulted to no date/time. Please use the date picker to choose the correct date for your event. Please be sure to enter an end date/time for your event.

Both the time and date fields are set to be manually filled in as:

  • mm/dd/yyyy – for the Date
  • hh:mm AM – for a morning time
  • hh:mm PM  – for an afternoon/evening time.

In some browsers you may encounter a calendar and clock icon that will allow you to use the picker if you click on the icons in the appropriate field. If you don’t see the icon, just put your cursor in the field and start typing the Date and Time manually.

Duration – This is especially helpful to set the event to All day. Default is set to one hour.

Event Location: Choose from the dropdown menu, which includes “Off-Campus Event” or “Other.”

 

Event Location Details: Optional field. Enter additional details about the Event Location, like a room number or street address, and more information if selecting Other as the location.

Event Type: Choose from the checkbox list.

Event Audience: Choose from the radio button list.

Email of person submitting this formthis field will be blank but is a required field so that Communications can follow up with publishing all the information needed for your event.

Event Contact Name: The person running the event, which could be different from the person filling in the form.

Event Contact Email: The person running the event, which could be different from the person filling in the form.

Blurb: A short summary of the event. This will appear in the Daily Digest  as well as on the Events listing page.

Body – Optional field. Use this to add more information for the event. Do not repeat the blurb information as it will then appear twice on the Event Detail Page.

Zoom Links: If you add a Zoom URL link in the Body field, please be aware that it must be either a registration link or a recording link. Non-registration or non-recording Zoom links will throw an error on the screen and not allow you to save the event.

Daily Digest Opt In/ Opt out – Default is for it to appear in the Daily Digest (opt in)

To Opt Out of Daily Digest Publication: You can also choose not to publish your event in the Daily Digest by checking the box next to that selection.

Daily Digest Dates This will promote your event to the Daily Digest e-newsletter on two specific dates you pick with the date picker as well as on the day of the event.

Finally, you will encounter a CAPTCHA to ensure you are not a robot.

Once you complete that CAPTCHA you can press Submit

Await confirmation that it has been published.

What to Expect Upon Pressing the “Save“ Button:

  • You will receive a message stating your event has been submitted for review.
  • The event will remain unpublished until Communications can review it.
  • If any additional information is necessary, you will be contacted by Communications.
  • When your event is approved and published, you will be contacted by Communications.
  • Your event will appear on the Events Landing Page on the date of your event.
  • If you did not opt out of advertising in the Daily Digest, your event will be advertised on the day of the event and on the dates you selected in the Daily Digest.

Displaying Events on Other Pages

Lists of events may be displayed on any page that has the Flexible Content Item Event 3-up available to add.  You can read more about this here.

Back to top ^