Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount Holyoke College and is to be used exclusively for creating, updating, and expanding Mount Holyoke College websites by authorized MHC community members only. This document is not for distribution in any form outside the College without permission.
05/20/15 Mount Holyoke College Drupal Basics and Beyond 2
Table of Contents 1. Fixing Formatting Issues... 4 2. Basic HTML Editing... Error! Bookmark not defined. 3. Buttons... 11 3. Tables... 12 4. Anchors... 20 05/20/15 Mount Holyoke College Drupal Basics and Beyond 3
1. Fixing Formatting Issues To avoid adding non-standard fonts and badly formatted text to your webpages, always use the Paste from word icon to paste your content from another application. When you cut and paste content into Drupal s text editor from applications, such as Word, the HTML code copied from Word into Drupal s text editor may result in strange formatting on your webpage. If you should forget to do this and you end up with formatting issues, you can select the text with the bad formatting, cut it, and then follow the directions below to paste it correctly. The example on the right shows your text may look when you paste directly from a Word document into Drupal s text editor instead of using the paste from word icon. The formatting problems are seen when you are viewing the web page, not when you are in the Drupal editing form. The Word document brought in HTML into the text editor, causing: Extra white space above the pasted content. The fonts are not the College style fonts (as you see in the second paragraph). Add Content from Word or Another Application A. Copy the text from your Word document or other application. B. Place your cursor in the body field of the Drupal text editor where you want to paste your content. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 4
C. Select the Paste From Word tool. D. When the Paste from Word popup window appears, paste your content in the text window, (Ctrl + V on your keyboard), and then select Insert. The popup will close and your text will appear in the body field. E. If there are text links in your content, be sure to review them to make sure they copied correctly. See more about text links and PDF s in the Links chapter of this manual. F. Links to PDF files must be removed from the text and the PDF file will need to be uploaded to the page. Instructions on how to upload and link PDF files are in the Links mini-manual. G. After you save the page, review all links to verify they are accurate. H. If there are still formatting problems, you will need to fix them in the HTML editor. Directions for this are in the following section. If you are not comfortable doing this yourself, please write to webhelp@mtholyoke.edu for assistance. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 5
2. Basic HTML Editing In order to fix major formatting problems and use some of the more advanced features in Drupal, it is helpful to have a basic knowledge of HTML code. This section will give you the basics so that you will be comfortable using the HTML editor to make changes on your webpages. If you are not comfortable doing this yourself, please write to webhelp@mtholyoke.edu for assistance. HTML stands for Hyper Text Markup Language. It is the code used by your web browser to format the display of the content on a webpage. HTML code uses tags, which surround content and apply meaning to it. Each tag typically has an opening and a closing, which tell the browser what to do with the content that comes between them. Standard HTML Tags This table shows the standard HTML tags that are used in Drupal. Tags are abbreviations for formatting styles, and typically have an opening and a closing (the opening does not have a leading / ): <h2></h2> Mark the beginning and ending of a header. The larger the number inside the <h3></h3> header tag the smaller the header text will be displayed. <p></p> Mark the beginning and ending of a paragraph. <strong></strong> Mark the beginning and ending of text that will appear using boldface. <em></em> Mark the beginning and ending of text that will appear using italics (emphasis). <a></a> Mark the beginning and ending of text that will be formatted as a hyperlink. Note: In order to actually act as a link, the opening <a> would also contain the attribute href= url-of-the-link. ie. <a href= https://www.mtholyoke.edu/admissions >Admissions</a> would make the word Admissions formatted as a link and when a user clicks on it they will be taken to the page www.mtholyoke.edu/admissions <ol></ol> Mark the beginning and ending of an ordered list (ie. numbered list). <ul></ul> Mark the beginning and ending of an unordered list (ie. bulleted list). <li></li> Mark the beginning and ending of each item in an ordered or unordered list. The <li> tags are embedded between the opening and closing <ol> or <ul> tags. <table></table> <tr></tr> <td></td> Mark the beginning and ending of a table. (See Chapter 3) Mark the beginning and ending of a row in a table. <tr> tags are embedded between the opening and closing <table> tag. Mark the beginning and ending of the data in a column of a table. <td> tags are embedded between an opening and closing <tr> tab. Note: Not all tags have closing tags. Some tags, which do not wrap around content, will close themselves. The line-break tag <br> is one of them. You might also see some of these self-closing tags displayed with an ending /, such as <br />. Either format is acceptable and should work the same way. Attributes Some HTML tags can also have attributes, which are extra bits of information that is used to tell the browser how to display the content. The most common of these is the href attribute for the <a> tag, which specifies the url of the link. You may also see the class attribute used with a paragraph tag. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 6
HTML Tags and Attribute that Often Cause Formatting Problems The most common problems that occur when content is copied from another application into Drupal are the introduction of <span> tags and style elements that force the browser to display content a certain way, overruling the formatting specifications set in place by the webteam. Here is an example of a page where the content was copied from a google doc directly into the body field without using the Paste from Word tool. The content is all there, but the formatting is not standard. The fonts are not the college web fonts, they are all different sizes, use different spacing and even different colors. First try cutting the content and re-pasting it using the Paste from Word tool. If that does not fix the problem, you will need to use the HTML Source Editor and remove the formatting from within the code. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 7
To access the HTML Source Editor, you must first be sure that you are using the Text format Full HTML. The Text format field is located below the body field. Use the pull-down and select Full HTML if it is not already selected. The HTML tool should now be displayed in the toolbar. When you select it, the HTML Source Editor window will be displayed. You can see from this example that there is a lot more code in there than just basic HTML tags and content. There are many standard tags that have style and/or margin attributes inserted, and also many <span> tags that should not be there at all. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 8
Cleaning up the code in the Source Editor takes some time and patience. You may choose to copy all of the code into a different text editor, such as Sublime or TextWrangler, both of which are free to download. They allow you to separate out the tags and make viewing the code easier. If you do this, you should cut all of the text from the Drupal HTML Source Editor, copy it into the other editor to make your changes and then copy all of it back into the Drupal HTML Source Editor, completely replacing what was there. Note that you can always divide up the HTML tags in the HTML Source Editor by inserting spaces and line breaks between tags. These will not be saved when you click on insert, but while you are in the editor this may help you read the code more easily. In most cases you will want to remove: all <span> </span> tags, including the attributes within them. any style, margin, text-decoration, align, or line-height attributes that have been inserted inside of <p> tags. Note: If you have paragraphs that you have purposely indented using the indent tool, a style= padding-left: 30px attribute may appear in one or more <p> tags. This type of style attribute on a <p> tag can be left alone. If you are unsure about which tags or attributes should be removed, send an email to webhelp@mtholyoke.edu and someone will assist you. Here is what the sample code looks like once it is cleaned up. The style attributes have all been removed, along with the <span> tags. The type of style attribute that should be removed from inside a <p> tag are ones that affect the line-height, font-size, font-family, and text-decoration. You can see how much unnecessary code was copied in! It takes far less code to display the page correctly than it does to display it with improper formatting. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 9
The page now displays with the correct fonts, spacing and colors. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 10
3. Buttons Buttons are useful tools when you want to callout an action for a site visitor to perform. Admissions, for example, uses buttons as a callout tool to engage prospective students: A button must: 1. Use action words (ie. Make a Reservation) 2. Be a link to another piece of content. The Visit Us button, for example, is linked to the Visit page. 3. Stand out from the rest of the page. The very top or bottom of a page are the best places for buttons. Follow these steps to create a button: 1. Add the text to become the link. 2. Create the link to the target page. 3. Save the page and test the link. 4. Go back into edit, into the body field and select the link text. 5. With the link text selected, use the styles pull-down menu and select Button. Note that you will not see any noticeable changes. 6. Save the page. The link should now be displayed as a button. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 11
4. Tables Best web practices discourage the use of tables on webpages as formatting devices. Tables are not user-friendly on mobile devices, so if you decide to use a table you will need to do some extra work to make sure that the table will be viewable and readable on a mobile device. If you would like to add a table to you must first make sure that you are in full HTML mode. Use the Text Format pull-down field located under the body field and select full HTML. Add the HTML Code to Create a Basic Table While it is possible to add a table to your page using the Insert/Edit Table tool, it will be far easier to make sure that the table will be viewable on mobile devices if you build it using the HTML source editor. The code below contains the outline of a responsive table: <table class= responsive-table > <tr> <th>header1</th> <th>header2</th> <th>header3</th> </tr> <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> <tr> <td data-th= Header1 >Data for Row 2 Column 1</td> <td data-th= Header2 >Data for Row 2 Column 2</td> <td data-th= Header3 >Data for Row 2 Column 3</td> </tr> <table> If we were to paste this basic code into the HTML editor and click insert, the table will be displayed in the body field in an editable state like this: 05/20/15 Mount Holyoke College Drupal Basics and Beyond 12
Upon saving the page, the basic table will look like on desktop: And like this on a mobile device: On mobile devices the column headers become labels, and the rows in the table are divided with a horizontal line. All of the data from the table is still easily readable in this mobile list format. Edit the HTML Code to Build a Table Containing Your Data Copy the basic table code into the editor of your choice. It may be a good idea to use an HTML text editor such as TextWranger or Sublime (either of which are free to download). You can also use the Drupal HTML Source Editor just as it is, but better text editors offer more help when it comes to formatting your code to make it easier to read. If you choose to use an editor outside of Drupal, first follow all of the steps below for changing the code, and then copy all of the text and paste it into the Drupal HTML Source Editor. If you want to do the work right in the Drupal HTML Source Editor, simply place your cursor where you would like to add the table, and open the HTML editor window by clicking on the HTML tool in the toolbar. The HTML Source Editor window will appear. See Chapter 2 for instructions on basic HTML editing. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 13
Copy the basic table code from page 12. NOTE: The following are the HTML tags used in this table example: <table> (table marker) <tr> (table row) <td> (table data) <th> (table header) Paste the code into the into the HTML editor (or into the text editor of your choice). Then you will need to replace the placeholder text in the code with the actual text you want in your table. 1. Label the column headers. a. Change the column headers for the header row: <tr> <th>header1</th> <th>header2</th> <th>header3>/th> </tr> Replace each of them with the column headers you want to use for your table. Note that these ARE NOT enclosed in quotation marks. If you need more than three columns, copy one of the <th> lines and paste a new one before the </tr> tag. Be sure to include the <th> and </th> tags. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 14
b. Change the column headers that are listed as the data-th attribute of each <td> tag on every row: <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> Replace each of them with the exact same column headers you used in the <th> lines. Note that these must be enclosed in quotation marks. If you need to add columns, copy one of the <td> lines and paste a new one before the </tr> tag. Be sure to include the <td> and </td> tags. 4. Put the data into the table cells. <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> Replace the placeholder text Data for Row # Column # with the text you want in each table cell. 5. Add rows as needed. Copy this entire <tr> section (all of the lines shown here) to add more rows to your table. Be sure to paste the section in before the end table tag </table>. <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> 05/20/15 Mount Holyoke College Drupal Basics and Beyond 15
As an example, here is a 4-column table followed by the HTML code that is used to display it: <table class= responsive-table > <tr> <th>date</th> <th>time</th> <th>place</th> <th>topic</th> </tr> <tr> <td data-th= Date >January 1</td> <td data-th= Time >Midnight</td> <td data-th= Place > New York </td> <td data-th= Topic >Happy New Year </td> </tr> <tr> <td data-th= Date >February 14</td> <td data-th= Time >7 pm</td> <td data-th= Place > Your favorite restaurant</td> <td data-th= Topic >Valentine s Dinner</td> </tr> <tr> <td data-th= Date >April 1</td> <td data-th= Time >8 am</td> <td data-th= Place > Your office</td> <td data-th= Topic >April Fools</td> </tr> <table> 05/20/15 Mount Holyoke College Drupal Basics and Beyond 16
Because this example uses the responsive-table class and has all of its columns properly labeled, the table will display as shown above in desktop, and as follows on mobile devices: 05/20/15 Mount Holyoke College Drupal Basics and Beyond 17
Creating a Table Using the Table Tool You can also add tables by using the Insert/Edit Table tool in the toolbar. Once the basic table has been created, however, you will need to go into the HTML code editor and add the required labels so that the table will be viewable on mobile devices. Clicking on the Insert/Edit Table tool will display the Insert/Edit Table pop-up. Choose the number of columns and rows you need for your table, and use the pull-down next to the Alignment field to select Left alignment. Remember that one of your rows will be used as a header row, so if you need 4 rows of data, you should enter a 5 in the Rows field. You can always add rows or columns later, but it is easier if you start with a table that is the correct size. In order to make your table viewable on mobile devices, you need to add the responsive table class by pulling down the class field and selecting Responsive Table. Click the insert button. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 18
Drupal will then bring you back to the body field where the basic formatting for a table will appear. You will see the number of rows and columns that you specified. First, add the headers for each column in the table. Once the column headers have been entered, you will need to make some basic changes to the HTML code in order to add the header row and to properly label each data row. Open the Drupal HTML Source Editor window by clicking on the HTML tool in the toolbar. The HTML Source Editor window will appear. See Chapter 2 for instructions on basic HTML editing. In order to provide the proper headers for the table, the <td> and </td> (table detail) tags that are initially created for each element in the first row will need to be changed to <th> and </th> (table header) tags. See the example on page 14-15 for instructions on formatting the headers as well as the data rows in your table. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 19
4. Anchors Anchors are used on pages that display a lot of information that is segmented into different sections and where it makes sense to let the site visitor jump to a different section of content on the page. An FAQ page is a good example of when anchors may be useful. The questions would be listed at the top of the page as links to the section below where the answer is listed. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 20
Adding Anchors to Sections of Content 1. Add the anchors to the finishing location of the jump to. On our sample FAQ page, we would place our cursor before the first letter of the first answer (Can I Study Abroad?) and click on the anchor tool. 2. The insert/edit anchor window will be displayed. Enter an anchor name that makes sense for the section of content you are segmenting. In this example, Can I Study Abroad? is the question that is being answered in the section where the anchor is being placed. Make a note of the exact text you used for the anchor you will need it later. 3. There will now be an anchor icon located where you had placed your cursor before clicking on the Anchor tool. 4. Repeat 1-3 for all of the sections where you want to place an anchor. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 21
Adding Anchor Links Once you have the anchor jump to points in place, you need to add the links that the user will click on in order to jump to those sections of content. In our example, these links need to be added to the questions at the top of the FAQ page. This can be done either by using the Insert/Edit Link took, or via the HTML Source Editor window (see chapter 2 for more detailed instructions on using the HTML tool). Adding Anchor Links Using Insert Link Tool 1. Select the text that will become the anchor link. In our example, it would be one of the questions at the top of the FAQ page. 2. Click on the Insert/Edit Link tool. 3. In the Link URL field, enter the exact text that you used to mark the anchor, preceded by a #. 4. Click Insert. The text you selected will now be displayed in blue to indicate that it is a link. 5. Save the page and test that clicking on that text causes the browser to jump down the section of the content that you marked with the anchor. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 22
Adding Anchor Links Using the HTML Source Editor 1. While in edit mode, click on the HTML tool. 2. Add an <a> tag with an href attribute containing the identical anchor text that you entered above to the content containing the text that should become the anchor link (or the jump from spot). In our FAQ page example, there is a list of questions at the top of the page. These are already inside ordered list <ol> and list item <li> </li> tags. The <a> </a> tags should be entered surrounding the content, inside the <li> </li> tags as shown: 05/20/15 Mount Holyoke College Drupal Basics and Beyond 23