All posts by Juliana Perry

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

Website Image Size and Format Guide

Image Size and Format Guide

For image width dimensions (in pixels)  for specific uses on our website, see the list at the end of this guide.

See the Images in Drupal guide for further information on how to upload and embed images.

Creating Images for the web

Speed is important!

Website visitors don’t care what format your images are in, they only care that they are viewable and downloaded in a timely fashion (even on slower connections). To accomplish this, images should be optimized for both speed and usability.

Image Mode: Use RGB format.

Image file format

JPG: Use this in most cases! This file type is good for saving images with millions of colors, including photographs and graphics with a variety of shades and gradients.

GIF: Best for line art/cartoon-like drawings.

PNG: Also an acceptable format, but not needed in most cases.

Please do not use other image file formats on the website.

Rules for Saving Images:

  • Make sure you have saved a copy of the original image, so that you can come back and edit it again later if needed. This may be a different format such as, .raw, .tiff, .png, or .psd, or it may simply be the original size of a .jpg (e.g. from your digital camera) It is especially important to save the original if layers have been added to the image or graphic file.
  • .jpg files are often larger and take longer to load. However, most image editing tools allow you to select the file compression for .jpg. For example, you can choose Maximum, Very High, High, Medium, and Low. Try saving larger images under several compression settings and then test them for quality rendering and load times. Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it appears in.
  • Final web images should be saved at the same size at 72 pixels per inch resolution.
  • An ALT tag is required for each image.

File sizes:

Choose the optimal size based on how you are using the image:

  • For banners or hero images, a file size up to 60KB is acceptable.
  • For high end photographs, try to keep them to within 100KB at an absolute maximum.

List of image sizes:

When any image is uploaded, Drupal applies the Focal Point you assign to that image and then crops and scales the image for the area in which it will be used. (Please refer to the Images in Drupal guide article for this in depth).

This means that some images could be used in places that are more horizontal, some more square or vertical, etc.

If we decide to use an image that has a small original size in a Feature Large Flexible Content Item, it may display as very pixelated as Drupal is trying to make a small image fit in a big display element.

With this in mind, it is a good idea to upload images that can work in the following categories:

Image categories:

  • WYSIWYG Images: 800 x 600px
  • Squares and Vertical orientation: Thumbnails; Headshots used for Admissions Officer;  staff directories; News – Portrait; Social Media Connect; etc.  400px wide, (minimum dimension 350x464px)
  • Horizontal orientation: Most Flexible Content Items; News – Wide; Hero; etc.     1900×1022 (2:1 aspect ratio)

Previewing an Image

Remember, you can see the Preview of all the image sizes and orientations for any image you add to a content item.  Here is an excerpt on the Preview function from our Images in Drupal article

we can click on the Preview link under the thumbnail to see that this focal point we picked really will be the best part of the photo to never get cropped out.

 

This puts a pop-up window within our pop-up window that displays all the site-wide Image Styles of the image while employing the Focal Point we just selected. We clicked the Focal Point to be on the bike rider in the middle of the path.

These Image Styles are in a horizontal-scroll pane. If you scroll down you can see the original image for comparison.  Here is a view of the horizontal-scroll-pane moved to see the difference between the News/Event Detail Portrait and the News/Event Detail Wide image styles.

When you are finished with the Preview, you can click the X in the upper right of the Image Preview (inner pop-up window) to close the preview.

 

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.

Upload and Link to Documents in Drupal

Accessibility and Documents on the Web

Before uploading any documents to a Bryn Mawr website, please remember that documents online need to meet Accessibility Standards.

To read about all things Accessibility: https://techdocs.blogs.brynmawr.edu/accessibility

Follow the LITS blog checkaccessibility tag to learn more about Accessibility and assistive technology.

To create Accessible Documents:

Link to an Existing Document

To link to a document that is already in Drupal from a Page or other content types with the WYSIWYG editor.

Type your desired link text.

Highlight the link text.

Click the link button

In the “Search Content” box, begin typing the name of your file. Your file should appear in the list if it is available. Since you are looking for a File (Document) you would need to scroll down and look in that specific section list.

Once you have clicked on the Title of the File you are seeking, Drupal will put in the file’s very boring Drupal path. In this case it is /media/45441  This is the Drupal Reference for that Entity, otherwise known as the Entity Reference.

Click “Save” to finish.

Upload a New Document

Remove spaces from document file names. Spaces will cause errors in your links.

Files must be smaller than 15MB.

To upload a new document from a Page or other content types with the WYSIWYG editor.

Type your desired link text.

Highlight the link text.

Click the link button.  Once the pop-up window opens, Select “Upload Document”

This will open a new browser tab with the following page

Fill in the Name of the file.

Then click Choose File in the File (Document) field

Clicking on “Choose File” will open a pop-up window for you to locate and choose your file.

Once you select the file and click the Open button, you will be returned to the Add File page

Click the Save button

This will bring you to the Media File list view where you can see that your file was successfully uploaded

