Using Drupal to Edit BMC.org MENU

Welcome to the BMC Drupal Training site. Here you will find instructions and resources to help you edit content on the bmc.org external web site. Please note for edits to the intranet please contact BMC ITS.

Contact the Web Team

We're here to help. If you have any questions or problems please contact us:

Neil Lunsford
Web Manager
[email protected]
617.414.5573

Jacob Leidolf
Web Specialist
[email protected]
617.414.5536

LyncLive Support

If you would like to do a screen share with us, use the Microsoft Office Lync application to host a meeting and share your screen with us.

Additional Resources

We have a Sharepoint site which serves as a repository for our training materials as well as a place for you to upload images or documents you want us to add to the site.

Sharepoint: http://share.bmc.org/mktgcollab/default.aspx


Before You Start

Edit From Anywhere

One of the benefits of or new CMS is that we have the ability from computers, tablets and even phones from anywhere with internet access.

Rich Content

If you are creating new pages or adding new information to existing pages, it is important to make sure you write out and organize your web content prior to editing. You want your copy to be readable, spell checked, keyword rich and hierarchical. All links, images and supporting files should also be ready including ALT Tags for any images and proper, descriptive file names.

Editing or Adding Content Checklist

New Web Pages

  • New web pages require pre-approval from marketing. E-mail your final copy to: [email protected] and [email protected]
  • Select a template for your page's layout
  • Let us know where the new page will be inserted in the navigation and if you want any shortcut URLs for marketing or advertising
  • You will receive an e-mail as soon as your pages are ready for you to populate with content

Drupal Overview

Accessing the CMS

To log in, go to: https://www.bmc.org/user/login

Your login credentials will be sent to you after training.

Editor Dashboard

Under My Workbench you can review your recent edits under My Edits, pages in progress under My drafts and pages which are ready to be published under Needs Review.

Dashboard

Editable Areas

Some areas of the site are directly editable while others require assistance from the web team.

As an editor, you can modify:

  • The Title of your pages
  • The center area or “Body” of your pages

We can help you modify anything else including:

  • Navigation
  • Department banner image
  • Department contact information and location
  • Uploading images and documents to the library
  • New page creation
  • Page deletion and content removal
  • Videos and Embedded Content
  • Slideshows and Galleries / Modals
  • Alerts - Red, Yellow, Green, Blue
  • Managing "The Team" pages
  • Shortcodes

Your Editing Functions

  • Add and edit text
  • Insert links
    • to an internal page within your department website or any page on BMC.org
    • to an external web page (open in new window)
    • to a point on the same page
    • to a PDF or other document (open in new window)
    • to open a compose e-mail dialog
  • Add Images

Editing

The Editing screen allows you to edit any content item or page (called "Nodes" in Drupal). To edit a node click the Edit link on the right of the screen. You must be logged in to see this link.

Edit

This will take you to the editing screen.

Editor Screen

Copying and Pasting

Paste text content using the Paste Unformatted button.

Paste Unformatted

View Source Code

To access the HTML source code, click the Source button. This will switch your view to the source code view where you can review potential coding issues or add in code of your own. This is helpful for Shortcodes.

Source Code

Formats and Styles

There are several pre-built Formats and Styles you can use. Examples can be seen here.

Text

  • Headings (H2-H6) [Format] - These are used to establish hierarchy on the page and are not only important for users but also help with search engines.
  • Captions [Style] - These should be used to describe images or graphics. This is different from an ALT Tag because it is shown to all users.
  • Pull Quotes [Style] - These should be used to call out important quotes, main ideas or testimonials.They can be used full width or wrapped and floated left or right.
  • Hours [Styles] - These should be used for hours of operation. They can be simple or inserted with an icon.
  • Phone [Styles] - These should be used for any phone or fax numbers that need to be called out. They can be simple or inserted with an icon.
  • Addresses [Styles] - These should be used for Locations / Addresses. They can be linked to the visiting us map. They can be simple or inserted with an icon.

Images

  • Pull Left [Style] - Makes an image wrap to the left with text and content flowing around it.
  • Pull right [Style] - Makes an image wrap to the right with text and content flowing around it.

Format

Use the Format dropdown to select Headings. To make a heading go back to normal paragraph text, unselect what it currently is set to.

Format

Style

Use the Style dropdown to make text a Caption or Pull Quote or to align an image right or left. To make it go back to a regular alignment, unselect what it currently is set to.

Style

Text Editor Buttons

Here are some of the buttons you will use most often. For a name of what the button does, hover over it with your cursor.

Buttons

Other Style Notes

Our site is built on Bootstrap and can tap into its library of layouts, styles and functionality.

We have icons available from Glyphicon and Fontawesome for use in pages however ir requires copy and pasting into the source code.


Links

We will cover 5 types of links:

Please remember to test your links to make sure they work.

Internal Links

Select the text you want to be the link (for example the name of the other department) by highlighting it with your cursor:Highlight text with your cursor

Click the Link button:

Link Button

This will open the Link dialog box:

Link Dialog Box

For Internal Links to other pages on BMC.org you will need to make your link Relative by removing the https://bmc.org from it. For example https://www.bmc.org/pediatrics-pulmonary-allergy-clinic becomes /pediatrics-pulmonary-allergy-clinic.

External Links

Select the text you want to be the link by highlighting it with your cursor:Highlight text with your cursor

Click the Link button:

Link Button

This will open the Link dialog box:

Link Dialog Box

Externl Links need to open in a new window. To do this click the Target tab in the Link dialog box and set it to New Window (_blank) from the dropdown:

Target _blank - Open Link in a New Window

Anchor Links

