Category Archives: Web Editing

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 ^

Log in and find content in Drupal

Log in:

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

Press the “Bryn Mawr Login” button

Enter your college credentials and expect duo authentication.

Your user home screen will now be your Groups page

Log out:

If you click on your user name in the right side of the Admin Bar you will see a tab appear on the left side of the toolbar to be able to log out

My Groups Page:

The Admin toolbar (black menu at top) now has a Manage button in the top left. Click on that for content editing options to appear in your toolbar.

You will see a link to your Biography (Directory profile) so that you can view it.

If you scroll down you will see links to your sections.

Click on the name of one of your sections to add or edit content within that section.

To see all the content for that section, click on the Nodes button for that section.  This will take you to the Nodes tab of the Section Management for your group.

This page allows you to sort content by published/unpublished and by content type.

Group Management Page:

Once you’re on the page for managing a Group, you will see some quick links in the right and a small blurb about the section to the left.  You will also see two tabs on the bottom of the screen for “View” and “Nodes” where the “Nodes” tab will bring you to a page that only has the table of nodes (or content) associated with your Group.

The “View” tab is the default Group Management page and has a table of “Recent Content” at the bottom of the page for you to see what nodes (or content) is associated with your Group.

 

If you scroll further, you can see a table of the Recent Content in your section.

View a Node (or page)

To view a node (or content) you just need to click on the title of it in the table. This will open the page as visitors to your site would see it.  Alternatively, navigate to the content (use the URL or menu system to find it).

Using Edit tab on the page

To edit the node you are viewing: If you have navigated to the page and you have access to edit, you will see an “Edit” tab at the bottom of the page. Clicking on that tab will open up the Edit Screen of the page (or node).

Finding Content to Edit

There are a few ways to get to the page you may want to edit. Through the Group Management page you can look through the Recent Content, filter and search the Nodes or simply navigate to the page and click the Edit tab.

Edit a Node (or page)

To Edit a node (or content) from your Group Management Page, simply click on the Edit node link in the right side of the Recent Content table to bring you to the Edit screen for that page (or node).

Use the Node tab to find content in your group.

Once you are logged in and in your Group Management page, you will see the Node tab at the bottom of the page.

To Edit a node (or content) from your Group Page Node tab, click on the Node tab at the bottom of the screen. Once there, use the filter to find the content type (Basic Page or News, for example) as this will help narrow down the list.

Once you locate the node you want to edit, click the Edit node button in the operations column of that node to bring you to the Edit screen for that page (or node).

This will open up the Edit Screen of the page you want to edit

The Admin Bar:

If you see the admin bar at the top of a page, you know you’re logged into Drupal.

With the Manage tab on the Admin Bar you can add some content, view some content, and get to your Groups list. Also, depending on your permissions level, you may be able to do other things, such as add menu items.

The Shortcuts tab in the Admin Bar will show you some shortcuts.

The Add Content button will take you to a screen to submit either an Event or an Announcement.

The All Content button will take you the same place as the Content button does in the Manage tab.  This is the Content Screen.

The Content Screen:

If you aren’t sure which section a piece of content is in, you may wish to search all Drupal content. You can do this by clicking “Content.”

You can use the filters at the top of this screen to be able to find something by title, content type (i.e., Basic Page or News or Event) author (usually the person’s username within Drupal), Main Theme (Marketing, Inside Bryn Mawr, etc) or if it is published or unpublished.

Note that you will only be able to edit content for which you have editing access by the appearance of the “Edit” button in the Operations column, as illustrated below. For assistance with content you aren’t able to edit, please contact help@brynmawr.edu.

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 ^

Images in Drupal

Embedding Images

In Pages, News articles, and other various content types and Flexible Content Items, you can add images via the WYSIWYG media browser, and control their positioning.

Resize and crop images before uploading to Drupal, using the recommended image sizes and formats in our guide.

Add an image

When you click on the Image icon in the WYSIWYG toolbar  , or click on an Upload or Browse Library button   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.

Type in the name of the image so it makes sense to folks who browse the library looking for one that will work for their content needs. Avoid non-descriptive names like DSC_0516.jpg.

Next you can use the Choose File button to browse to the image on your computer and upload it.

Once you choose your file, you will notice the screen changes slightly

