Welcome to  the Princeton 

Template System Getting familiar with using Drupal to build sites here at Princeton 

Overview & Purpose 

To get familiar with the general practice of building websites using our Template platform, built on top of the open-source Drupal content management system.  

Objectives 

1. Feel comfortable enough to approach creating and editing content of any Princeton website WDS has built without trepidation. 

2. Recognize the importance of planning before doing. 3. Recognize the importance of creating content that is easily digested by a diverse 

spectrum of visitors. 

The Back-story 

So your department needs a website. What are your options? If you have the budget, you can procure a site from a third-party vendor. Or you could develop a site yourself, using whatever product or service you’d like. But our Drupal-based platforms have some compelling advantages, and here you’ll discover just how easy creating a site can be. 

 

1   

The Why’s 

1. Why a CMS? a. So much simpler than building sites by hand; you don’t need to be a coder! 

2. Why Open Source? a. “Frees” us from the cycle of upgrade fees (see what I did there?). b. Frees us from being beholden to an impersonal corporation; if something’s 

not working how we expect it, we can participate, even facilitate, the process of correcting the behavior. 

c. Gives us the flexibility to design a platform that satisfies our unique needs, with less having to “settle” on pre-packaged functionality. 

d. Gives us the flexibility to incorporate University-specific services directly into the platform. 

3. Why Drupal? a. Provides a powerful base from which to start. b. Has a great community around it. c. Has an enterprise-level track record backing it up; whitehouse.gov ran on it 

during the Obama administration, you’ll find interesting case studies at Drupal.org. 

4. Why WDS Drupal? a. We’re pretty good at it. b. We’ve been building or helping build websites for departments here at 

Princeton for many years, so have a pretty fair assessment of your needs. c. You don’t have to worry about hosting fees, or patching your systems. 

The How’s 

1. Just ask! a. Princeton Sites (templated) are free for the asking, as long as you are a 

department here at the University. b. If you are a faculty member, we have another flavor of Drupal for you, the 

OpenScholar platform. While it differs from what we’ll be doing in class, there are common themes that transfer across any Drupal-based platform. 

2   

2. You can pay us too, if you’d like… a. We can assist you with your process; we have Content Strategists and 

Themers on staff to help make your site uniquely yours. b. If your needs are really specific, and you have a non-trivial budget, we can 

work with you to build a custom Drupal-based solution, again with free hosting, and with no need to worry about patching for security updates. 

3. Take these classes. a. We offer them every month (basically), and won’t look at you funny if you 

decide to come back for “refresher” sessions. 4. Refer to our documentation. 

a. We have a site with some great documentation for you, open 24/7. 5. Get involved with the local Drupal community. 

a. We have a number of mailing lists available to which you can subscribe, including ones for our templated platform, as well as for general Drupal support, and for our monthly “Website Wednesday” gatherings. 

6. Step away from the CMS! a. Drupal is a great tool that makes creating websites tremendously easier, but 

at the end of the day, it’s just that, a tool. Proper planning will make your site more usable, and your site visitors will leave satisfied and happy. I often ask attendees for their general web-surfing “pet peeves”, and “not being able to find what I’m looking for” is frequently number one. That and auto-playing videos… 

b. Get unvarnished feedback, and not just from other members of your department, but from the “uninitiated” who won’t be familiar with your jargon and expectations. 

c. Again, if you have any kind of budget, consider contracting with WDS regarding your site architecture and usability; we’ll take good care of you. 

 

 

 

3   

The What’s 

Here’s a brief outline of what we’ll do in this class: 

1. Starting at the beginning, how to get into a site! 2. Behind the curtain: Drupal’s administration interface. 3. Accessibility, accessibility, accessibility. 4. Creating basic pages that define a section of a site. 5. Configuring the main menu. 6. "Taxonomy terms can enhance the usability of your site, making it easier for users to 

digest your content; if you want to learn more, come to the higher-level classes." 

The Nitty Gritty 

This is where we delve into the details of this class’ subject matter. 

Logging in, AKA “Slash CAS” 

As with many things in life, there is more than one way to log into one of our Drupal sites. 

1. You will find “login” links to your sites available in the upper-right corner of every page. Clicking this takes you to /user/login, where you are presented with an intermediary step on your way to logging in using the University’s single sign-on Central Authentication Service (CAS).   

4   

2. An alternative to this is to add “/cas” to the end of a site’s URL. 

  

3. Anyone with a University network account can log into any of our Template sites. a. This is a feature, not a bug, as it gives us a method of letting you offer 