An Anchor Link can jump users down to a certain point on the same page. Name your Anchor so it is relevant to the page content or topic. Ideally, it should have 1 or 2 keywords or keyword phrases. Define your Anchor by placing your cursor in front of the text you wish to jump to.

Anhor Link

Click the Anchor button:

Anchor

Type in your anchor name and click OK:

Note: No special characters or word spaces are allowed in the anchor name. Use hyphens to separate the words.

You will see a red flag representing your anchor point:

Anchor Point

To link to your anchor link select the text you want to be the link by highlighting it with your cursor:Highlight text with your cursor

Click the Link button:

Link Button

When the Link dialog box opens select Link to anchor in the text from the Link Type dropdown.

Then select your anchor from the By Anchor Name dropdown:

Select Your AnchorWhen the visitor clicks the anchor link they will be jumped down to the appropriate content area you specified.

Document Links

To insert a link to a Document or PDF, select the text you want to be the link by highlighting it with your cursor:Highlight text with your cursor

Click the Link button:

Link Button

Click Browse Server in the Link dialog box:

This will open the File Browser which you can search or browse for your link. The web team will provide you with the link to any file you request be uploaded to the server. Double click on the file you want to link to.

File Browser

NOTE: You need to let the whole file browser load before you can insert your file link otherwise you will insert the wrong path.

If the Left panel is still loading (as in picture below) DO NOT insert the file yet.

Path Not Loaded

Wait until the left panel is loaded (as in picture below) to ensure you correctly link to the file.

Path Loaded

E-Mail Links

Select E-Mail from the Link Type dropdown and fill in the e-mail address that the message should be sent to and any subject or message body you want pre-populated.


Images

In order to use images you need to first send them to the Web Team (Jake or Neil) to be optimized and uploaded to the server. When sending over images please ensure the image is named something descriptive and does not have any spaces or special characters in the filename.

  • If you would like to purchase or use a Stock Image you will need to coordinate with Marketing to ensure the image matches our photograhpy style. Contact the web team to help you purchase it.
  • If you have a photo that is not in our library and it has patients or other non-BMC-employees in it, you will need them to sign a release form.
  • If you would like to schedule a photo shoot with your team use this form.

Preparing Your Images for the Server

  • Name your images and make the filename meaningful - if it's for a doctor then use the format: FirstName-LastName-MD.jpg
  • E-Mail your image(s) to Jake or Neil or upload them to the Web Editor Sharepoint website:  http://share.bmc.org/mktgcollab/DEPT%20Folders/Forms/AllItems.aspx
  • Marketing will optimize your images for the site. Please let us know if you would like the photo to be a certain size or where on the page it will be placed.
  • Marketing will e-mail you the final filenames so you can type them into the search box at the top of the asset library.

Placing Your Image on the Page

Place your cursor where you want the image to go, use the arrow keys if necessary. Click the Image icon that looks like a mountain scene.

Image

This will open the Image Properties dialog box. Click Browse Server.

Browse

This will open the File Browser which you can search or browse for your link. The web team will provide you with the link to any image you request be uploaded to the server. Double click on the image you want to insert.

File Browser

This will take you back to the Image Properties dialog box. Press OK to insert the image.

Image Properties

You can make the image go left or right using the BMC Image Left or BMC Image Right options from the Styles dropdown:

Style

Alt Tags

What is an ALT Tag? 

An ‘ALT Tag’ is ALTernative text information used for an image. ALT tags describe the content of a photo and how it relates to the copy on your web page. Individuals with disabilities may depend on a screen reader to read your web content out loud. They do not want to experience content redundancy so try and make your ALT tag a unique message or relevant description on your subject matter.

Why Use an ALT Tag for Your Images?

This is a must to meet basic accessibility regulations mandated in the Accessibility and ADA Compliance Standards.

Here are some basic ALT tag guidelines:

  • ALT Tags describe the content of a photo
  • If you use text on a photo, a Search Engine can’t read it so you must repeat it in the ALT tag if it is relevant
  • It’s an opportunity to showcase an additional message of importance
  • When creating an ALT tag, use keywords strategically to boost relevancy but do not stuff the ALT tag with keywords

How to Create a Relevant, Meaningful ALT Tag

Limit your ALT tags to 90 meaningful characters or less, including word spaces.

ALT tags describe the content of a photo and how it relates to the copy on your web page. ALT tags need to be relevant and meaningful, using different keywords or keyword phrases. It will also benefit your Search Engine Optimization efforts.

Videos

We can upload and host videos on the BMC Youtube Channel or help you embed approved videos from external sites. Contact the web team for help.


Documents

In order to use documents like PDFs you need to first send them to the Web Team (Jake or Neil) to be optimized and uploaded to the server. When sending over documents please ensure the image is named something descriptive and does not have any spaces or special characters in the filename.

For more on how to insert links to documents see the Documents section under Links.


Workflow

  • Pages saved as Drafts have been edited by you but not yet sent to Marketing for review and publishing.
  • Pages saved as Needs review are waiting for Marketing to review and publish.

You can find these under My Workbench:

Dashboard


Find A Doctor Database

To edit which doctors are listed on "The Team" pages contact the web team.

All information on the "Find a Doctor" profiles themselves please follow the instructions on this page.

To have new photos taken for your team or otherwise, use this form.


Templates

When requesting a new page you can choose from the templates below:

T1 T2 T3
One Column Two Column News Stories

SEO

There are several ways you can ensure as many of our pages turn up on page 1 of search results as possible:

  • Use Kewords in copy, headers and file names. If you are curious about what keywords to use we are happy to give you feedback
  • Use hierarchical headers in correct order
  • Make sure images have descriptive file names and alt text
  • Make sure embedded <iframe> content has a title="Title" tag