Drupal Tutorial

So you want to build/edit a miis.edu page with Drupal? Here’s a brief overview to help you get started. Enjoy! [By Jeremy Borgia]

Need help? Make an Appointment at the DLC!

Table of Contents

Logging on to Edit Mode
Adding a New Page
Adding/Editing Content
Adding a Title & Heading
Adding Text
Sidebars
Adding a Table
Adding Hyperlinks
Adding Pictures/Media
Uploading an image, PDF, or other file to MIIS Files
Adding an Image to the Upper Right-Hand Corner
Inserting an image into the body or sidebar of your text
Linking a PDF

Logging on to Edit Mode

Navigate to the miis.edu homepage, and scroll all the way down. Click on “Log On” in the bottom left.

Screen Shot 2015-02-04 at 12.45.01 PM

Once you are logged in, you should see a new bar at the top of any page you have been authorized to edit.

If you do not see this, please contact the web team (Melissa Jennings or Evelyn Helminen)

Top bar

You will also see “Edit” links below content nodes on the page and in the sidebar

Edit

Adding a New Page

To create a new page, you will make it as a sub-page. First, navigate to the page you want to serve as your new page’s “parent.” You can think of this in terms of the sidebar navigation or the URL:

  • Sidebar Navigation:
    In the sidebar, you will see the tree of pages related to the page you are on. For example, at miis.edu/academics, you will see in the sidebar all of the sub-pages of that page (e.g. Academic Calendar, Courses, Faculty, etc.). Make sure you navigate to the parent page where you will want your page to appear in the sidebar
  • URL:
    Another way to think of sub-pages is to consider the URL. Sub-pages are found after the parent page in a URL. For example, our academic calendar page is a sub-page of our academics page. Thus, the URL is miis.edu/academics/calendar

Once you have navigated to the proper parent page, select “Add Sub-page” from the top bar.

Add Page

You will now see a form to create your new page.

Insert a title for your page. (NOTE: This title will be visible in the sidebar and may appear across the top of the page, so please use a clear and concise title, and ensure that it is properly spelled and capitalized.)

Below your sparkly new title, you will see that a new URL has been generated for you. You can edit the URL by selecting “edit” to the right of the URL.

Page name and URL

Edit this as needed to ensure that the URL is concise. (e.g. “joint-mba/ma-international-policy-and-development-program” has been shorted to “business-policy”. Ideally, URLs should have one or two words, joined with a hyphen instead of a space).

If you want to leave your new page hidden for now, you can hide it from the sidebar by selecting “Menu and layout” on the left and checking the top box for “Don’t show this page in the menu“. This is particularly useful for hiding your page while you continue to edit. (Please note that hidden content is still searchable. If you are developing sensitive content that needs to remain unpublished, please contact the web team [Melissa Jennings or Evelyn Helminen]).

Hiding page

Now scroll to the bottom to find & click the “Create sub-page” button to finish your new ​​​page.

You will now be directed to your beautiful new sub-page. Before we move on to add content, double check that your title is correct and that in the sidebar your sub-page has (hidden) next to it, if you chose to hide your page.

No content

Adding/Editing Content

***Our comprehensive Search Engine Optimization & Web Content Guidelines***

Congratulations on creating your page. However, with no content on it, you must admit it’s pretty boring and useless. Let us charge on and add some content!

On your page, you can begin adding content by clicking “Add content” (as circled in the above picture) or by selecting “Add” under “Content” in the blue section of the top toolbar. This displays a list of available nodes that you can add to your page.

Add Content top bar

Select the node type, “Basic Content.”

Basic Content

Adding a Title & Heading

Insert a title for your node. If your page is using a large banner image, the page title will be displayed at the top. Often the page title and the node title will be the same; if you don’t want your title to appear twice, put [brackets] around your title.

Two titles

 

(This is what your page might look like if you choose to NOT hide your title on most pages. Your page title will appear at the very top and your node title will appear at the beginning of your content.)

Adding Text

In the “Opening Paragraph” section, place a short introduction (1-2 short sentences). It is automatically formatted to be larger, gray text.

Text type

The “Body” section is where you will likely spend the bulk of your efforts. Organize your content carefully so that viewers will be able to easily locate information. One easy (and crucial) way to do this is to add headings. To do this, select the drop-down menu that says “Paragraph” and select the proper heading.