“private” content, available only to the University community. b. Only if a site administrator gives a logged-in user an elevated “role” (such as 

“author” or “editor”) could anyone actually “do” anything to the site. 4. You may find a need to create a user account not tied to a CAS account; these users 

will need to click the “Cancel Princeton University Authentication” link, and use the Username and Password fields on the subsequent page. 

 

5   

Administering Drupal 

The look of Drupal’s administration interface is distinctly different from the look of the content pages of your site; you should not be confused as to whether or not you are configuring or editing something on your site, or just viewing. The black administration menu anchored at the top of your browser window is the dead giveaway that you are logged in as some kind of administrator. 

 

 

1. You'll be seeing a lot of repeated administration interface items, like lists of items that can be filtered or otherwise acted upon, or pages with tabbed sub-sections (examples above). 

2. Most everything is accomplished by filling out a form and clicking “submit”. 

   

6   

A few words about Accessibility 

It is important to consider how to make your content as “accessible” as possible right from the outset, as it is much harder to do so after the fact. As such, throughout this class, you’ll find multiple references to this process. The University has placed a focus on accessibility in both the physical and digital realms, and has even assumed a leadership role in the latter. Your continued efforts to do so will help insure and solidify Princeton’s position on the top rung of the Accessibility ladder; like it or not, you’ll be making the world a better place, to boot…! 

1. No longer a “nice-to-have”, Accessibility is essential when creating websites, as the internet is now the primary source of information for just about everybody in the world! 

a. Anybody remember the “phone book”? 2. Our tools make the process a simple one. 3. Creating more accessible content will benefit everyone, not just those with 

disabilities. 

Let’s create some content, field by field 

Our Drupal platform lets you create many different types of pages, each with their own particular set of abilities. For this class, we’ll be starting off simply, creating pages of the “Basic Page” content type. As this class serves as an introduction to creating any kind of web content with Drupal, we will take time to go through each field of the Basic Page edit form in detail. 

Basic pages “basically” are the kind of pages used to define static sections of your site. 

1. They should live in your menu structure, so they are easy to discover; other, more “dynamic” content types like News or Events you wouldn’t want to have menu links for, as they have a kind of “shelf life” of active use, after which they can “retire” to the “archives” of your site.   

7   

2. Pages in Drupal sites are referred to internally as "nodes". a. Regardless of any assigned public path, each page in your site has an internal 

path of “/node/<node_number>”. The “node_number” refers to your page’s “address” in the site’s database. This internal path will never change. 

b. When editing pages, you’ll notice the path changes to “/node/<node_number>/edit”. 

You’ll always begin with a Title field 

Every page needs a title. There one exception to this, discussed in Part 2. 

“Permalink”, AKA the path to your page 

This refers to the external path at which your page is available. It is generated automatically for you, although you can manually enter a value if you wish. The automatic values are determined by patterns established for the various content types. For instance, the path for a News page would be set to something like “/news/your-news-article-title”. For Basic Page content, the title depends on where your page lives in the menu structure. An “About our department” page located in the top level of the Main menu at an “About us” link would have a path of “/about-us”. A “History of our department” page located one level below the preceding page, at a link titled “History”, would have a path of “/about-us/history”. If no menu item has been created yet for your page, or if you have not yet published the page, it will just be found at the internal “/node/<node_number>” path. 

The wonderful "body" field 

This field has many aliases. For Basic Page content, it’s labelled “Page Text”. For People content, it’s labelled “Description”. Internally, Drupal calls it the “body” field, so you’ll hear me refer to it as such as well. We’ll spend a lot of time in this field, going over each of the tools available in the WYSIWYG editor. This is also where a lot of the Accessibility discussion will take place. 

1. You’ll notice there are not a ton of formatting tools available; this is by design, for a number of reasons. 

a. Rather than spending a lot of time altering the appearance of your text content, we encourage you to use the available HTML structure elements, as 

8   

there are CSS rules in place to give these elements the proper appearance. b. If you spent a lot of time visually altering your content appearance (making 

text larger or smaller, changing the color, changing the typeface, etc.), and at a later date wanted to change the general appearance of your site, you would need to go back and individually re-edit each piece of content all over again. 

c. If you rely on the available HTML structure elements, and decide at a later date to change the general appearance of your site, all you would need to do is click a few buttons. 

d. Our designers have spent a lot of time carefully crafting the various Themes available in our platform. At the risk of sounding dismissive or callous, unless you have a design background, odds are your efforts will pale in comparison. 

