All posts by kaldrovics

Drupal Training Videos

We have recorded our Training Sessions for all the Drupal Users. Please feel free to review these. The Drupal techdocs that we have for Login, Basic Page Events and Announcements as well as certain Flexible Content Items are covered in the videos below. We may add more as other training sessions occur.

Notes from the Sessions

Our new site has lots of things that will feel familiar even if things are a little different.There has been improvements and additions to what you can do, such as the ability to more easily add things like photo galleries, quotes, and embedded video to pages and articles.

  1. Login will now have Duo two-factor authentication.  This is similar to logging into your Bryn Mawr email.
  2. There are a few Themes for the new site, but your work will stay mostly in the Inside Bryn Mawr theme.
  3. Sections are now Groups. You will see a different experience in the way you find content compared to how sections worked in the old site.
  4. Syndication is now run by Tags and Themes instead of Topics and Sections.  If you recall, we used Topics and Sections to beam pieces of content to different parts of the old site.  Tags and Themes are now the things we use to help beam content in the new site. These are pretty advanced, so we may mention them but won’t get into them in depth in this session.
  5. There are some new terms we will be using to help you become more familiar with Drupal, like nodes, tags, and groups. Knowing these will come in handy as you become more familiar with adding and editing content to the site.
  6. Images and links work a little differently than in our old site.
  7. Biography is also known as Directory.  These terms may be used interchangeably.
  8. Events and Announcements are pretty similar to how they have always worked.
  9. Anonymous User is just a person that isn’t logged in to Drupal.
  10. Authenticated User is just a person that has logged in to Drupal.

Session Vocabulary

There are a few phrases and words you may hear over and over. This will, over time, help you understand how the site uses pieces of content. If you hear something that you don’t quite know what it is, please ask! Here are a few items we have identified that may help you get off on the right foot.

  1. What “group” means. Group is what we used to call Section. It is the area or areas of the website that you are responsible for editing.
  2. We now use the word “tags”.  Tags are what we used to call Topics. As you remember, they were integral in helping us to syndicate content across the site. The way we syndicate things is different now. It is an advanced topic which we will cover later, but if you hear Tags or Display Themes, know that these are things to help syndicate content.
  3. We use the word “node” a lot.  Node is a Drupal term for content that is in the site.  Things that are Nodes are pages, articles, events, etc. Things that are not nodes (but still content ) are files, images, etc.
  4. Quick How-To Tips for Web Editors: https://www.brynmawr.edu/inside/offices-services/college-communications/web-content-accessibility/quick-how-tips-web-editors

Session Videos

These are Panopto Videos and may require you to sign-in to view them

Session I – Login, Basic Page and the WYSIWYG

Session II – Events and Announcements

Session III – Flexible Content Item Basics

Featuring: Accordion, Callout, Carousel, Contact, Embed, Social Media Callout, Special List Large and Special List Small.

Session IV – Flexible Content Item Intermediate A

Featuring: WYSIWYG Video, Columns, Feature: Grid, Image Gallery, Image List.

Session V – Flexible Content Item Intermediate B

Featuring: People List, Social Media Connect, Feature: Large, Feature: Medium, Feature: Quote, Image Detail Large.

CV Upload via Provost in Drupal

Uploading your CV

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.

Provost’s Office Role

In order to have the Provost’s Office approve CVs for posting on the website, there is a special permission level on the website specifically for uploading CVs and adding them to a biography (otherwise known as a Directory page)

This documentation is meant to assist the Provost’s Office with uploading the CVs.

Log in:

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

Press the “Bryn Mawr Login” button

Enter your college credentials and expect dual authentication.

Once you logged in, you will see a screen similar to this.

By pressing the Manage tab on the top left and hovering over the Content tab you can see a few options

Finding Files

If we hover over Content and select Files we will be taken to the list of files in our website.

On this screen, we can search for PDFs by typing pdf in the MIME Type field and pressing Filter. This will help us know if the file is already on the site and how many pages may be using it.

We can also type the filename or part of a filename if we know what we are looking for

Finding Directory (biography) pages

If you click the content tab you will come to a screen where you can look for content.