As indicated in our SEO & Web Content guidelines, be sure to make your headings clear and descriptive. For example, if you were making a page about housing, rather than writing just “Housing” as your heading, perhaps you could write “Housing in Monterey.” Search engines take cues from heading text. So, being clear and concise in your choice of headings will improve MIIS’s search engine optimization.

The headings will pre-format your text in the following ways:

Paragraph Headings

 

Note: you will likely only use the 2 & 3 headings.

 

 

When you write your content, be aware that search engines also give special emphasis to text (read, keywords!) that is underlinedbold, or italicized.

***When pasting text, please paste without formatting. This strips the text of any formatting (font, size, links, etc.) from the original source, so the text will conform to the MIIS site’s template. You can do this from the toolbox by selecting the “Paste as Plain Text” button.

Paste as Plain Text

NOTE: When pasting with plain text, you will need to ensure that you re-hyperlink any links.

Sidebars

You can also add text to the “Sidebar” section, which will appear on the right side of your content and will automatically reflow the body content around it.

Note: Sidebars are different from the navigation on the right-hand side of the page.

Screen Shot 2015-03-23 at 12.55.45 PM

Once you’ve added the desired content, click “Save

Example

Here’s what my new content looks like (red boxes have been added for instructive emphasis):

New content

Adding a Table

You can add a table in order to better organize the content on your page. See the image below as an example from a real, live MIIS page that uses tables to organize its content.

Screen Shot 2015-03-09 at 10.32.58 AM***The author of this page used tables to organize the content into two columns.

To add a table, navigate to the section in which you want to place a table (body or sidebar). In the toolbox, click on the “Insert/Edit Table” icon.

Tables

In the window that opens, select the number of rows/columns you would like to include in your new table. Click “Insert.”

If you need to edit an existing table, you can use this same process, ensuring that your mouse cursor is in the table you would like to edit.

When your cursor is in the table, you will be able to use shortcuts to add or remove rows or columns:

Insert Row Before: Insert Row Before

Insert Row After:

Insert Row After

Delete Row:

Delete Row

Insert Column Before:

Insert Column Before

Insert Column After:

Insert Column After

Delete Column:

Delete Column

Adding Hyperlinks

You can go back into “edit” mode by clicking “Edit” underneath your content.

Select the text that you would like to format as a hyperlink. (NOTE: Use intuitive keywords as a hyperlink, rather than using “Click Here” or something similar. For example, rather than “Click Here for more information”, use “Learn more about the Digital Learning Commons.” The use of “Click Here” will harm our SEO.)

Once you have highlighted the text you would like to hyperlink, click on the hyperlink icon

Hyperlink

