Drupal Basics (Version 7)


  1. What is Drupal?
  2. Our Process
  3. Your Account
  4. Content
  5. Editing Content
    1. Adding Images
    2. Adding Links
    3. Adding Files
  6. Menus
  7. Extras - Aligning images/text
  8. Accessibility

What is Drupal?

Drupal is a free, open source content management system (CMS). It allows developers and non-developers alike to build complex websites using visual components. In the context of CACS built websites, Drupal allows our clients to manage robust websites without the need for regular code development. We use Drupal to build and configure websites that, outside of hosting, you'll be able to fully manage without our involvement.

Our Process

Your pre-launch website will be hosted on our development servers. There, we can share our work and collaborate to realize your vision. As the initial website development phase is completed, we'll create editor accounts for you and your personnel. Around the same time, we'll schedule a training session. Once you feel comfortable, you may start adding content to flesh out your website.

Sometimes adding content to a site can reveal aesthetic concerns or make a client reconsider a design route. At this point we can make final development changes before prepping for push to our live production servers. Assuming all content and development changes have been completed, we schedule a launch date and place an embargo on the site. This means that all content editing must stop until otherwise noted. Any content added after the embargo may be lost in the transition to production.

Once the website is live, we'll once again review to verify that everything is in order. If you have an old version of the website at a different domain (url), we'll handle redirection to the new domain. All content editing after launch will be made on the live website. Your development website will remain, but will be used only for code changes, not content. Any content you add on the development servers may be overwritten.

Your Account

Around the time of your scheduled training, you should receive an email notice of your Drupal account activation. It will include the username and temporary password you will use to access your website's administrator menu. Using the username and password, visit the login page of your development website. Here you should enter your username and password. Upon successful login, you'll be taken to your user page. If you haven't already, change your password to something you can remember. To do so, click the "Edit" tab. You'll need to enter your current password in the "Current password" field as well as your new password twice in the "Password" and "Confirm Password" fields. Remember to click "Save" or your password will not be changed.

User Page

In the future, you can login to the admin area of your site at at http://your-site-url/user/login (for example,

Note that your account belongs to you, and only you, unless otherwise noted as a group account. Make your password secure and never share with others. If you need to give someone access to admin menu, a new account should be created.  You may or may not be able to do this, depending on your user permissions.  If you're not sure, check with your account administrator.

Once your website has gone live, you'll want to access the login page on the live site. Any account changes you make to the development server after your site has gone live will have no effect on the live site and may be overwritten.