Notice that the tiny thumbnail of the image you uploaded has a + sign / crosshairs in the center of it and the word Preview underneath.  These two things are very important for setting the Focal Point and seeing it in all the ways the image can be displayed.

You can click on a different part of this image and make the crosshair + be in that spot.

What this crosshair + does is set the Focal Point of the image. In this case, the term Focal Point means the point depicted by the crosshairs + will always be in the image, no matter how the image is auto-cropped for various displays in the site.

In order to see what that means, 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.

With the preview closed, the next thing you will need to set is the Alternative Text. This is a required field for accessibility standards.

The next two fields are auto-fiilled in with your username and the time-date stamp of the upload of the image.

Scrolling past that, there is a URL alias field that is default empty.  It is fine to leave this empty and go ahead and press the Save & Embed button.

Non-WYSIWYG image embed

If you are embedding the image in anything other than a WYSIWYG, once you press that Save & Embed button you will resume entering content for that Item or Content Type.

WYSIWYG image embed

If you are embedding the image in a WYSIWYG, once you press that Save & Embed button you will get a new pop-up window to help Drupal know what to do with this image in this instance of using it within the WYSIWYG.

When adding an image into the WYSIWYG there are choices to “Display as” and it is defaulted to WYSIWYG – Full. This default display, or image style, will have the image display the full width of the content area. The WYSIWYG – Horizontal will allow you to float a horizontal display of the image so the text will wrap around it. You can float the image to align Left, Center, Right, or None. The WYSIWYG – natural will let the image display as it was originally uploaded.  The WYSIWYG – Video Full is for when one is embedding a video into the WYSIWYG.  We will cover this in the Embedding Video techdoc article.

The next field is the Caption field.  This allows you to add a caption if you desire. If you leave it blank, there will be no caption. Adding caption is encouraged as it makes your image more accessible.

Now you can click the Embed button. You can see it embed the image into the flow of the WYSIWYG text, right where you had placed your cursor.

If we save the page now, we can see what it looks like.

If you are unsatisfied with what it looks like, you will want to edit the image.  Click the Edit tab at the bottom of the screen.  Then, find the WYSIWYG and scroll to the image.  Now either double-click on the image or right-click and select Edit Image

This will take you back to the Embed Media screen where you can edit some of the choices you made, click embed and then re-save the page to see the edit.

How does Drupal know how to display the image?

Let’s pause for a moment to understand what Drupal does with the image and how it uses it around the site.  Drupal takes the image file with the assigned focal point and puts it in the Library. The image file is referenced when we add that image file to a new page or a new Flexible Content Item by choosing it from the Library. Drupal will know from that reference to use the originally assigned focal point and corresponding Image Styles for that image file based on where you are adding it.  In our earlier screenshot, we showed two News image styles. So, if we are referencing this image by choosing it while we are creating a News article, those are the image styles Drupal will know to use.

Why can’t I edit the Focal Point of an existing image?

Please be mindful of the Focal Point and never reset it once you have embedded the image.  If you wish to have a version of the same photo with a different Focal Point, you would need to upload the photo a second time and save it with a different name to reflect the fact that there is a new focal point. For instance, I named this “Tree-lined Campus Path” since my focal point is on the path. Perhaps a new name for a second upload of this photo could be “Campus Trees” if I need a new version with the focal point moved way over into the trees on the left.

Video in Drupal

Adding Video in Drupal

Adding a YouTube or Vimeo video  can be done by embedding directly in the WYSIWYG Editor.

Adding a Panopto video requires you to use an Embed Flexible Content item. Read more about the Embed item here.

YouTube and Vimeo

Remote Video allows you to associate a URL of the video with a Cover Image to display either a YouTube or Vimeo video. YouTube and Vimeo are the only hosted video providers that can be added to WYSIWYGs in the new site. For other providers, such as Panopto, please see Other Hosting Providers below.

Embedding Video in WYSYWYG

Usually you will embed videos within the WYSIWYG of a Basic Page or News article.

When creating or editing your Basic Page or News article, locate the point in your text where you wish to embed the video.

Place your cursor there and then in the WYSIWYG toolbar, select the Video Embed icon. NOTE: If the WYSIWYG doesn’t have that icon, you will be unable to embed a video in it.