e. If you do have some kind of design background, are familiar with CSS, and still wish to put your own design imprint on your site, there is a tool available, but it is (far) outside the scope of this class. 

2. The Accessibility angle, as pertaining to 1., previously, is that by relying on the tools to format your content using the available HTML structure elements, you are giving visually-impaired folks using “screen readers” a method of consuming your content in a similar fashion as those of us with the gift of sight. What we do with our eyes, such as scanning a page for headings, or links, or highlighted sections, screen readers can do in an aural fashion. 

a. For instance, screen readers can announce how many headings are on a page, offering the user a way to jump directly to the information they’re looking for. A page with subheadings offers more finite control for a user. And it helps sighted users too. 

b. There is a “Check Accessibility” button available, to help make the process easier. It’s the circular one with a person icon in it. 

Full documentation for the WYSIWYG editor can be found on our support site. 

 

 

 

9   

Adding images, starting easy 

As with many things in life, there is more than one way to add images to your content in our Drupal sites. We’ll start with (apologies to Staples) the “Easy” button, the one to add a Featured image. 

1. It’s “easy” because you don’t have to think much about sizing and placing your images in your content; instead, you just click a few buttons. 

2. Images added here will show up in the “automatic lists” (panel panes) that are available for placement throughout your site. 

3. Once you’ve clicked to add a Feature image, you’re presented with the “Media browser”, through which you can interact with your Media library, which is a fancy way of saying “the directory in which all your media files have been uploaded”; it gives you both a visual reference to your files, and a means of filtering the list to make it easier to find what you’re looking for. Hmm, a list of items that you can filter down, where have we seen that before…?! 

4. There are three tabbed sections in the Media browser, one for uploading new items, 

  

10   

one for viewing all of the items available, 

 and one for viewing just the items you have uploaded. 

 

11   

5. Once you’ve uploaded (don’t forget the alt text!) or picked your image, you need to decide how you would like it displayed, either with your page text running around the image, with the image spanning the full width of the content area, cropped or not, or hidden, so it only appears in the panel panes. 

Adding images, less easy, more control 

You may wish to place more than one image on a page, or you may want the image(s) to coincide with specific text. For this, we return to the body field, where we will use the “Media browser” button. 

 

First, you need to pick a point in your page in which you would like to insert an image. As a rule of thumb, you typically want to pick the beginning of a paragraph, so you will get predictable results when you choose how you would like the text to “run around” your image. Once you have your spot picked out, clicking the Media browser button brings you to the same interface you saw when selecting a Featured image, namely the Media browser (imagine that), with its three tabs for uploading a new image, or selecting from the entire library, or from your contributions to the library. Once you have selected or uploaded your image, you can select how large or small you’d like your image to be. 

12   

Your image will be placed “inline” with your text, meaning it will act like a great big block of text, not the greatest in appearance. So your next step is to pick how you would like your image to interact with the text around it. That is done by first selecting your image, then choosing an option from the now-available “styles” menu. 

Select one, and you will be given a “preview” of how your image will interact with your text.  

 

Now, while we call our editor a “WYSIWYG” editor, the nature of consuming web content on one of any number of browsers and/or devices precludes us from seeing exactly what site visitors will get. Testing your pages in a number of devices is recommended. 

 

13   

Adding Third-party Video and other Media content 

You can easily embed video content from various third-party sources. Our Template Sites platform relys on “oEmbed”, an open format designed to allow embedding content from one web page into another, in order to simplify the code you need for the embedding process. The first thing you’ll need is some video content. Princeton’s Media Central offers a local-to-Princeton repository for your video content. Of course, you can also host your videos on the popular free media platforms out there, such as YouTube and Vimeo. However, Media Central frees you from fear of your content being co-opted for use elsewhere, or of your content being overlaid with ads. Before making your final decision, consider the following sample Terms and Conditions: 

“… by submitting Content to YouTube, you hereby grant YouTube a worldwide, non-exclusive, royalty-free, sublicenseable and transferable license to use, reproduce, distribute, prepare derivative works of, display, and perform the Content in connection with the Service and YouTube's (and its successors' and affiliates') business, including without limitation for promoting and redistributing part or all of the Service (and derivative works thereof) in any media formats and through any media channels.” 

Media Central 

To embed video content from Media Central, you need to look for the "oEmbed" option under the "Share" tab.  

 

14   

