Style Guide – Discover Brigham

Design, Style & Content Guide

This part of the site is just for editors working on the website. This is where you can find all of the resources and information you’ll need to make updates to the site, as well as answer any questions you have about formatting, structure, site hierarchy and information architecture, plus how to properly Categorize and Tag your content so that the site functions as intended.

Department or Division Web Editors

Primary Editor

The primary editor for your group’s pages should be identified so that each page/content has an owner responsible for updates. Before your page can be published, it should be submitted for initial approval.

Workflow for Images for Events

Flatscreens and Featured Images

Flatscreens should be created for event promotion. The dimensions for the flatscreen image are 16:9 proportions and as such are the ideal size for featured images for the website, so when the flatscreen is created, it should be created with the thought that it will also be used on the website in such a capacity.

Essentials for Adding New Content

Excerpts

Excerpts are required. Excerpts can be found on the right side of the WordPress screen. Your excerpt can be somewhat long (think a paragraph or so), because it will appear as a description anywhere applicable. So, for the Office for Research Careers homepage, for instance, it would be appropriate to have a high level overview of the ORC. All pages and posts must have excerpts. The excerpt may not always display, depending on the specific page, but will appear in general searches and so must be a description of the page.

The only exception for this is a ‘People’ post, where you’d consult below to identify the appropriate formatting for titles, degrees, etc.

Image Cropping

To ensure that image dimensions are the same across the site (Discover Brigham), we use a 5:7 aspect ratio to crop the images. See the screenshot below. When you upload an image to the media library and try to edit it, these are the options you will see.

Highlighted are the areas you will need to make changes to successful crop the images.

1: Where to add the 5:7 image ratio

2: Mouse over photo to crop image

3: Click on crop to image

4: Save changes

Adding News

Clinical and Research News

When adding a news article from Clinical and Research News, you must tag the post as ‘Clinical and Research News’, once you do that, a field should appear below the content box where you can put the source link for the original article. This way we can both use the content and always make sure to cite the original source of CRN for each post.

Each of these posts MUST have a featured image. If there is not an appropriate image (600×400, 3:2 proportions), then refer to a past image in the repository that is general but relevant, if necessary.

Adding Content by Content Type

Content Type: People

When you are adding someone to the site (with the exceptions of interns and poster winners), you should first search to see if they already are on the site and you just need to add them to a category.

If they are not on the site, you need to have a headshot (high resolution), their degrees, titles and a short biography, if possible.

We have created a submission form for use, so you can send that form to speakers, etc. this way, all of the information will be accurate and up to date from the individuals.

Title: the title of the post should be the individual’s Full Name, Degrees. Do NOT use periods in degrees, formatting should be: MD, PhD, etc.

Every person needs to have an excerpt with the information you want visible on the site prominently.

In the excerpt space, you must put their titles (this is what will appear below their photo and name on a staff/leadership group page, so it is important to include.)

Adding Research Oversight Committee Members

When you are adding Research Oversight Committee Members, the proper formatting is as follows:

For Chiefs and Chairs:

Chair, Division of X, Department of X
Department Representative, Research Oversight Committee

Interim Chair, Division of X
Department Representative, Research Oversight Committee

For Alternate Representatives:

Department of X
Department Representative, Research Oversight Committee (Alternate)

For Prize Winners:

Award Recipient (Year)
Department Representative, Research Oversight Committee

For Mass General Brigham Representatives:

Title, Department, Mass General Brigham
Member, Research Oversight Committee

For Elected Representatives:

Postdoctoral Representative, Research Oversight Committee
Junior Faculty Representative
Senior Faculty Representative
Population Science Representative
Clinical Research Representative
Basic Science Representative

For Additional Members:

Title, Department
Member, Research Oversight Committee

Adding Events

Event Posts vs Event Listings

When you’re creating a new event on the website, you’ll be doing two things. First you’ll create the event post, where you’ll detail the speakers, any agenda items, share videos, other materials for attendees, anything they’ll need to participate in the event. This URL will also serve as the eventual archive for this event.

You will also need to create an event listing, which will have a ‘event website’ field where you can link it to the Event Post. Why two separate things? The Event Listing on the Calendar is a temporary and BRIEF teaser for your event. The Event Post is where you have all the space you need to provide all the information.

We’ve also created a shortcut – if someone clicks on the title of the event in the Event Listing in the calendar they’ll automatically be taken to the Event Post. So most people will never even see the ‘Event Listing’ but we will still want it because it provides us with a calendar feed that can be subscribed to, as well as features like adding to Outlook.

Adding Event Post Listings

Adding Event Listings

Annual Events

For events that are hosted annually (or regularly), we are creating Event Pages to collect the series of Event Posts (the archive of your event). This way, you have a landing page, for say the Cambridge Science Festival and then it will feature Event Posts archiving each event throughout the past 10 years. The landing page will allow you to see the history behind some of the events as well as provide more contextual information should you wish, in the accompanying descriptive text at the top of the page.

Featured Images for Events

As much as possible, Featured Images for Events should not be event graphics, but should feature people (at the previous year’s event, for example). The reason for this is that by showcasing researchers throughout the site, even in small ways like this, it creates a visual sense of community that reinforces the goal of the site – to bring researchers together.

Adding Laboratory Website Listings

Featured Images for Laboratory Listings