Forgot your password? Go to your /user page (i.e., and click on the tab 'Request New Password'.


There are a few ways to access content on CACS built websites. When navigating the site while logged in, you'll notice "EDIT" links attached to content. This is one way that you can edit content on your site. Some content will not have "EDIT" links, but will instead show a gear symbol when hovering over that area of content. You can use those gears to configure or edit content as well, assuming you have the right permissions. Finally, you can access a list of nearly all website content by clicking "Content" on the admin menu.

Sometimes this list can be overwhelming due to the amount of content listed. Using the filters under "SHOW ONLY ITEMS WHERE," you can show only content of a certain type or status, making it easier to find specific content. To edit content, click "edit". Clicking on the content title will take you to the content's page, not the editor.


If you'd like to add a new piece of content, click the "+ Add content" link. Next, select which type of content you'd like to add. Finally, complete the necessary fields and save. The "Editing Content" section has more information on completing these fields and publishing content

Editing Content

When adding or editing content, you're shown a page with associated fields and settings. Fields with a red asterisks are required, though it is recommended that you complete all fields unless otherwise noted. During your training, the proper creation of content types will be explained, as this is generally site and content type specific.

Edit Content Page

When editing body content, you're able to use a WYSIWYG (what you see is what you get) editor. This frees you from having to write any code and offers an interface similar to a text editor.


Adding Images

**Important note - the WYSIWYG editor/file uploader works best in the browsers Chrome, Firefox and Safari. Avoid Internet Explorer if you are adding images and/or files to your website.

To add images in the WYSIWYG editor, click the "Image" button. Next, click the blue "Browse Server" button.

Image Button Example

Now you can either pick an already existing image in the right column or upload one using the "Upload" button. To upload an image, click the "Upload" button and "Browse..." to select a file from your computer.

Upload and Browse

Once you've selected your file, click "Upload" to finish uploading your image.

Now your image should be selected in the right column. Click "Insert file" to choose your image.

Insert File Example

In the "Image Properties" window, supply "Alternative Text" to make your image meet accessibility requirements. This should be a description of the image. If the image is too large, you can use the "Width" and "Height" fields to adjust accordingly. The "Alignment" field will float your image left or right and apply text-wrap.

Image Properties Modal

The "Link" tab allows you to link the image to a URL or your can "Browser Server" to select a file on your server that the image will link to. Once you've finished adjusting the properties, click "OK" to insert your image.

Image Properties Link Modal

To add links in the WYSIWYG editor, highlight the text or select the image you'd like to make a link and click the link button.

Link Button Example

The "Link Type" field allows you to select whether the link should direct to a "URL", an anchor in the text (to jump to a pre-defined area in the text), or an email. Most of the time you'll be using the "URL" link type. When linking to an external website, drop a full link into the "URL" field. If you want to link to another page on your website, you'll need to use relative URLs.  Relatie URLs are defined assuming the browser already knows your current page location.  For example, if you are adding a link on the page "" to "", you'd enter "../another-example".  The "../" signifies taking two steps back in the URL.  If you only need to take one step back, you'd use "./".  If you don't need to step back in the URL chain, just enter the new path.

Link Modal Box

Adding Files

**Important note - the WYSIWYG editor works best in the browsers Chrome, Firefox and Safari. Avoid Internet Explorer if you are adding images and/or files to your website.

To add files in the WYSIWYG editor, highlight the text or select the image you'd like to make link to a file and click the link button.

Link Button Example

Click the "Browse Server" button. If the file you want use already exists, select it in the right column and click the "Insert File" button. If you need to upload the file, click the "Upload" button and then the "Browse..." button.

Upload and Browse

Select the file on your computer you'd like to upload. Now click the "Upload" button.

Your uploaded file should appear in the right column. Verify that it's selected and click the "Insert file" button. Finally, click the "OK" button to finish building a link to your file.

Insert File Example

Finishing Up

Once you've finished editing your content, you'll find a menu of settings at the bottom of the page. If you'd like for your new content to have a direct link on the menu bar, check "Provide a menu link". You'll be asked to supply a "Menu link title" which will be displayed on the menu.

Menu Settings Tab

The "URL path settings" tab allows you to manually change the URL for this content. Drupal automatically builds the URL based on the content title, so if you want it to be something specific, you'll need to uncheck "Generate automatic URL alias" and supply your own.

URL Path Settings Tab

It is good practice to create a revision history under the "Revision information" tab. Check "Create a new revision" and supply a message about your changes. Creating a revision history allows you to view previous changes and revert if necessary, preventing loss of content.

Revision Information Tab

Under publishing options, you can use the checkbox to publish or unpublish your content. If you want to edit this content again before actually making it live, uncheck "Published".

Publishing Options Tab

Now that you have all fields completed and options set, you can save your content by clicking the "Save" button. Note that if you haven't changed any of the publishing settings, this will make your content live. Unlike some other CMS's, there is no "Draft" state for a saved change, only published or unpublished.

Once your website has gone live, you should only edit content on the live site. Any content changes you make to the development server after your site has gone live will not show on the live site and may be overwritten.


Aligning Images Lists with Text

A difficult thing to format in a wysiwig editor is a list of images with text beside each image. Here are a couple tricks to use!

Here's an example:

The arch is used as an architectural detail on the Rotunda.


images example The arches of the passageway is a reflection of the Rotunda.


The windows also repeat the arches of the Rotunda.

As you can see in the example, lists look best when images are all the same size, so you might need to do a bit of image cropping and resizing before inserting them into your webpage. Drupal's file upload system does has crop/resizing, but it might cut out an important part of your image.

> Insert your photo; align it left
> insert your text that should go next to the photo.
> At this point, if you save, things should look fine. The problem comes in when you try to add the next left-aligned image - it will float itself next to the above text, which won't look correct.
> BEFORE inserting your 2nd image, go into 'Source' or code view in your wysiwig editor and add the following snippet of code:  <div class="clearfix">&nbsp;</div>    This code will act like a hard return and allow you to cleanly add your next image and text.
> Repeat 1st, 2nd and 3rd bullet, then save. Your page should look something like the above example.



Every UVA website should strive to meet accessibility standards. We follow guideliness for WCAG 2.0.  Below are some easy things to look out for on your Drupal website:

  1. Image ALT tags: Every uploaded or embedded image should contain an ALT tag (alternative text) for screen readers to read.  When you upload an image, an Alternate text box should appear, allowing you to add a short description of your image. 

    ALT text example image  alt text example image #2

  2. Header/Heading Tags:  Heading tags are used throughout your site pages, typically as titles or subtitles, to increase size or distinguish certain text.  Tags are ordered by largest to smallest: <h1><h2><h3><h4><h5><h6>, with <h1> used as your main page titles (largest), and <h6> as smallest text.  When adding new heading tags, they must be added in order - no skipping from <h1> to <h3>, for example.
    1. Assuming your page title is an <h1>, then the only heading you can add next on your page will be an <h2>.  After that, you may add either another <h2>, or an <h3>.  You can go back and forth between <h2> and <h3>, but again, no skipping from an <h2> to an <h4>, for instance.
    2. Heading tags are added in the Body field wysiwig editor by clicking on 'Format'.
  3. Linked Images: When you link an image, you must add an Advisory title, notifying the user where the image is linking. You can do this by
    1. selecting the image, then click the Link option in the editor
    2. Add the url to link to; don't close the popup yet
    3. click the tab towards the top of the pop box called 'Advanced' (see screenshot below)
    4. Fill in the Advisory title field
    5. Click ok, and save your page

Linked image example




Need a website, a custom solution, a CRM, or mobile app?
We can help!

Tell Us About Your Project