In the dialogue box that appears, place the hyperlink in the box beside “Link URL.” (IMPORTANT: Ensure that you place the entire link, including http:// or https:// to avoid broken hyperlinks).

If you are linking to an outside website (not MIIS), open the dropdown menu beside “Target” and select “Open Link in a New Window.” If you are linking to a MIIS site, you can leave it alone.

In the box beside “Title,” write a clear and concise title for the page you are linking to. (NOTE: This will be visible on the site, so double check your spelling and ensure proper capitalization!) The title is the text that will appear when viewers hover over the link, and it is used in search engine optimization.

If you have added a link to a YouTube video, open the dropdown menu beside “Class” and select  “Open Video Overlay,” which will open the video on your page rather than redirecting users to YouTube.

Open Video Overlay

Click “Update” to save your hyperlink. You can test the hyperlink after you save the page in the editor and are returned to the live site.

Adding Pictures/Media

***Some of the processes to add pictures/media involve navigating to other pages. PLEASE make sure you save your work before navigating away. Forgetting to save=sadness and misery.***

Adding images to your website is a great way to make your page more interesting and dynamic. Depending on where you want to place an image, there are a few different processes you can use.

Uploading an image, PDF, or other file to MIIS Files

If you are uploading an image, please resize it before uploading it. When large pictures get uploaded, it negatively affects your page’s load time, which negatively effects our search engine optimization. You can resize your image using a variety of free services. For now, let’s use PicMonkey. Click on “edit,” then find and select your image. Choose the “resize” option, and choose a new width (NOTE: it will automatically change your height to keep the picture proportionally correct). Hit “Apply,” click “Save,” and then “Save to my computer.”

Sizing Rules

In General, use these sizing rules:

  • Profile pictures in the body of a page: 150×150
  • Profile pictures for the upper left corner on a profile page: 215×300
  • Upper-right images: 238×350
  • Top banners: 720×250
  • Research Center Banners: 960×290
  • News Story photos: 640×480

In order to upload an image, PDF, or other file to the MIIS site, first go to “Files (hidden)” on the far right navigation sidebar. This should be under the parent page of the sub-page that you are working on.

Once you have navigated to “Files (hidden),” go to the top edit bar and hit “Add” under “Content.” Then select the content type “File Upload.”

Select a title for your file that is both concise and descriptive. You want to make sure that you’ll be able to easily locate this file. Under “Upload” click “Browse,” followed by “Choose File.” In the box that appears, locate the file that you want to upload and select it. Click “Upload” and wait for your file to finish uploading, then hit “Next.”

Fill in the NameAlt Text, and Title Text. You can make them all the same thing if you’d like. It’s important to fill in all three fields as it is an opportunity to use more keywords and helps with SEO.

Name, Alt, and Title Text for Photos

Hit “Save.”

Add any caption that you want to include. (NOTE: If you plan to use the image in the upper right-hand corner of the page, the caption will display, but in most other cases it is not necessary to add a caption because it will not show up. The exception is for top banner images. Contact the Web Team for help with banner images.)

Click “Save.”

You will now be redirected back to Files (hidden). But wait! What is that at the top of the page? Your file! Don’t you feel fancy?

There are three places you can place an image:

  1. Upper right-hand corner (Selected from the drop-down menu)
  2. Body Section
  3. Sidebar

Squirrels!

Adding an Image to the Upper Right-Hand Corner

This process assumes that you already know the name/location of the file you want to insert. If you do not, you will need to either refer to the Uploading an Image to MIIS Files section to upload a new file or locate your file in the “Files (hidden)” sub-page.

This process allows you to insert files to your page that already exist in MIIS’s files. Note from the picture above that this process will always put your image in the top right, and will always include any caption associated with the image. This placement does not give you control over the placement or size of the image.

When in “edit” mode for your page, locate the dropdown menu titled “Add Image” after the “Body” section. Find and select your chosen image name. Scroll to the bottom and hit “Save.”

Add Image Dropdown

Inserting an image into the body or sidebar of your text

Navigate to the section in which you want to insert an image (body or sidebar). In the toolbox, select the button with the mountains.

Mountains pic

***If you need to upload the image, please refer to the Uploading an Image to MIIS Files section***

A window will open with a navigation tree of the MIIS site. Navigate to your image and select it. If you uploaded the image to the Files (hidden) of your sub-page, you must find your subpage (remember, you can follow the breadcrumbs of your URL, i.e. miis.edu/academics/programs/mba will be under Academics, then Programs, then MBA.)

Make sure there is an appropriate Title and Alternate text, and choose Full Content from the Style drop-down menu.

Choose Full Content

Click “Insert.”

Squirrel

(***NOTE: If placing an image in the sidebar, double check that your image isn’t too big. Save your edits and check that your image isn’t spilling outside of the sidebar. If it is, go back to edit mode and resize. It should be no wider than 238 px.***)

Linking a PDF

To add a link to a PDF on your page, treat it like you would an image.

Navigate to the section in which you want to insert the PDF (body or sidebar). In the toolbox, select the button with the mountains.

Mountains pic

***If you need to upload the PDF, please refer to the Uploading an Image to MIIS Files section***

A window will open with a navigation tree of the MIIS site. Navigate to your PDF and select it. If you uploaded the PDF to the Files (hidden) of your sub-page, you must find your subpage (remember, you can follow the breadcrumbs of your URL, i.e. miis.edu/academics/programs/mba will be under Academics, then Programs, then MBA.)

Make sure there is an appropriate Title and Description. Click “Insert.”

The PDF icon with a hyperlink to the PDF will automatically appear.

PDF Appears with a Hyperlink

Congratulations! You are now the (hopefully) proud owner of a super-legit webpage!

If you have more questions, feel free to come in to the DLC. We’ll be happy to help.

Training created by Jeremy Borgia, who joined the DLC team in January 2015 as part of the web rebranding team, and has stuck around like well-done pasta ever since. Make an appointment with him in the DLC if you would like more help, additional tips, or a deep discussion about the subversive role of potatoes in modern society.