When creating a new Laboratory Website Listing, please take a screenshot of the website and use that for the featured image. (Keep the screenshot ‘pure’, meaning no visible browser components, menu bar, etc., just the site visible in the screenshot).

Taxonomy and Tags for Laboratory Listings

Tags are essential for maintaining a functioning Laboratory Listing Directory and will be referred to as “keywords” in the upload form, but must be added as tags to the post so that the laboratory will show up under its respective research areas, as appropriate.

Updating Accordion and Adding Content on the ROC Page

This section covers: https://www.discoverbrigham.org/research/roc/

Important: The purpose of this tutorial is to outline the steps how to change a department name on the ROC page as well as how to add and remove members from the page.

Note: While on the ROC’s page, if you click on any items within the accordions, it will expand showing the members. These accordion items are using shortcodes to display the members, so you will not be able to make any edits of those members from the ROC page. To add or remove someone you will need to edit the actual post of the person, removing either tags, categories or both.

ROC Member Department Template

The screenshots below show you how to access the templates for the ROC page as well as how to add/remove members.

Note: If you look at the highlighted box on the left below you will notice the category that is being used to display the members. This category was created within the WordPress dashboard.

To remove or add someone to show up under a department, you would assign the category when creating or editing the post in the WordPress post editor.

Note: Below is an example of a post to further support what was explained above.

Note: Here is another example of the screenshot shown above, except this time with both category and tag assigned to the post.

Changing A Department Name on the ROC page

Steps #1-2

If a department change needs to be made for any of the members on the ROC page, it can be done from the page while you are logged in.

In this example we are using Hospital Department Representative and we are trying to change Medicine to something else.

To do this change, hove over Edit with Elementor and Select the ROC – Hospital Department section.

Steps #3-4

After following steps 1 through 2, you will end up here.

Note: While this tutorial does not cover all categories on the ROC page the steps are the same for all of them.

Once you change the name at this step it will also be reflected on the ROC’s page. There are still two more steps left before we are done.

1. Renaming the department name in categories/tags (within the WordPress dashboard)

2. Renaming the Medicine Elementor template

Step #5: Renaming ROC Category or Tags

Important: Since we are using Hospital Department Representatives as a main category on the ROC page and Medicine as a subcategory let us continue to use those for this example.

If you look at the screenshot below, you will notice that a tag was renamed and not a category. This is because when a post was created for one of the members under Hospital Department Representatives, they were added to (Hospital Department Representatives) category but instead of creating another category (which would be Medicine in this case) a tag was used to categorize each member instead. See it here

So, for this step you would only need to rename the category (Medicine) within the tags to reflect the department change we made earlier in steps 3 through 4.

Step #6: Renaming ROC Elementor Template

Important: The name of the Elementor template doe not affect what gets displayed on a page, but to make it easy to find later it’s best to name it to correctly match what it is being used for.

This is the final step and in this step you would rename the template to whatever name you chose for the tag in step 5.

Important: If the screenshot above doe not work, try the steps in the next screenshot below

Next: Once you have accessed the template you can rename it following the steps below.

Adding Abstracts on Poster Site Using Custom Fields

Step #1

Step #2

Step #3

Click on posts > Add new post

Step #4

Add the presenter’s name with degree (e.g. Jane Doe, DDS) as the title, using the name in JotForm or wherever you’re gathering your data from.

Step #5

Assign the correct category for your abstracts (This is important because it will show the pop-up fields to enter abstract data)

Step #6

Begin adding the information from the submission form to the correct fields (see arrow below)

Step #7

Click on publish to make the post live

Only For JotForm

When you start looking at the information submitted in the JotForm, look for Word documents or images attached to decide how you will use those.

The information taken from the Word document or images attached will be displayed based on how the post templates were created.

What are Post Template? Post templates are basically what controls how the posts/pages will look when you publish them. This is not extremely important to know. The most important thing is to ensure that the posts are placed in the correct category.

You may also find this additional information for entering the abstracts helpful.

Updating and Adding Content to Poster Site

When it comes to the poster site there are a few things to update:

Homepage

The URL for the poster site’s homepage is https://poster.bwh.harvard.edu. On the Poster site’s homepage there are two things that will need updating

Research Categories
Statistics

Research Categories

The research categories are events that are ongoing and added to the site each year. The tiles on the homepage will require updating when new pages are added with events, specifically relating to the ones on the homepage.

The links under each toggle (dropdown) will require update so that visitors can find the events based on the years they were held.

Updating Research Categories

To update these tiles and add links to them, do the following:

From your WordPress dashboard navigate to; Pages -> Poster site homepage -> Edit with Elementor

Click on the toggle to access the options to edit it.
Click on the “view presentations” to access the editor
Copy the current year and paste it what you’ve copied under it
Change the year date (the one you copied) and add the URL to the new Poster/presentation page you created.

Statistics

The statistics box on the homepage will also require updating when new events and presentations are held.

Custom Fields

Many of the custom field created are able to be used for future research events (specifically the ones created for that research event) – For example, a Connor BRI custom field can be used for a 2021, 2022 or 2023 event, etc.

Single Post Template

The same thing that applies for the custom fields works the same way for an Elementor Single Post Template. There are specific templates built to display post based on the type of research event.

Many of these Single Post templates can also be copied and used for other research events. For example, if we only had a post template for Connors BRI but needed another for a similar event, we could copy and use the Connors BRI template in a new post template for that research event.

Research, Discovery & Innovation