Video Embed icon has the play button

 

Upon clicking the Video Embed icon, a pop-up window will appear to “Select media item to embed”. There will be two tabs at the top: “Browse Library” and “Add New”

Adding a New Video 

If we click the Add New tab we will see a form to fill out to add the video item to the library

The name field is required.  It is important to name your video clearly, but succinctly.

The next field is the Cover Image. This requires you to choose a still image that will represent the video.  It can be a still from the video, or it could be a photo that embodies the essence of the video’s subject matter.  Clicking “Choose File” will open your computer’s File Browser Finder so that you can locate and click on the correct image.

Once you’ve selected the file and clicked “Open” a thumbnail will appear in the Video form and you will encounter a required Alternative Text field

You must fill out the Alternative text to comply with our Accessibility Standards.

The next field that you will need to fill in is the URL field.  This is the address of the YouTube or Vimeo video.

Scrolling down, you will see that the rest of the fields have defaults that can be left.  Press the Save & Embed button.

Next you will get an additional popup that wants you to check your selection.  This is your chance to replace it or continue

Press Replace Selection to start over.

Press Next to continue.

Now you will encounter another popup that will ask for a caption for the video. This is optional, but it is helpful for the visitor.

Once you have set your caption, press Embed. This will bring you back to the content entry form.

Scroll down, save your page and see if the video is displayed as expected.

Editing the video you just created

If you don’t like the cover image or something about the video, you can edit it by first, editing the page, then editing the WYSIWYG. Then scroll to find your video and right-click to see the “Edit Video” button.  You can also double-click on the video to edit it.

This will bring up a simple popup with the file name of the video

By clicking on the file name, you can edit the video. NOTE: Only do this for a video you created!

Clicking on the file name will open a new browser window with the video edit screen.

We would like to pick a new cover image.

By clicking the “Remove” button next to the image filename, we will remove it from the Remote Video and our library.

We can now upload a new one by clicking “Choose File” and selecting a new one from my computer.

Once we are satisfied with our changes, we can scroll down and press Save.  This will keep us in that new browser window. We can close out of it and the browser window with my page editing will still be open.  It will still have the  popup open with the video filename. Since we just edited it, we can press “Embed” and it should update.

We can see that it updates the cover photo in the WYSIWYG.

Saving the page now will let us confirm that our Remote Video object looks better.

Browsing the Video Library

Upon clicking the Video Embed icon, a pop-up window will appear to select media item to embed. There will be two tabs at the top: “Browse Library” and “Add New”

If you scroll down you can see that the “Browse Library” tab has a pager and an Embed button.

Once you have made your selection, press the “Embed” button

Now you will encounter another popup that will ask for a caption for the video. This is optional, but it is helpful for the visitor.

Once you have set your caption, press Embed. This will bring you back to the content entry form.

Scroll down, save your page and see if the video is displayed as expected.

Please note that not all videos in the library have images

You can see what it looks like in the WYSIWYG

And if we press save, you can see what it looks like on the page

If you encounter this, please contact Communications so that they can edit the video.  If you really want to use it without an image, make sure it is in it’s own WYSIWYG so it won’t display in an odd way as seen above.

One other option to display a video is to have it be part of the Feature Large and Feature Medium Flexible Content Items.

Other Hosting Providers (Panopto) 

The only way to add video from other hosting providers, such as Panopto, is by adding it as an iframe via the Embed Flexible Content Item.

Adding Video via Embed Flexible Content

Note: You must have the Embed role before proceeding.

If you don’t have the Embed role, please contact Communications for help with placing your video. Read more about the Embed Flexible Content item here.

Copy the embed code from Panopto (or other video hosting site).

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. NOTE: “Show Captions” is checked.

 

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

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

Then, add an Embed Flexible Content item and paste the iframe code into it.

Drag the Embed to be in between the two WYSIWYG

Save the page to see if the video is displayed as expected.

Can’t find your video?

Go to Content, select the Media tab and filter by Type=Remote Video to see all available videos. Please Note: Only uploaded videos such as YouTube or Vimeo will be found here. The Panopto videos you place in the Embed Flexible Content Items are unique to that embed instance and the page in which it is embedded. If you want a single Panopto video to appear on multiple pages, please contact Communications to assist you with an In-Context block placement of that video.

 