If you try to just copy and paste the url for your Media Central video into your site, your video will not be added to your page, just a link will be. You will notice various size options available when generating the oEmbed URL for your video. These will not have any effect, as our platform overrides these settings in order to make your videos more mobile-friendly, scaling smaller when on a typical phone-sized device. Copy the oEmbed URL, and in the "body" field of your page, paste the code in between an "[embed]" tag and a "close embed" or "[/embed]" tag. Save your page, and observe your video embedded in the page. Resize your page to mobile sizes, or test your page on your phone, and observe your video scaling to an appropriate size for the page. If for some reason you need to be able to control the size at which your video plays back, you will need to add it to a text pane. We will cover these items in the Level 3 class. 

YouTube 

Unlike Media Central, you may find that copying and pasting the page URL for a YouTube video inside the appropriate [embed] and [/embed] tags does result in your video being added to you page. However, there is a better way. Note that in the page URL, there is a "?" present. Now, look for the "share" button on the page. in there, you will find another URL for your video, of the format youtu.be/<some random number and letter sequence>. Note the lack of a "?" in this URL. Without any additional parameters added to the YouTube URL, when your embedded video is finished playing, your site visitors will be presented with a selection of "related content" links, with thumbnail previews. When selected, these enticing links will take your users to the YouTube site, where they may get lost down the rabbit hole that is YouTube related content. To avoid this situation, when pasting the youtu.be URL inside the [embed] and [/embed] tags, add "?rel=0" to the end of the URL. This turns off the related content functionality, and when your embedded video ends, it will return to the first (or poster) frame, and your visitors will not be enticed to leave your site. 

   

15   

Using Taxonomy terms 

“Tagging” your content with taxonomy terms will give you greater flexibility in how you can present your content to your site visitors. While going into all of the nuts and bolts of how to take advantage of this is beyond the scope of this class, one thing that is easy to convey at this point is how using the “free tagging” available can help make your content more “find-able” by your site’s search function. 

 

For instance, let’s say you have a page about alien life and UFO’s. And let’s say that nowhere in your page do you refer to aliens as “extraterrestrial life”. If someone was to do a search on your site for “extraterrestrial”, they would not see your page in the search results. But using the free tagging will remedy that situation right quick. 

 

 

 

 

16   

Adding a menu link 

As mentioned at the beginning of this class, Basic Pages are the “static” pages that help define the structure of your site, and as such we want to include them in our menu structure. Doing so is a simple affair, you simple check “Provide a menu link”, and select a parent menu item for your link. Selecting “Main menu” places your link at the top level of the menu structure.  

Before we continue with the few remaining fields, let’s take a quick detour to menu administration. 

Administering menus 

You will likely find yourself wanting more control over where your menu links reside. For this, navigate to Manage > Structure > Main menu, where you will find all of your links arrayed in a list, with child items indented under their parents. 

 

You can click and drag on the crosshairs of any menu item to move it to another position. You must hit the “Save” button for your changes to take effect, though. 

17   

The past (revisions), and the future (future subject matter, future updates) 

For the next set of fields you will encounter, we’re only going to discuss one of the four items for now. This is because for one of them (“Sticky at top of lists”), we won’t be discussing its context until Part 2. And the other two of them, well, they don’t actually do anything at the moment… 

The important one at this juncture is the “Create new revision” button. With this checked, each time you update and save a page, the current state is captured in a revision. Adding a note in the adjacent text field adds a label to the revision, making it easier to identify past versions of the page. 

Selecting the page’s “Revisions” tab (up near the “View” and “Edit” tabs) gives you the history of the page, lets you compare versions, and lets you revert to previous versions. And because each revision is preserved, you can always “un-revert” if you need to. Just be sure to keep that “Create new revision” button selected! 

 

18   

And the rest… 

Next up we have a few administration fields that you won’t ever need to edit. They are the “Authoring information” fields, which record which user created the page, and when. 

 

Following that, we have the oh-so-necessary “Save” button, something you must select each time you go to edit a page, or your changes will be lost to the ethernet. Adjacent to the save button is a “Publish” button, which makes your page publicly available to anyone browsing your site. This allows you the ability to take your time creating your pages, saving and coming back to edit some more, only publishing when you’re absolutely ready. 

 

Once you have published your page, an “Unpublish” button takes the place of the “Publish” button. 

 

There is also a “Delete” button, should you wish to remove your page permanently. As someone who likes to hold onto things (you should see my basement), I’ll recommend you unpublish first, until you are sure about deletion. 

 

19   

Finally, there is the “View changes” button, which lets you see the edits you have made to the page, before you save them. 

 

20