You can now return to the browser tab in which you were editing your page. You will still see the Add Link pop-up box.

Now, since you uploaded the file, you should be able to start typing the title of the file you just made and see it in the list under the Media – File (Document) section

Once you click on the title, you will see the Drupal path appear in the URL field where you just were typing the title

Click “Save” to finish.

News Articles in Drupal


Content

The Section Management Screen:

When you first log in, you will see a page listing your sections.

Click the link for the section you wish to work on to get to your section management screen.

If you clicked on Mathematics you would then see this screen

You can also get to this (while logged in!) by clicking the Groups link in the top Admin Toolbar

That will take you to a page that looks like this

If you click Mathematics in that screen you would come to this page (which is the same as clicking from the My Groups page)

From your section management screen, select “News”

Back to Top ^

Creating News:

This Content Type has Flexible Content to add to the page, but it also has basic parts for you to put minimal content in without getting too fancy.

When you select “News” under Add Content to [GROUP] from your Group page, you will get a screen where you can enter content into a new News content type

Title – This is the title of your article.

News Author – this is the name of the author

Source – this is a source of the article you are writing. It is a good way to reference or acknowledge an external publication, document or other record where information is coming from.

You can choose from a piece of Bryn Mawr content on our Drupal site by starting to type and selecting the title you wish to use.

Or you can choose to type an external URL. If you use an external URL, it must begin with http or https.

Finally, you are able to tell the browser to open this source in the same or a different browser window.

Date – this is the date of publication. This defaults to the date and time you are creating it. You do not need to change this.

Summary  – will only appear in the article listing/teaser if this article is a featured article or a Bulletin article within the Bulletin List page (/bulletin/explore).

Here the summary can be seen in this Feature Article on the News List page

Here the summary can be seen in this Bulletin Explore list page

Body – The next field is an Advanced WYSIWYG where you can put images, videos, blockquotes, links, as well as bulleted and numbered lists.  Please read more about how to edit in the WYSIWYG here.

Flexible Content

This part of the News gives you Flexible Content that you can add as you wish. Please see our article in techdocs about Flexible Content Items. 

See how all the Flexible Content items look on a News page with our Web Services Example page.

Flexible Content Items for News are

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

Tags (syndication)

This next field is how you can syndicate your News Article across our website. By selecting tags that are relevant for your News Article it can be pulled into other pages by referencing that specific tag through a News 3-Up Flexible Content Item or a News & Contact 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.

Image Fields

You can add an Image by pressing the Upload or Browse Library button and selecting the image to embed.  Read more about uploading media here.

Selecting your image’s orientation will change the way the image is displayed on the News Detail Page.

Horizontal displays as horizontal in line with the rest of the content.

Vertical displays as Portrait orientation to the right of the wrapped text.

Back to Top ^

News Syndication

There are two ways in which News articles are syndicated in the new site. News articles beam to one or more of five News listing pages depending on the articles’ Main Theme and Display Theme settings. You can also include News articles by tag or manual selection on any Basic Page by using the News 3-Up or News & Contact Flexible Content Items.

This also dynamically creates a [TAG] News listing page, so if your tag was “Blended Learning”, the title of the page would say “Blended Learning News” and then all News articles that had the tag “Blended Learning” would be listed here.

In the News 3-up and News & Contact Flexible Content Items, the More News link will point to this  [TAG] News listing page if you have pulled the News items into that Flexible Content Item with a Tag.

The More News link in this page above will take you to the Blended Learning News page, as seen below.
Back to Top ^

News Listing Pages (Syndication)

There are five News listing pages throughout the entire site:

A News articles’ Main Theme and Display Theme settings dictate which Listing Page(s) the article will display in.

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.

When creating a News article, theme settings are found in the right sidebar under Theme(s) & Options. By default, the Main Theme is set to Marketing (a.k.a. Bryn Mawr Home). This means that by default News articles will beam to both the All College News hub on Inside Bryn Mawr and the Undergraduate News hub on Bryn Mawr Home (Marketing).

If the Main Theme field is grayed out, it means you do not have the permissions to change the News articles’ main theme. Some users have a special role called Theme Editor that gives them the ability to edit the Main Theme. For more details on editing the Main Theme and how this impacts Basic Pages and News articles, please refer to our Theme Editor documentation. 

If you want your News article to live in the Undergraduate News hub but also appear in the Social Work News hub (GSSWSR) then you would leave Marketing set as the Main Theme and select Marketing and Graduate School of Social Work and Social Research as Display themes (see screenshot from above).

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.

Continuing on our example from above, if you wanted your News article to appear in the Postbac News hub in addition to the Undergraduate News and Social Work News hubs, you would have to edit the News article and check Postbaccalaureate Premedical Program as a Display Theme, otherwise it would not show up on that listing page.

Back to Top ^

Displaying News articles on Basic Pages (Syndication)

Using the News 3-Up or News & Contact Flexible Content Items, 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. For more information, please see the documentation on News 3-Up and/or News & Contact

Back to Top ^