Announcements in Drupal

Announcements

Announcements now appear on the website in listings [ https://brynmawr.edu/inside/latest/announcements ] as well as in the Daily Digest e-newsletter.

Announcements are items that can be submitted via one form to appear in both places or only on the website.

Announcements can appear up to twice in the e-newsletter. They include a headline, an information blurb of up to 200 characters for the Daily Digest, expanded information for the Announcement Detail Page on the website, an optional link for more information, and a tag so they can be syndicated to other pages within our site.

Creating an Announcement:

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

OR

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

  • Non-Drupal Users: Navigate to https://www.brynmawr.edu/inside/announcements/submit and fill out the form.

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

Title

Fill in the title of Announcement [ Example: Last day of class ]

 

Date and Time

There is a Date & Time field that is pre-populated with the timestamp of when you are submitting your announcement. You can leave this field as is.

Blurb

The next field is the Blurb field. Information in this field appears in the Daily Digest and the Announcement List view 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 Announcement Detail Page. You can read more about how to use a WYSIWYG in our Flexible Content article.

This optional field only needs to be added if you want your announcement to link to a more detailed page of information on the website (Announcement Detail Page). Leaving the body field blank will cause the announcement to link directly to the URL that you put in the Link Information field. If both the Body field and the Link Information field are blank the announcement will just appear as plain text on the listing page.

Tags (syndication)

This next field is how you can syndicate your announcement across our website. By selecting tags that are relevant for your announcement it can be pulled into other pages by referencing that specific tag through an Announcement 4-Up Flexible Content Item on that page. (Please see our techdoc article on Flexible Content Items for more details)

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.

Link Information

Optional field.  The next field is to add a URL and link text to your announcement. This is especially helpful for adding a registration link.

If the URL you add is a Zoom link 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 Announcement.

Leaving the Link Information field blank will have the Announcement appear as plain text on the Announcements listing page.

Fill in the Link Information with a URL that begins with either http:// or https://  This URL will be linking the title of the announcement to the URL address, whether that is an outside link or a page on the Bryn Mawr website

Email

Fill in your email so that Communications can contact you.

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 – Opt in

If you want your announcement published in the Daily Digest, please select which audience group you wish to advertise this announcement.

Also, please select up to two Daily Digest publish dates

This Daily Digest date field has a date picker for your convenience. You can always type the date manually in the field instead.

Press Save

Await confirmation that it has been published.

What to Expect Upon Pressing the “Save“ Button:

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

Fill in form as Non-Drupal User (not logged in)

Title

Fill in the title of Announcement [ Example: Last day of class ]

Blurb

The next field is the Blurb field. Information in this field only appears in the Daily Digest and is limited to 200 characters.

Link Information

Optional field.  The next field is to add a URL and link text to your announcement. This is especially helpful for adding a registration link.

If the URL you add is a Zoom link 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 Announcement.

Leaving the Link Information field blank will have the Announcement appear as plain text on the Announcements listing page.

Fill in the Link Information with a URL that begins with either http:// or https://   This URL will be linking the title of the announcement to the URL address, whether that is an outside link or a page on the Bryn Mawr website

Email of person submitting form

Fill in your email so that Communications can contact you.

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 don’t want your announcement in the Daily Digest you can select to opt out of the Daily Digest by ticking the box.

Daily Digest Opt In – If you want it in Daily Digest, please click the Daily Digest Info to open that section and fill in the fields.

Select which audience group you wish to advertise this announcement.

Also, please select up to two Daily Digest publish dates. This Daily Digest date field has a date picker for your convenience. You can always type the date in the field manually instead.

CAPTCHA

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 announcement has been submitted for review.
  • The announcement will remain unpublished until Communications can review it.
  • If any additional information is necessary, you will be contacted by Communications.
  • When your announcement is approved and published, you will be contacted by Communications.
  • Your announcement will appear on the Announcements Landing Page in posted date order.
  • If you did not opt out of advertising in the Daily Digest, your announcement will be advertised on the dates you selected in the Daily Digest.
  • If you choose to add an Announcement 4-up Flexible Content Item to a page in your section your announcement will appear there only if you have chosen the tag you added to your announcement upon its creation.