By clicking on the dropdown under Content Type and selecting Directory, you can filter just for the biographies on the site

You can also type the name of the biography you wish to edit in the Title field.  We will look for myers. After we type that in, we will need to press the Filter button

Once we do that, we can scroll down to see the filtered results.

We can now click the Edit button in the Operations column to edit the page.

Editing Directory (biography) pages

Uploading Files

If we scroll down we will see either a PDF file   or we will see the Choose File button for the CV if there is no PDF file already  uploaded

If we need to edit an existing CV we will need to remove the one that is there, click the Remove button, then follow the instructions below for uploading a new one.

Pressing that Choose File button will bring up our finder window to browse our computer for the file.

After selecting the file we want, we can click the Open button. This will upload that file into our Directory page.

Press Save.

Visit the Biography (Directory) of the person you just edited to ensure there is a link to the CV and it downloads as expected.

Drupal Themes and Theme Switcher

Themes and the Theme Switcher

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

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

Themes have two different settings:

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

Let’s dive into what that means.

Theme Switcher

Theme Editor

Theme Settings

Theme Switcher

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

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

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

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

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

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

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

No matter which Homepage you visit

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

Main Theme

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

Display Theme(s)

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

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

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

Tags

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

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

Themes and Permissions in Drupal

Web Steward

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

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

You would not be able to set the Main Theme.

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

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

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

Theme Editor

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

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

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

Setting and editing theme settings

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

The example below is a News page.

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

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

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

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

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

  • Main Theme=GSSWSR
  • Display Theme=GSSWSR

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

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

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

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

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

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

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

Syndication

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

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


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

Session Video

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

Special Role Session – Homepage and Theme Editor

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.

Preparing Images for the Web in Adobe Photoshop

Before uploading your images to Drupal, it’s important to correctly crop, size, and optimize them to ensure they will display correctly and be accessible. The instructions below are for performing those tasks within Adobe Photoshop.

Insert the desired image into Photoshop

There are two ways to insert images into Photoshop.

Method 1:

  1. Click on File in the menu bar, then Open (or hit Ctrl/Command + O)
  2. Locate the desired image, click on it, and press the Open button

Method 2:

  1. From the Windows Explorer or Mac Finder, locate the desired image
  2. Drag and drop the image into Photoshop

Cropping Images

If you wish to cut out a portion of the image, use Photoshop’s Crop tool. For example, you may wish to remove the students on the left side of the image below.

  1. Select the Crop Tool in the Toolbox (or press the C key)
  2. Click on an edge and drag inward to crop the image as desired
  3. When you’re finished cropping the image, press the Enter key to finalize the change. If you’ve made a mistake, don’t worry! Cropping is non-destructive, meaning the full original image is still available. To undo your cropping, click on Edit in the menu bar and select Undo… (or press Control/Command + Z)

Resizing Images

Images have many different uses in Drupal, and there are optimal image sizes for various applications. If an image is too large or is an inappropriate ratio, the image may not display correctly in Drupal. Below are instructions for resizing images for various purposes. Note that increasing the dimensions of an image may cause a reduction in image quality.

  1. Click on Image in the menu bar, then Image Size…
  2. In the Image Size window, set the unit of measure to Pixels by selecting Pixels from the drop-down menu
  3. Adjust the Width and Height measurements based on how you intend to use the image. To view measurement requirements, navigate to College Communication’s Using Photos guide and refer to the chart under Sizing and Dimensions.
    1. Note: If you change one of the measurements and the other measurement changes automatically, you must perform the following step.
      1. Click on the chain icon to unlock the aspect ratio
  4. Set the Resolution to be 72 Pixels/Inch as below
    1. Click OK

Saving and Optimizing the image for the web

Optimizing the image will ensure that it loads quickly on the web. Once you are ready to save and publish your image, follow the steps below:

  1. Click on File in the menu bar, then Save as…
  2. Select a location to save the picture
  3. Select the Save as type: (JPG should be used in most cases)
  4. Click on the Save button
  5. The JPEG options window will appear. Under Format Options, select the Baseline Optimized radio button
  6. Click the OK button

Your image is now ready to be uploaded to Drupal!