Drupal Express Editor Handbook

Developed and maintained by Institute Communications, Drupal Express is intended for administrative offices, research labs, groups, special events, faculty members, and student websites. It can also be used as a base from which to build school and college websites.

Drupal Express allows you to create a website with little technical or design expertise. The ready-made site comes with built in features and tools like news and events listings, photo slideshows, and mobile optimization. 

This handbook provides everything you need to know about Drupal Express, including how to request a site, then build, launch, and maintain it.

Additional non-Drupal Express specific resources for site editors can be found in the Resources for Site Editors and Content Managers section of our Drupal Handbook.

Categories

Drupal Express Training and Support

You are not alone! We are here if you need help with your Drupal Express website.

Open Help Desks

Have a question (or several) about your Drupal Express website? Just show up at one of our Open Help Desks, and your community will assist you.

Drupal Community Listserv

Georgia Tech's Drupal community regularly communicates through Listserv at drupal@lists.gatech.edu. This is a list for people at Georgia Tech to discuss the use of Drupal, pose questions, and discuss relevant issues.

Free and Paid Training Videos

A number of free training videos exist on the internet, as well as paid videos and on-site trainings from various companies. We collect some of the most useful onto a General Video Tutorials page.

Drupal Web Developer Meetings

If you have questions about Drupal, you are invited to attend Georgia Tech's monthly Drupal Web Developer group. Drupal developers across campus meet to discuss the latest trends in Drupal development and Georgia Tech-specific issues and practices, and to share projects and development with the community.

Brown Bag Education Series

These educational sessions provide the Georgia Tech community with professional development opportunities and information about campus resources. The topics range from marketing and communications refreshers, to Web strategy, to new trends in market research.

Project Management

Client managers help coordinate on-time, successful launches. We will work with your team from project kick-off to deployment and post-launch evaluation to ensure the goals of the website project are met.

Content Strategy Consulting

Updating and organizing content can be one of the most challenging aspects of launching a new website. Institute Communications can help by working with your department to develop a comprehensive Web content strategy, and by providing support during implementation.

Category: 

Drupal Basics

Learn the general concepts, and find your way around your website.

General Concepts (Drupal Express)

General terms and concepts that will be useful as you begin to explore Drupal.

Blocks and Regions

  • Blocks are chunks of information. Blocks can take the form of text, images, videos, menus, or news and event feeds.
  • Pages on your Drupal Express site are laid out in Regions. These can include the header, footer, sidebars, and main content regions.
  • Blocks are displayed in the regions of your site's pages. 

Menus

There are four standard menus that you will have access to in Drupal Express:

  1. Administration: This menu is only visible after you have logged into your website. It gives you quick access to the most important administrative pages. 
  2. Primary: Your site's main navigation. The primary menu is the location for your website's navigational structure.
  3. Footer: In your website's footer is the Footer Utility Menu and the Footer Links menu(s). These optional menus are typically used for internal, business resources, or policy information.
  4. Social Media: This optional menu contains links to your unit's social media accounts.

​You can customize menus in several ways, such as reordering menu items by setting their “weight” or simply dragging them into place, renaming menu items, and changing the link title (the tooltip that appears when you mouse over a menu item). 

Learn more about your website's menus.

Module

  • A module is software (code) that extends Drupal functionality.
  • Modules can usually be turned on or off easily.

Node (Content)

  • A node is the generic term for a piece of content on your website.
  • Depending on the type of node, different fields will be attached, and this is known as a "content type."
  • For example, a "Basic Page" content type has attached fields such as title and body fields.
  • Other examples of content type are: Super Blocks, Blocks, Carousel Slides, and News Articles.

Learn more about Content Types.

Path

  • When you visit a URL within your Drupal site, the part of the URL after your base site address is known as the path.

Users and Roles

  • A user is a person who is given access to log in to your website. Each user has a set of properties including username, password, role, and email address. 
  • A role is similar to a job title. Users are assigned roles, which give them different levels of permissions. Someone with an Editor role might be able to create and edit content but can't delete content or change any website settings. An Administrator has more permissions, and a Super Administrator has the most permissions.
Category: 

Find Your Way Around the Control Panel (Drupal Express)

Familiarize yourself with the control panel and the icons you will see throughout your Drupal Express site.

Administrative Toolbar

administrative menu

The Administrative Toolbar is the black bar that appears at the top of your website after you've logged in. The toolbar gives you quick access to the most important administrative pages. 

The following links are available once their respective module(s) are enabled.

  • The home icon: Return to the homepage.
  • "Dashboard": Go to the administration dashboard.
    The dashboard gives administrators a customizable overview of important site information. You can add and remove items from the dashboard, or you can disable the dashboard completely. Learn more: Working with the dashboard
  • "Content": Find, manage, and create new pages; manage comments.
  • "Structure": Edit blocks, define new content types, configure menus, administer tags with taxonomy, and configure some contributed modules.
  • "Appearance": Switch between themes, install themes, and update existing themes.
  • "People": Manage existing users, or create new user accounts.
  • "Modules": Update, enable, disable, and install new modules.
  • "Configuration": Configure the settings for various functionality, including some contributed modules. You can edit user account settings, general site information, and settings for other general administrative tasks.
  • "Reports": Display information about site security, necessary updates, and information on site activity.
  • "Help": Display information about the functionality of all of the modules installed on the site, including core modules. Each help page has a link to the module's online documentation page on Drupal.org, where more information can be found.

 

Text Editor Toolbar (WYSIWYG)

text editor toolbar

From left to right, the icons in your toolbar that are available for editing text:

  • "Maximize": Increases the window to full screen. Handy for editing text-heavy or long Web pages.
  • "Styles:" Gives your text different looks. The different styles available are:

Heading

Subheading

Subheading 2
Subheading 3
Preserve Format
Float Left Simple

 

Float Left 

Float Left 70%

 

Float Left 50%

 

Float Left 30%

 

 

Float Right Simple

 

Float Right

 

Float Right 70%

 

Float Right 50%

 

Float Right 30%

 

Clear Float Left
Clear Float Right
Clear Floats
 

Intro Text

Cutline Text

Computer Code

Cited Work

Inline Quotation

PDF icon

MS Word icon

MS Excel icon

MS PowerPoint icon

Generic File icon

  • "B": Bold font
  • "I": Italicized font
  • Quotation Marks:

Turns your text into an offset, highlighted quote.

  • "X2": Superscript
  • "X2": Subscript
  • Omega Symbol: Inserts special characters, e.g., © ® ► » ê Ó
  • Teaser Break: When you create content and promote it to the front page or assign it to a category, then a teaser or summary of that content will show with a link to the full content. One way to control what shows up as the teaser is to insert a teaser break.
  • Horizontal Line: Creates a horizontal line directly under the sentence, e.g.,

  • Insert/Remove Bulleted List
  • Insert/Remove Numbered List
  • Decrease Indent
  • Increase Indent
  • Insert a Table: Tables do not look very good on webpages, but sometimes they can't be avoided. If you have to use a table on your webpage, use this button to do so. Delete any numbers in the width and height fields. This will allow the table to resize itself on a mobile phone.
  • Insert an Image: See this tutorial for further instructions on how to insert images on your website.
  • Link to Content: See this tutorial for linking to pages within your website, or on other websites.
  • Anchor: Adds an anchor in your text that you can link to with a jump link (see "Jump Link" above).
  • Remove Format: Clears any formatting or style from text.
  • Paste as Plain Text
  • Paste from Word: This is an important tool to use whenever you cut or copy/paste from an MS Word document. Most of the time when you cut/copy text from Word and then paste it into Drupal, it brings along a lot of unwanted formatting that will make your text look wonky. Before you paste your text from Word, select this button and then paste your text in the popup window box.
  • "Source": Displays the page source (HTML code).
Category: 

Types of Content (Drupal Express)

Category: 

About Carousels and Slides

First of all, using a Carousel is optional on your website. As you will see below, the images needed to make Carousel Slides are BIG. So, if you don't have regular access to large, high-resolution images, you can turn off the Carousel.

Carousel Slide

A carousel slide is a rather large picture. 

  • The picture is usually paired with teaser text and a link to another page.
    A carousel slide is typically 2000 pixels wide by 750 pixels tall.  That is big! There is a white box overlay on the image that contains text and a link to another page.
     
  • Carousel slides are displayed via a carousel.

Carousel

The carousel is just a container that holds slides.

  • You typically find carousels on the homepage.
  • Slides go into the carousel and the carousel rotates them around. (Think of a slide projector.)Kodak slide projector
     
  • You can have only one slide in a carousel, or you can have several (although we recommend that you limit it to three).
Category: 

About Blocks (Drupal Express)

"Blocks" are a core feature of Drupal. If you are going to work on a Drupal website, you are going to work with blocks.

post it notes
Blocks are boxes of content.

Blocks can be used to present anything, so just about all content on Drupal sites — other than main content, and primary/secondary menus — is usually a block.

The content within a block can be:
  • Text
  • Picture
  • Video
  • Hyperlink
  • Or all of the above

Blocks are similar to "widgets" in other content management systems. Or, you can think of them as Post-It Notes stuck to a piece of paper. Each Post-It Note is a block. It is simple to add it, reposition it, or remove it.

A block can be:
  • Sized and styled in a variety of ways.
  • Easily moved around your page or website.
  • Placed on multiple pages in your website (but you only have to update the information in one place).

Blocks can be displayed in "Regions" (such as the footer or sidebar) of your page. The Block Administration page at "Structure" > "Blocks" lists all of your website's blocks in draggable table rows, so you can just drag them between regions.

Each block can be modified to adjust its appearance, shape, size and position — or which Web pages it appears on.

The size of the block can be:
  • Automatically resized
  • Full-width
  • 3/4-width
  • 2/3-width
  • 1/2-width
  • 1/3-width
  • or 1/4-width
Category: 

About Super Blocks (Drupal Express)

Super Blocks are pretty awesome. They are a member of the "Blocks" family, but they offer more style and layout options than regular Blocks.

Also, you can easily COPY Super Blocks, which may save you a ton of work!

post it notes on a piece of paper
It might be helpful to think about Blocks and Super Blocks as Post-It Notes on a piece of paper: easy to resize and move around.
  • Besides being awesome, Super Blocks are a key part of your Drupal Express website.
  • A Super Block is a block of content. It can be:
    • Sized and styled all sorts of ways.
    • Filled with any variation of content.
    • Easily moved around your page or website.
    • Placed on multiple pages in your website (but you only have to update the information in one place).
  • The size of the Super Block can be:
    • Full-width
    • 3/4-width
    • 2/3-width
    • 1/2-width
    • 1/3-width
    • or 1/4-width
  • The content within it can be:
    • Text
    • Picture
    • Video
    • Hyperlink
    • Or all of the above
  • Its style can be:
    • Blue heading
    • Dark gray heading
    • No heading
    • Blue heading with a gold jump link button
    • Blue heading with a blue jump link button
    • Gray heading with a gray jump link button
    • No heading with a gold jump link button
    • No heading with a blue jump link button
    • No heading with a gray jump link button
Category: 

About News & Event Blocks

You can easily display a feed of your unit's news or events in special blocks called Mercury Blocks.

About Mercury Blocks

  • News and Events are entered in Mercury.
  • You create custom feeds in Mercury. Each custom feed is given a "Feed ID number."
  • You enter the "Feed ID Number" in the Mercury Block on your website.
  • Those News and Events items are displayed on your website.
Category: 

Page Layout Options (Drupal Express)

Multipurpose Page Layout (GT Drupal Express)

The Multipurpose Page layout is recommended for most Web pages throughout your site. 

Why?

  • Mainly because it's flexible. You do not have to use all of the fields provided, but if you decide to add sidebars or blocks at a later time, the Multipurpose Page can accommodate this.
  • It works well to break up content-heavy pages.

Let's take a tour of the "Multipurpose Page"

Multipurpose Pages come with three separate "Body" fields.

  • Within these "blank boxes," you can place text, insert images, embed media, etc. Anything, really.
    multipurpose page body field
     
  • Below each "Body," you can insert any number of blocks in a horizontal row. We call this section "Articles."
    multipurpose page articles

    • These blocks can be regular blocks or super blocks.
    • The beauty of blocks is that you can format them to be any size: full width, 3/4-width, 1/2-width, 2/3-, 1/3-, and 1/4-width. They can have titles (or not). Super blocks can even have titles in different colors.
  • Next to each "Body" text, you can insert any number of sidebars. We call these "Asides."
    multipurpose page aside

    • Asides are good for blocks of "Related Links," "More Information," "Contact Us," etc.
    • You can put regular blocks or super blocks in this section.

Because of the several different ways you can format blocks and bodies of text, Multipurpose Pages can really be arranged to look however you like.

Here are some good examples of Multipurpose Pages:

 

Category: 

Horizontal Page Layout (Drupal Express)

  • A Horizontal Landing Page has a field for body text, images, or videos.
  • It also allows you to create four rows of blocks. The blocks in each row can be whatever size you'd like.
  • This layout type is typically used for homepages.

Here's an Example of a Horizontal Landing Page Layout:

horizontal landing page screenshot

 

Category: 

Vertical Page Layout (Drupal Express)

  • It has a place for body text, images, or videos.
  • It also lets you put as many blocks as you want into two columns.

Here's an Example of a Vertical Landing Page:

vertical landing page

Category: 

Basic Page Layout (Drupal Express)

  • The Basic Page layout is very, very basic. It is good for your static content, such as an "About us" page.
  • The drawback to using a Basic Page is that if you ever decide you want to add a block of "Related Links" or anything else, a Basic Page cannot accommodate this.
  • Remember, we recommend that you use the Multipurpose Page. It can do practically anything!
Category: 

Convert Your Basic Page Layout to a Different Page Layout

You can change a Basic page layout to a different page layout. For example, if your homepage is currently using the Basic Page layout, you could convert it to a Horizontal Landing Page layout.

Process

  1. Click on the "Convert" tab at the top of the page.
    tabs at top of a page, including View, Edit, Revisions, Convert, and Log
  2. You will be shown your "Current Node Type," (which is Basic page).
  3. From the "To What Content Type Should this Node be Converted" dropdown menu, choose your new page layout.Example list includes Event, Feed URL (GT Calendar), Horizontal landing page, Multipurpose page, Vertical landing page, and Slide
  4. On the next screens, you must choose where the information from each field in your old layout should go in your delightfully new and different layout. The only field we have to decide on is the "Body" field, because any blocks that you have on your page will NOT transfer to the new layout. 
  5. Under "Body should be inserted into" you will see a dropdown list of options for what to do with this old information. The site will automatically choose which field it thinks your content should go in. Do not change this selection. If you choose anything other than what the site recommends, you will lose your information. Forever.
  6. options shown include discard, Append to body, Replace body, and field_body_1
  7. Once you decide where each old field data goes, click on the "Convert" button at the bottom of the page.
    CAUTION: Once you click on "Convert," the deed is done. If any of your content has been lost in the process, it is lost forever. Even your old revisions will be gone. 
Category: 

Get to Know Your Website Menus (Drupal Express)

To access and edit your website menus, navigate to "Structure" > "Menus."

Primary Menu

The "Primary Menu" is your site's main navigation. It is where you will add all of your navigational structure. The "Primary Menu" is displayed in the gold bar underneath your header.
main menu example

The two menus that make up the primary navigation are:

  • "Main Menu": The Main Menu is used to show the major sections of the site. Each menu item is linked to a page within your site or to external URL addresses.
  • "GT Action Items": Contains up to three links of actions you want your Web visitor to take, e.g., "Apply," "Contact Us," or "Give."

Social Media Menu

Social media links are displayed in the upper right corner of the page, above the header. The Social Media Menu contains icons that link to your site's social media accounts. 
social media menu

Footer Links Menus

The Footer Menus are resource links displayed between the Georgia Tech Resources Menu and the Georgia Tech Map. These menus only appear when the "Configurable" footer menu is active. Learn how to change your footer options.
georgia tech footer menu

​​There are three footer link menus. You may add all three menus, or none at all. You may include up to 25 items in each menu.

  • "GT footer links 1"
  • "GT footer links 2"
  • "GT footer links 3"

Utility Links

Displayed in the bottom-most footer, just above the Emergency, Legal, and Accountability links, is "GT Footer Utility Links." Suggested items for this menu are: "Contact Us," "Site Feedback," or "Tech Lingo."
footer utility links

Administration Menus

  • The Management Menu is the top navigation bar of the admin panel and all the sub-menus that it contains. It's visible and can be used only by logged in administrators, or by any user belonging to a user role with the necessary permissions. 
    management menu
  • The User Menu is for user account links such as Log out, My account, etc.
    user menu
Category: 

Website Security and Maintanence

Keeping your Georgia Tech modules and website up to date and secure from hackers is a crucial part of your website. 

OIT does not offer site maintenance or security patching services, so you will need to handle this yourself, or with an in-house or approved freelance web developer.

 

Category: 

Plan Your Site

Before you begin building your website, start by answering some fundamental questions.

By thinking through the details and planning a strategy, you will avoid creating a website that is confusing, cluttered, and difficult to maintain.

Drupal Express Installation

The following pages explain how to install and set up an instance of Drupal Express:

Category: 

Recipe for Installing Drupal Express on OIT Web Hosting

An overview of ALL the steps you should take when installing a GT Drupal 7 site on OIT's web hosting.

  1. Request a site from OIT, and make sure to ask for Drupal Express. (Hints for non-OIT installation.)
  2. Create automatic backups of your site.
  3. Learn how to use GT features, and teach others, using the Drupal Express Editor handbook.
  4. Double check the best practices checklist for setting up a site.

Optional Steps

  1. Hide your site until you are ready to go live.
    • In case you're not yet ready for your site to be found by good search engines (such as IXquick or Google) while your site is being developed, you might want to add these two lines to the top of your /httpdocs/robots.txt file (and remember to remove them when you're ready to go live!):
      • User-agent: *
      • Disallow: /
  2. Changing the CSS Styles
    • If you decide to change the design in any way, this script assumes you are using the "GT Subtheme" Theme to house all your changes.
    • You can find this theme at: sites/all/themes/gt_subtheme

Resources

Category: 

Request a Drupal Express Website

How to request a Drupal Express website from OIT.

Request Process

  1. Click this Request a Site link.
  2. Log in, using your GT account and password (e.g. "gburdell1").
  3. The "Requestor Information" fields will be filled in for you.
  4. In the "Domain Owner" box, enter the contact information for the person or people who will be allowed to use the site's control panel and add more domain administrators. 
  5. In the "Domain Administrator" box, enter the contact information for the person or people who may have access to the website control panel.
  6. In the "Website Information" box, follow these guides when answering the questions:
    • Domain name requested?
      This is only applicable if your Drupal Express website is NOT replacing an already-existing website. Enter ONLY the top-level domain alias (example.gatech.edu). Do NOT enter dev.example.gatech.edu or test.gatech.edu or s1.example.gatech.edu. If you need separate sites for development, testing and production, enter those details in the "DNS setup" box, as described below.
    • Does DNS need setup at this time?
      The information you type here will help your future self by making it easier to switch between domain aliases (like when your development site needs to become your live site). For details about how domain aliases work best on OIT's Web hosting, read this helpful FAQ about requesting Dev, Test & Production environments.
    • Does one of these Owners/Administrators have required Web skills?
      The real question is: "Do you or a member of the team of administrators you have specified have the necessary Web development skills to set up and maintain your website?" Remember: OIT cannot maintain your website.

  7. Check the box next to "I am building a Drupal Express website."
    • Technical Lead with Developer responsibility (i.e. gburdell1)
      Enter the contact information for the person or people who will be responsible for organizing, populating, and customizing your website. He or she will have access to all functions across the site.​​
  8. Check the boxes that acknowledge you have read/understood both the relevant policies AND that OIT does NOT offer support for installing or maintaining your website.
  9. Click the "Submit Request" button at the bottom of the page.

Notes

These requests will take up to 72 hours to be processed. You will receive an email and a link to the website once it has been set up.

Category: 

Using Drupal Express on non-OIT servers

If you'd like to use Drupal Express, but are not on OIT's web hosting, here are some tips.

Designed for OIT Web Hosting

Drupal Express is designed to work on OIT's webhosting environment, and so no officially-supported method exists for installing it elsewhere.

Get the script

However, out of the kindness of their hearts, Institute Communications has provided an outline of the shell script used to install Drupal Express. It receives no official support, but you are free to alter it for your own use, with a few helpful hints in the README file.

Give back

If you do change the script and get it to work for your set up, please consider submitting your improvements to the repository, so others in the community can benefit, too. Thanks!

Category: 

Log in to Your Website

First things first: Learn how to log in to your Drupal Express website.

Get Permission

To log in, add, or edit content on a Drupal site, the site's administrator has to give you special permissions. So, send the administrator an email asking for this permission first. 

Off-Campus? Connect to the GT VPN

  1. If you are OFF CAMPUS, you need to log in to the GT VPN before you can make changes to your site. Although you may be able to log in to your site, you often can't save any changes you make unless you use VPN first. 
  2. If you do not have GT VPN, follow these instructions for installing it on your computer.

Use Your GT Account to Log In

  1. Scroll to the bottom of the Drupal Express website. In the footer menu, you will see "GT Login."footer log in
     
  2. Click on that link. If you are not already logged into the GT server, you will be brought to the GT Login Page. Here, you will enter your GT username and password, then click the "Login" button.
    Georgia Tech Log in page
  3. You are now logged in to your site!
Category: 

Configure Your Settings

If you are a site Editor, you can skip this section. Only your technical lead (Site Administrator) has permission to configure website settings.

Category: 

Configure Your Site's Administrative Settings (Drupal Express)

When you are initially setting up your Drupal Express website, complete these items first:

Add Security Notification Email Addresses

  1. Go to "Reports" > "Available Updates" > "Settings"
  2. In the "Email addresses to notify when updates are available" field, add email addresses for the people on your team who should receive notifications if there are security issues or updates. Remove email addresses not on your team (such as webteam).
  3. This is a very important step!

Change the Site Name and Email Address

  1. Go to "Configuration" > "System" > "Site Information."
  2. In the "Site Name" field, change "MYWEBSITENAME" to the name of your school/department/division.
    • Keep "| Georgia Institute of Technology | Atlanta, GA" as-is.
    • Note: If adding your school/department/division name pushes your site name over 60 characters, then delete the "| Atlanta, GA" portion, and/or shorten "Georgia Institute of Technology" to "Georgia Tech."
    • Why? Read: Title Tag Optimization.
  3. In the "Email Address" field, change the address to a departmental alias email address (e.g., "architecture@gatech.edu").
    • This email address is what will show up in the "From" field when automated emails are sent related to user registration, new password requests, and other notifications. 
    • Using an alias will also reduce incoming spam.
Category: 

Customize Your Theme (Drupal Express)

To make changes to your website's theme, go to "Appearance" > "Settings" > "GT Sub-Theme."

Change the Site Title

  1. In the "Site Title - Line One" field, type in the name of your school/department/division.
  2. In the "Site Title - Line Two" field, delete "Optional Tag Line," and replace it with your tagline or slogan if you have one. 

Change the Header Logo

Your Drupal Express website header comes with the primary Georgia Tech logo. You may add a unit identifier like this to create a combination logo:

georgia tech combination logo

 

 

 

  1. Request a Combination Logo
    • To ensure consistency, combination logos are provided by Institute Communications.
    • Your request will be handled by the Institute Communications client manager who serves your unit.
  2. Upload your logo to the website.
    • Go to "Appearance" > "Settings" > "GT Sub-Theme."
    • Uncheck the box next to "Use a Georgia Tech logo listed below."
      use a georgia tech logo listed below
    • Upload your logo.
    • In the "Logo URL" field, type in the URL of your website.

Change the Footer

The footer of your Drupal Express website is set to "Minimum" and contains a map of Georgia Tech and a default street address. 

Add Your Unit's Street Address
  1. Scroll down to the "Super Footer Settings" box.
  2. In the "Custom Street Address" field, type in your address and phone number.
    Please note that the Georgia Tech stylebook dictates that you format your phone number like this: XXX.XXX.XXXX
Upload a Custom Map
  1. In the "Super Footer Settings" box, uncheck the box next to "Use the default Georgia Tech campus map image in the footer."
  2. In the fields that appear, upload your map and the URL to where the map should link.
Customize the Footer Appearance

Your Drupal Express website comes with the "Minimum" super footer. This option gives you only the menu from the left column in the super footer of the homepage at www.gatech.edu.

To change this setting, select from one of the following in the "Super Footer Settings" box:

  • "Full Georgia Tech Default." This option will give you the exact set of super footer menus that appear on the homepage of www.gatech.edu.  
  • "Configurable." This option allows you to have three fully configurable menus in your site's super footer. This option must be selected in order to add menu links to your footer.

Always be sure to click the "Save Configuration" button at the bottom of the page after making any changes.

Category: 

Manage Users (Drupal Express)

GT Drupal Express allows for a variety of roles and permissions for your website's content creators. 

Adding Members

  1. Log in, and navigate to "People" > "Add CAS user(s)."

     
  2. Type the Georgia Tech username (e.g., gburdell3) of each person you want to have access to your website. (FYI: You will need to provide the email address of these people in the "Customizing Member Permissions" section.)
  3. Once you have listed all names, Click the "Save" button.

Customizing Member Permissions

Next, you will customize each member's permissions.

First, what does each role mean?
  • "Anonymous User" - Automatically applies to anyone visiting your site who is not logged in.
  • "Authenticated User" - Automatically applies to anyone who is logged in to your site (either via Drupal or GT Login), so be careful about what permissions this role is given.
  • "Editor" - This role can Edit all pages, as well as the menu and blocks on a GT Drupal site. It's not usually assigned automatically, but by one of your site's Administrators.
  • "Administrator" - This role has limited access to the Administrative section of a GT Drupal site and can also do anything Editors can. It should NEVER be assigned automatically.
  • "Super Administrator" - This role has full access to the Administrative section of a GT Drupal site. It should NEVER be assigned automatically.
To assign each user a permission:
  1. Click the "List" tab in the upper right.
  2. Find the person's name and click the "Edit" link.
  3. Scroll down to the "Email Address" field and enter his or her email address. By default their email address will be set as GT username @gatech.edu (gburdell3@gatech.edu). This address will work for that user, but it's best to use their department email address (george.burdell@oit.gatech.edu).
  4. Scroll down to the "Roles" section and check the box next to the role(s) you want to assign this user.
  5. Click the "Save" button.

Removing Members

There are times you will need to remove a user because they no longer need access to your site.

The best way to do this is:
  1. Filter by role type (e.g., Editor).
  2. Highlight the name you want to remove.
  3. Select "Remove CAS username" from the dropdown menu.
  4. Alternatively, you can edit the user account, and set the status to "blocked". The user will no longer be able to access your site. If you wish for them to have access again, simply change their user account status to "active."
Category: 

Organize Your Navigation

Think about a filing cabinet. Paperwork is much easier to find when it is assigned to a clearly labeled folder. The same rule applies to organizing the Web pages within a website. Humans prefer simple, logical organization, and so do search engines.

Introduction

Working with Menus

Category: 

Add a Link to a Menu (Drupal Express)

To add a link to a menu on your website, follow the directions listed below.

Adding Menu Links

  1. Navigate to the page you want to add to the menu.
  2. Click the "Edit" tab.
  3. Scroll to the bottom of the page and click on "Menu Settings."
  4. Check the "Provide a Menu Link" box.
  5. The "Menu Link Title" field will automatically populate with your page title. Change this to the clearest, shortest title possible. Why? There is a limited amount of room on the primary menu bar, so brevity is key. Additionally, you should avoid acronyms and branded terms in your menu. You want your website navigation to be clear to anyone who visits your website — whether they are familiar with your work and its terms or not.
  6. Next, decide what menu you want this page added to by selecting it from the "Parent Item" dropdown list.
    menu settings field

    • If you want this page to be a main menu item in the gold bar, select, "<Main Menu>."
    • If you want this page to live in the gray "Action Links" menu, select "<GT Action Items>."
      main menu
       
    • If you want this page to be a submenu, from the dropdown list, select the menu item that this page should go under.
      submenus
       
    • If you want this menu item to live in the footer, select either "GT Footer Links 1" (column 1), "GT Footer Links 2" (column 2), or "GT Footer Links 3" (column 3). Note that these menus will not show up in your footer unless you have enabled the "Configurable" footer menu. Learn how to change the footer options.
  7. Change the Drupal-generated "URL Alias" to a user-friendly, SEO optimized web address.
  8. Click the "Save" button.
Category: 

Reorganize Your Primary Menu (Drupal Express)

  1. Navigate to "Structure" > "Menus" > "Main Menu."
  2. Alternatively, you can get there by hovering over the gold primary menu bar until a little cog appears in the upper right corner. Click on the cog.
    edit menu cog
  • On the next page, you will see a list of links in your primary menu. To the left of each link is a symbol. Click on that symbol and drag the menu item to the location where you want it.
    drag to re-order symbol
     
  • At the bottom of the page, click "Save Configuration."
Category: 

Leave a Breadcrumb Trail (Drupal Express)

Breadcrumb Trails​ (menus) appear just below the Primary Menu bar.

About Breadcrumbs

Breadcrumb Menus help website visitors find their place in the site, no matter how deep into it they go. Even if you do not want a page to show up in your Primary or Footer Menus, it is important for the page to be listed in the Breadcrumb Menu.

breadcrumb menu

Adding Pages to Breadcrumbs

Once your page has been added to a menu within your site, it is automatically added to the Breadcrumb Menu. To keep your page IN the breadcrumb menu but OUT of the Primary or Footer Menus, follow these instructions:

  1. Navigate to "Structure" > "Menus" > "[Choose Menu]."
  2. Find your page in the list of menu items and uncheck its box under the "Enabled" column.
    enabled column
  3. Click the "Save Configuration" button.
Category: 

Add Icons to The Social Media Menu (GT Drupal Express)

  1. In the top right corner of your website, click on the box that says, "Add Social Media Links Here."
    add social media links
     
  2. Click on "+ Add Link." 
  3. Under "Social Media Service," select the social media platform you want to add.
    The fields below will automatically populate with the Institute's social media information.
  4. In the "Path" field, change the URL to point to your unit's social media account.
  5. Click the "Save" button.
  6. You will be brought back to the Social Media Menu list. To add more social media icons, repeat steps 2-5.
Category: 

Add Links to Your Footer Menu (GT Drupal Express)

Footer Utility Links

Suggested items for this menu are: "Contact Us," "Site Feedback" and "Tech Lingo;" however, you are not required to add these links to this menu.

  1. In the footer menu, click the box that says, "Add Footer Utility Links Here."
    footer utility links
     
  2. Click on "+ Add Link."
  3. In the "Menu Link Title" field, type the menu title you want to appear in the footer.
  4. In the "Path field," type the URL path to the page. You should only type in the part of the URL that follows ".edu/." Do not include a "/" before the URL.
  5. Click the "Save Configuration" button.

Footer Links Menus

To add links to the Footer Links menus, please follow the Add a Link to a Menu instructions. You may include up to 25 items in each menu.

Category: 

Create User-Friendly, SEO-Optimized Web Addresses

Every time you create a new page, your Drupal website automatically assigns it a URL alias (Web address). Ideally, you should change the alias to match your website organization. Read on to find out how. 

What is an Alias?

It is a URL that can be read and understood by humans and search engine robots alike.

  • This is a URL: www.drupal.gatech.edu/node/1985 (I don't have any idea where this link might take me.)
  • This is a URL alias: www.drupal.gatech.edu/organize-navigation/url-alias (It links to the same page, but I can easily see where I'll go if I click the link.)

Why Should I Change the Drupal-Generated Alias?

  • Because Drupal ignores your website's hierarchy or site structure. It assigns every page to the same level, whether it is your homepage or a sub-page.
  • Because no matter what menu your page actually lives under, a Drupal-generated URL makes it look like your page belongs to the top level of the primary menu.

To What Should I Change the Page Alias?

  • While you are in Edit Mode, scroll to the bottom of the page and click on "Menu Settings."
  • Look at the "Parent Item" of the page.
  • Go to "URL Path Settings"
    • Uncheck the box next to "Generate Automatic URL alias."
    • In the "URL Alias" field, type the "Parent Item" words in front of your page title. 
    • Separate the words with dashes and remove common words.
    • Do not put a "/" before the URL.
      automatic alias
       
    • When you are done, click the "Save" button.

What Else Should I Know About URL Aliases?

  • Think about a filing cabinet. Paperwork is much easier to find when it is assigned to a clearly labeled folder. The same rule applies to organizing the Web pages within a website. Humans prefer simple, logical organization, and so do search engines.
  • Always use lowercase letters. Never capitalize words in a URL.
  • Remove any extraneous words (such as "and" or "the").
  • Use dashes ( - ) between each word. Do not use underscores ( _ ), and do not smushwordstogether.
  • Do not end your alias with a “/”.
Category: 

Add Content to Your Website

Tutorials on how to add content to your Drupal Express website.

Creating Content for the Web

Content Categories

Category: 

Pages (Drupal Express)

Create and Edit Pages

Category: 

Add a Page (Drupal Express)

  1. Navigate to "Content" > "Add Content." You will see a list of different types of content that you can add, including four different page layouts: "Basic Page," "Horizontal Landing Page," "Vertical Landing Page," and "Multipurpose Page."
  2. We recommend that you choose “Multipurpose Page,” because it will give you the most options for formatting and layout. Regardless of what page layout you choose, follow these instructions:
  3. In the "Title" field, type your page title.create multipurpose page
     
  4. Scroll to the very bottom of the page and click on "URL Path Settings."
  5. Click the "Save" button, and you’re done.

Adding Content to the Page

  • You can now scroll back up the page and start adding content, or you can return to it later, by locating the page in the Content List.
  • Learn about the Multipurpose Page.
Category: 

Publish a Page (GT Drupal Express)

About Drafts

Any new page you add or revision you make to an existing page must be published before it shows up on your website. 

Publish a New Page (Draft)

  1. Once you are finished adding content or revising a page, scroll to the bottom of the page, and click the "Save" button.
  2. Click the "Publish" button that appears at the top of the page.
    Publish button
  3. Choose the "Publish" button that appears to confirm that, yes, you really do want to make this revision go live. publish confirmation

Revisions of Existing Pages

Your website keeps track of every revision you make to a Web page. This makes it easy to compare versions, or revert to an earlier one.

  1. To see all the revisions that have been made to your page, click the "Revisions" tab.
    revisions tab
  2. To view a version of the Web page, click the date link of the revision you want to see. Click the "Edit" tab to make any changes to the page.
  3. To compare versions, check the boxes next to the revisions you want to compare against each other, and click the "Compare" button.revisions list
  4. If you decide you want to publish an earlier version of the page, click "Revert to This" at the top of the page.revert to this
  5. Click the "Revert" button to confirm that you do indeed want to revert to this version of the Web page.revert confirmation
Category: 

Edit a Page (Drupal Express)

  1. Navigate to the Web page you want to edit.
  2. Click the "Edit Current" tab at the top of the page.
    edit current tab
     
  3. Make your edits to the page.
  4. Click the "Save" button.
  5. Publish your changes.
Category: 

Copy a Page (Drupal Express)

  1. Navigate to the page you want to clone.
  2. Click the "Clone Content" button.
    clone content button
     
  3. Voila! You now have a duplicate of your page.

WARNING: This will NOT create new copies of any blocks on the page, you will need to copy them individually. And, if you edit the blocks on your new page copy, it will change the original blocks: which you may not want to happen.

Category: 

Hide a Page

There are two ways to hide a page

  1. Unpublish the page.
    • Click on the "Revisions" tab at the top of the page.
      tabs at top of page
    • Click on the date of the draft/revision you want to unpublish in the Revision table, which will probably be the most recent revision at the top, and will say, "Current Revision (Published)" in the Status column next to it. list of revisions
       
    • Above the Revision table, click the "Unpublish Current Revision" link.
      unpublish current revision
       
    • On the next page, click the "Unpublish" button to confirm that you do, indeed, want to unpublish this page.
      unpublish
       
    • Click the "Save" button.
    • Make sure you also follow step #2 below.
       
  2. Remove the page from all menus and do not link to the page from any other pages.
    • At the bottom of the page, go to "Menu Settings."
    • Uncheck the "Provide a Menu Link" box.
      do not provide a menu link menu
       
    • Click the "Save" button and you're done.
Category: 

Unpublish a Page (GT Drupal Express)

  1. ​Click on the "Revisions" tab at the top of the page.
    tabs at top of page

  2. Click on the date of the draft/revision you want to unpublish in the Revision table, which will probably be the most recent revision at the top, and will say, "Current Revision (Published)" in the Status column next to it. list of revisions
     
  3. Above the Revision table, click the "Unpublish Current Revision" link.
    unpublish current revision
     
  4. On the next page, click the "Unpublish" button to confirm that you do, indeed, want to unpublish this page.
    unpublish
     
  5. Click the "Save" button.
Category: 

Page Redirects

If you are migrating an existing website over to Drupal, one consideration is how you redirect the old Web page addresses (URLs) to the appropriate pages on the Drupal version of the site.

There are a couple of cases where you might need to do this:

  1. You cut a page from your old site, so it no longer exists on the new site.
  2. You changed the web address for a page when you created it on the new site. 

"301 redirects" are considered the best way to handle redirected pages, because they tell search engines to update their databases with the new paths. This way, you won't lose your search engine pagerank or lose site visitors with 404 "not found" errors.

Here's how to set up a redirect for a page:

  1. Log in to your site and navigate to the page you want to set up a redirect for.
  2. Click the "Edit Current" tab.
  3. Scroll to the bottom of the page, and click on the "URL Redirects" link.
    Bottom menu of the page. The link that reads "URL redirects" is highlighted.
  4. Click the button that says, "Add URL Redirect to this Node."
    A button that says "Add URL redirect to this node"
  5. In the "From" field, type in the old URL for this page (the one that already exists on your old site). Important: You only want to type in the part of the URL that comes after gatech.edu/.  For example, if the URL for this page on your old site was www.space.gatech.edu/planning/, then you only need to type "planning/" into the from field.
    The "From" field on the URL Redirects link.
  6. Click the "Save" button. NoteLeave the "To" field the way it is. Do not modify it.
    The "Save" button on the URL redirects page.

If, for some reason, you need to add another redirect that points to this same page, you can just repeat the process. This might be the case if you cut pages from your old site when migrating to the new site. Rather than risk having visitors get error messages when they try to visit a page that no longer exists, redirect the old page URL to a page on your new site, even if it's your homepage.

Category: 

Blocks and Super Blocks (Drupal Express)

Create and Edit Blocks

Create a Block (Drupal Express)

  1. Navigate to "Structure" > "Blocks" > "Add Block"
  2. Adding a "Block Title" is optional. It is the headline that your site visitors will see. If you do not want a headline/title on your block, leave this field blank.
  3. In the "Block Description" field, describe the block in a way that will be easy for you to find it again in a long list of other blocks. Consider using a pattern for naming your blocks that indicates what type of content it is, what parts of your website it will probably appear on, and then the specific content in this block.
  4. In the "Block Body" field, add whatever content you want.
  5. Click the "Save Block" button at the bottom of the page.
Category: 

Create a Super Block (Drupal Express)

Navigate to: "Content" > "Add content" > "Super Block."

Description

  1. In the "Description" field, describe the block in a way that will be easy for you to find it again in a long list of other blocks.
  2. Consider using a pattern for naming your blocks that indicates what type of content it is, what parts of your website it will probably appear on, and then the specific content in this block.

Title

  1. The "Title" is optional.
  2. It is the headline that your site visitors will see.

Image/Primary

  1. The "Primary Image" is optional.
  2. If you upload an image, always type in the "Alternative Text." Alt text is simply a description of the picture that can be read by web visitors using screen readers.

Image Placement

  • When your super block is sized at full width, you have the option of positioning the image on the left or the right side of the block.
  • If you entered text, it will wrap around your image.
  • The default position is "Left."

​​​Text/Teaser Text

  • The "Teaser Text" field is optional.
  • It can be used to include text, image(s) or an embedded video.

Link/Jump Link

  • The "Jump Link" field is optional.
  • Adding a link creates a Highlight Button button for your block. If you have a heading, it will become clickable as well.
  • In the "URL" field, type a link to another website, or click the link below that says, "Link to a page or file on this site."
  • In the "Title" field, type a human-readable label for your link (e.g., "Learn More," "Read the Full Article," etc.)

Jump Link Location

  • This field is required, but you can ignore it if you did not enter a link.
  • You can choose to place your Highlight Link button:
    • Below the teaser text and image (the default value), or
    • As an overlay on top of the image. Note: The "Image Overlay" option only works if you uploaded a "Primary Image." 

Styling/Skin

  • This field is required, and determines which of the pre-set design treatments is used for this block. The skin options are:
    • Standard: uses a gray title and a gray Highlight Link button (this is the default value).
    • GT Blue: uses a blue title and a gold Highlight Link button.
    • GT Gold: uses a blue title and a gold Highlight Link button.

When you are all finished, click the "Save" button.

Category: 

Super Block Styles

Examples of Super Block styles

This is a Super Block

Super Blocks can contain any kind of content.

They do not have to have images, text, or video — but they can! You can put any kind of content in them that you want.


 

This is a Super Block

placeholder

This is a super block the following Styling applied: "BLOCK TITLE: GT Blue," "ICON: mortar board," and "BLOCK STYLE: Promo block." The layout width has also been set to "half width."

This is a Super Block

placeholder

This is a super block with the following styling applied: "BLOCK TITLE: GT Gold" and "ICON: Institution." The layout width has also been set to "half width."

This is a Super Block with no title, "GT Gold" styling, and an "Overlay" jump link.

placeholder

This is a Super Block with no title, "GT Blue" styling, and an "Overlay" jump link.

placeholder

This is a Super Block with no title, "Standard" styling, and an "Overlay" jump link.

placeholder

This is a Super Block with no title or link, and "Promo Block" styling.

This is a Super Block

placeholder

This is a Super Block with a title and "GT Gold" styling.

This is a Super Block

placeholder

This is a Super Block with a title and "GT Blue" styling.

This is a Super Block

placeholder

This is a Super Block with a title and "Standard" styling.

This is a Super Block

placeholder

This is a super block with the following styling applied: "BLOCK TITLE: GT Gold" and "ICON: Information." 

This is a Super Block

placeholder

This is a super block with the following styling applied: "BLOCK TITLE: GT Gold" and "ICON: Alert." 

This is a Super Block

placeholder

This is a super block with the following styling applied: "BLOCK TITLE: GT Gold" and "ICON: Download."

Add a Block or Super Block to a Page

As you are creating or editing a page, you can add blocks directly to the page.

  • If you are editing a Multipurpose Page, you can place blocks on your page as sidebars ("Asides"), or in rows ("Articles.") 
  • If you are editing a Horizontal Landing Page, you can place blocks in up to four rows: "Block Row 1," "Block Row 2," "Block Row 3," or "Block Row 4."
  • If you are editing a Vertical Landing Page, you can place blocks in "Column 1" or "Column 2."
  • If you are editing a Basic Page, sorry, but you can't add blocks. Try converting your page to different layout.
  1. To add blocks to the page, navigate to any of the fields listed above. 
  2. In the empty field, start typing the block description. A list of possible matches will appear.
    blocks fields
     
  3. Click on the block you want to add. 
  4. Click the "Save" button.
Category: 

Add a Menu Block to a Page

There is a special kind of Block called a "Menu Block." It can be added to any page. 

What is a Menu Block?

A menu block looks like this:

menu block
 

Add a Menu Block to a Page

  1. Follow the same procedure as you would to add a block or super block to a page.
  2. In the empty block field type, "Menu."
  3. Select "Block - Menu - Main Side menu" from the list.
  4. Click the "Save" button.

Configure the Menu Block

  1. Exit out of the "Edit" mode to view your page.
  2. Hover over the top right-hand corner of the menu block until a little cog appears.
  3. Click on the cog, and select "Configure Block" from the dropdown menu.
  4. On the next page, type the title in the "Block Title" field.
  5. From the "Starting Level" dropdown box, choose the menu level of the page on which you placed the block.
    • For example, every page which is listed in your Primary Menu is Level 1.
    • Any sub-pages under those are Level 2.
    • Any sub-pages under those are Level 3, etc.
    • The Menu Block will only show up on your page if you have chosen the correct "Starting Level".
  6. In the "Styling" section, select the style attributes you want to apply to the menu.
  7. Click the "Save Block" button.

Notes

  • Please noteAny configuration changes you make to the Menu Block will be reflected on every page that the block appears.
Category: 

Add a Mercury Events or News Block to a Page

Adding a Mercury Block to a page is different than adding a block directly to a page.

Process

  1. Go to the page you to which you want to add the Mercury Block.
  2. Click the "Edit" tab.
  3. Look at your page URL (web address). It should have "node/[a number]/edit" in it.
    node id number
  4. Copy the "node/[whatever number is there]" part.
  5. In your black admin menu, navigate to "Structure > Blocks."
  6. Scroll down the list until you see "Block - Mercury - Events" or "Block - Mercury - News only." 
  7. Next to the Mercury Block you want to add to your page, click the "Configure" link.
  8. Scroll down to the bottom of the page to the "Show Block on Specific Pages" section. In the field below it, paste "node/[number]"
    node number
     
  9. Click the "Save Block" button.

When you go back to your page, your Mercury Block will be there!

Category: 

Edit a Block (Drupal Express)

  1. Hover over the upper corner on the right-hand side of your block until a little cog appears.
  2. Click the cog, then click "Configure Block."
    configure block
     
  3. Make your edits and then click the "Save Block" button.
Category: 

Edit a Super Block (Drupal Express)

Editing the content of a Super Block is different from editing a regular block.

  1. Hover over the right-hand, top corner of the Block or Super Block.
  2. A little cog will appear. Click on "Edit current."
    resize block
     
  3. Make your changes to the title, text, images, or link.
  4. Click the "Save" button at the bottom of the page.
Category: 

Resize a Block or Super Block (Drupal Express)

After you have added a Block or Super Block to a page, you can resize it.

Note: The default size setting is "None." What this means is that your block will be resize itself however it needs to be sized when placed next to other blocks. When you choose a size from the "Layout" menu, you are forcing the block to remain a specific size, no matter what.

  1. Hover over the right-hand, top corner of the Block or Super Block.
  2. A little cog will appear. Click on "Configure Block."
    resize block
     
  3. Scroll down to "Layout." Choose a width from the dropdown menu. 
  4. Click the "Save Block" button at the bottom of the page.
Category: 

Copy a Super Block (Drupal Express)

You can make an exact copy of a Super Block by cloning it.

  1. Hover over the right-hand, top corner of the Block or Super Block.
  2. A little cog will appear. Click on "Clone."
    resize block
  3. You will now have a duplicate of your original Super Block.
  4. The "Description" field will begin with "Clone of..." You may keep that description or edit it, plus any other content.
  5. Click the "Save" button at the bottom of the page.

Note: The size of the Super Block will default back to "None," so you may have to resize the Super Block clone once you've placed it on a page.

Category: 

Delete a Super Block (Drupal Express)

  1. Hover over the right-hand, top corner of the Block or Super Block.
  2. A little cog will appear. Click on "Delete."
    resize block
     
  3. On the next page, you will be asked, "Are you sure you want to delete...?" Click the "Delete" button. 

Note: This action cannot be undone.

Category: 

Links (Drupal Express)

Add a Link (Drupal Express)

Link to a page within your own website:

  1. Highlight the words you want to turn into a link.
  2. Choose the "LinkIt" button.
    link it button in toolbar
     
  3. In the "Search for Content" field, begin to type in a key word from the title of the page you want to link to.
    link it keyword
     
  4. A list should appear, showing all of your pages with that word in their title. Click on the page you want to make a link to.
  5. In the pop-up box, you will now notice that the "Link URL" is filled in. Click the "Insert Link" button.
    link it url path

Link to another website:

  1. Highlight the words you want to turn into a link.
  2. Choose the "LinkIt" button.
    select the link it button on the tool bar
     
  3. In the "Link URL" field, insert the URL of the page you want to link to. Click the "Insert Link" button.
    link it link url field
     
  4. Click the "Save" button.
Category: 

Edit a Link (Drupal Express)

  1. Highlight the link you want to edit.
  2. Click the "LinkIt" button.
    link it button in toolbar
     
  3. To link to a page on your website:
    • In the "Search for Content" field, begin to type in a key word from the title of the page you want to link to.
      link it keyword
       
    • A list should appear, showing all of your pages with that word in their title. Click on the page you want to link to.
    • Click the "Insert Link" button.
      link it url path
       
  4. To link to another website:
    • In the "Link URL" field, insert the URL of the page you want to link to. Click the "Insert Link" button.
      link it link url field
       
  5. Click the "Save" button.
Category: 

Link to a PDF or Other File (Drupal Express)

  1. Highlight the words you want to turn into a link to your PDF file.
  2. Choose the "LinkIt button." 
  3. Choose “Open file browser” in the pop-up box that appears.

     
  4. Click on the “Documents” folder.

     
  5. In the upper left corner of this pop-up window, click on “Upload” and then click on the “Browse” button.
     
  6. Choose the file you want to add from your computer and then click on the “Upload” button at the bottom.
  7. In the file list on the right, highlight your file by clicking on it, and then choose “Insert File” from the buttons at the top.
     
  8. In the first pop-up box, you will now notice that the "Target Path" is filled in, with your file’s name at the end of it.  Click the “Insert Link” button.

     
  9. The words you highlighted in the beginning will now link to the PDF you uploaded. Hurrah for your successful PDF placement!
Category: 

Remove a Link (Drupal Express)

  1. Highlight the link you want to remove.
  2. Click the "Unlink" button, which is near the image and anchor flag buttons.
    unlink button in toolbar
     
  3. Click the "Save" button.
Category: 

Images (Drupal Express)

Before Uploading Images to Your Website

Working with Images

Insert an Image (Drupal Express)

Resize your image before you upload it so that people on slow data plans don't have to download any larger of an image than necessary. Also, choose a good name for your image (all lower case, use hyphens instead of spaces, avoid punctuation, short but descriptive).

Insert a picture on a page, or in a regular block:

  1. Click the “Edit” tab
  2. Place your cursor in the section of text where you want to insert the picture.
  3. On the toolbar, select the “Image” icon:
    image button
     
  4. On the pop-up window, click the “Browse Server” button.
  5. In the next pop-up window, click, “Upload.”
    upload
     
  6. Click the “Choose File” button. Find the image you want to upload and double click on it.
    choose file
     
  7. Click the “Upload” button.
  8. Your new picture will now show up highlighted in the list of images on the server. Next, double click on this new image file name.
    highighted image name
     
  9. In the next pop-up window, write a description of the picture in the “Alternative Text” field.
    • Using Alt Text is very important for people who are visually impaired, and is required accessibility standards. It also helps search engines "read" what images are on each page.
    • Delete anything in the "Width" and "Height" fields. This allows the images to be responsive (mobile friendly)
      image properties
       
  10. Finally, click “OK.” The image will then be inserted on the page.

Insert a picture in a super block:

  1. Hover over the upper right corner of the block with your cursor until a little cog symbol appears. Click on the cog and select, “Edit.”
    edit cog
     
  2. Under "Primary Image," click “Choose File.” 
  3. Find the image you want to upload and double click on it.
  4. Click the "Upload" button.
    upload picture
     
  5. Next, Write a description of the picture in the “Alternative Text” field.
    alternative text field

Wrap text around the image and position it on the left or the right of the page:

  1. Click on the image to highlight it.
  2. Go to the "Styles" dropdown menu. Here, you have several options to position the image. You can float it left or right at its original size, or choose to reduce it by 70, 50, or 30 percent.
    image styles
Category: 

Replace an Image (Drupal Express)

  1. Click the “Edit” tab
  2. Use your cursor to highlight the picture you want to replace. Select the “Image” icon.
    highlight the image you want to replace
  3. On the pop-up window, click the “Browse Server” button.
  4. In the next pop-up window, click, “Upload.”
    upload
     
  5. Click the “Choose File” button. Find the image you want to upload and double click on it.
    choose file
     
  6. Click the “Upload” button.
  7. Your new picture will now show up highlighted in the list of images on the server. Next, double click on this new image file name.
    highighted image name
     
  8. The “Alternative Text” field will already be populated with whatever text you had for the previous picture. Edit this if necessary.
  9. Delete anything in the "Width" and "Height" fields. This allows the images to be responsive (mobile friendly)
    • image properties
       
  10. Click “OK.” The image will replace the previous image.

 

Category: 

Videos (Drupal Express)

Embedded videos look nice on a Web page.

The simplest way to embed a video is use a YouTube video.

  1. Go to the video on YouTube.
  2. Beneath the video, click the "Share" link.
  3. Copy the URL.
  4. On your page, type: [VIDEO::
    Note: the word VIDEO has to be in capital letters. There must be two colons after the word
  5. Paste the video URL right after [VIDEO::http://youtu.be/Irl_6h_55eo
    Note: No space between the double colons and the URL
  6. Follow the URL with a bracket "]"
  7. Click the "Save" button.

Here's what the above example will look like on your page:

[VIDEO::http://www.youtube.com/watch?v=98nNpzE6gIs]

 

OR [ VIDEO::http://www.youtube.com/embed/98nNpzE6gIs?rel=0"&autohide=1 ]

 

Carousels and Slides

Please Note: The instructions below are for the GT Carousel module, which is no longer centrally-supported or -maintained. These instructions are provided to help users who still have this module on an older website. For further discussion, please see the community discussion on Drupal carousels.

Create and Edit Slides & Carousels

Should I Use a Carousel?

If you can convince your stakeholder(s) to forgo a carousel, that is always the best option, as a static hero image is much easier to implement on the front page of a Drupal site and can be just as effective (if not more). If freshness of the front page is a concern, the hero image can always be swapped out manually on a regular basis.

Should I Use a Carousel?

If you need good reasoning for yourself or your stakeholder(s), "Should I Use a Carousel?" is a really helpful site for explaining both the marketing and technical downsides to carousels.

The reality is that most of the common carousel systems for Drupal have some accessibility issues, which is something that has legal ramifications on-campus and for higher education.

Creating a Carousel

If you are more technically-minded and do not mind writing your own code for Drupal, there are some useful Web Accessibility Initiative Guidelines for Accessible Carousels that will give you much of the framework needed to create an accessible carousel system from scratch.

Carousel Development

There are efforts underway to hopefully provide a Paragraphs based accessible carousel system for campus.

A product is being tested by the Ivan Allen College of Liberal Arts on many of its websites, but is not available for general campus use yet.

Category: 

Create a GT Carousel Slide

Please Note: The instructions below are for the GT Carousel module, which is no longer centrally-supported or -maintained. These instructions are provided to help users who still have this module on an older website. For further discussion, please see the community discussion on Drupal carousels.

Process

  1. Navigate to "Content" > "Add Content" > "Carousel Slide."
  2. In the "Description" field, add a short description that will help you identify the slide when you need to find it in a list of other carousel slides.
  3. Typically, carousel slides link to a Web page. Enter the link label in the "Title" field. Enter the URL in the "URL" field. This step is optional.
  4. In the "Slide Title" field, enter a title for your slide.
  5. In the "Summary Sentence" field, enter a short blurb (think of it as a subheading).
  6. The "Slide Title," "Summary Sentence" and "Link Title" will be displayed together in a white box. From the "Title Placement" dropdown menu, choose whether you want this white box to show up on the left or right side of your carousel slide.
  7. The "Background Image" field is where you will upload your picture for the carousel slide. This step is optional.
    • Optimum image dimensions are ~2000px wide by ~750px tall.
    • Make sure it's optimized to be the smallest file size.
    • Allowed file types: png, gif, jpg, and jpe​.
  8. Select a "Background Color" from the dropdown menu. This color will only show up if you did not upload a background image.
    This is what a slide looks like with a grey background and no background image:slide without a title graphic
  9. Click the "Save" button at the bottom of the page.
Category: 

Add, Rearrange, or Remove Slides in the GT Carousel

Please Note: The instructions below are for the GT Carousel module, which is no longer centrally-supported or -maintained. These instructions are provided to help users who still have this module on an older website. For further discussion, please see the community discussion on Drupal carousels.

Add a Slide

  1. In the black "Admin Menu" bar, click on "Content."
  2. In the "Type" dropdown menu, select “Carousel” and click "Apply."
  3. Find the Carousel you want to add slides to and click its "Edit" link.
  4. In the "Slides" box, type the description of your Carousel Slide in the field.
  5. A list of possible matches will appear. Click on your selected Slide.
    Adding a slide to a carousel
  6. If you need to add more slide fields, click “Add Another Item," and then follow steps 4-5 above.
  7. Click the "Save" button.

Rearrange Slides

  1. In the list of slides, click on the "+" symbol and drag each slide where you want it.
  2. Click the "Save" button.

Remove a Slide

  1. In the list of slides, highlight the slide you want to remove, and press "Delete" on your keyboard. (Don't worry- you are not deleting the actual slide. You are only removing it from the Carousel.)
  2. Click the "Save" button.
Category: 

Turn Off the Carousel

Using a Carousel on your website is optional. The images needed to make Slides are BIG. So if you don't have regular access to large, high-resolution images, you can turn off the Carousel.

  1. Navigate to the carousel.
  2. Hover over the top right-hand corner until a little cog appears.
    edit carousel
     
  3. Click on the cog and select, "Configure Block."
  4. Scroll to the bottom of the page to the, "Show Blocks on Specific Pages" section.
  5. Delete the word "<front>" from the box below the sentence "Only on the Listed Page."
    delete the word "front"
     
  6. Click the "Save Block" button.
Category: 

Locate Content You've Created (GT Drupal Express)

  1. In the black Administrator Menu, click on "Content."content menu
     
  2. You will see a list of content that exists on your website. This list will tell you the page title, the type of content, who created or updated it and when, and whether or not it is published.content list
     
  3. You can search this content by title, type, author, or publish status
    content search bar
     
  4. When you find the page you are looking for, click on it to view, or click on “Edit” in the "Operations" column.
Category: 

Launch Your Site

Launching your website is the final step in development: it completes the development and testing phases and initiates the public release. 

Content

Drupal Express Pre-Launch Checklist

Administrator and Editor Roles

_____ Decide who will be the site's owner (this must be a faculty or staff member.)

_____ Decide who will be the site's technical lead (administrator), and who will be in charge of updating the site's content on an on-going basis (editor).

_____ Determine whether a workflow (approval process) is needed for content production if there are multiple site editors.

_____ The technical lead(s) should add and manage users, and give them appropriate permissions to contribute, edit, or publish content.
 

Site Security

_____ Review Georgia Tech's Web Security Standards and policies.

_____ Determine who will update your website modules and apply security updates on a continual basis. Keeping your Georgia Tech modules and website up to date and secure from hackers is a crucial part of your website. OIT does not offer site maintenance or security patching services, so you will need to handle this yourself, or with an in-house or approved freelance web developer.

_____ Decide who will get security update emails (We recommend using a group email account, in addition to the technical lead's email address.)

_____ Decide on the "FROM" address when the site sends notification emails such as password resets (We recommend using a group email account instead of individual address.)
 

​Theme Configuration

_____ Insert your department name in the site header, and make sure your footer contains your division's address.

_____ Upload your logo (if using) into the site header. If you need a custom logo, request one from Institute Communications.
 

Training and Support

_____ Familiarize yourself with the available Drupal Express training, support, and resources.

_____ Read the Drupal Express Editor Handbook to get an understanding of basic concepts and editing functions.

_____ Read and understand Georgia Tech's Accessibility Requirements.

_____ Sign up for Georgia Tech's Drupal listserv and learn how to use the community to get help and post questions.

_____ Schedule a Visual Identity Standards training for all editors through your Institute Communications client manager.

Functionality

_____ Scan your website for broken links.

_____ Compare your old site to your new site. Did you cut any pages or change any web addresses (URLs)? If so, you'll need to set up redirects from the old URLs to your new site so that site visitors don't get error messages.

_____ Check that all files such as .pdfs have human-readable file names.

_____ Test that any embedded videos play correctly.

_____ Test all Web forms and ensure they work correctly.

_____ View the website on all the most common browsers (IE Firefox, Chrome, Safari). 
 

Content and Navigation 

Navigation and Site Structure

_____ Make sure your site structure is simple and makes sense.

_____ Check that all Web page have been added to a menu.

_____ Check that every Web page URL (web address) is user-friendly and follows your site structure. 

Pages

_____ Make sure the title of each Web page is brief and clear.

_____ Unpublish any test pages or unnecessary pages.

_____ Be sure that all landing pages contain content.

_____ Check all pages for consistent layout.

Content quality

_____ Review your text content to see if it follows the Writing for the Web Guide and is easy for web visitors to skim.

_____ Ensure that all content is up-to-date and accurate.

_____ Check that any subheadings used within a page are styled as a "Heading" or "Subheading."

_____ Scan your website for accessibility compliance

Proofreading

_____ Review content and fix any spelling and grammatical errors.

_____ Ensure your writing style is consistent across the site and follows the Institute Editorial Style Guide.

_____ Check that capitalization (especially for pages, headings, and menus) is consistent across the site.

Images

_____ Review the guidelines for Selecting and Formatting Images for the Web.

_____ Check that all images have alt-text.

_____ If using the GT Carousel, make sure any people that appear on a carousel slide are not covered by the text box.

Category: 

Push Your Site Live

The following instructions are for pushing your Drupal Express site live on OIT's webhosting. 

Please note: When migrating an existing website over to Drupal Express, the steps below will only apply if both the old and new websites are on the same server. 

Migration Instructions

  1. Go to OIT's Web hosting homepage.
  2. Click on the "Hosting Manager Login" link located in the left-side column of the page. You will be taken to the GT Login Service to provide your Georgia Tech username and password.
    screen capture of the hosting login link
     
  3. Once you have logged into the Web hosting homepage, you'll see a list of your websites in the left-side column.
    • If you are launching a brand new website, click on the link for your site. Note that it will have an "s1" in its name (e.g., s1.mysite.gatech.edu.) Proceed to Step 4.
    • If you are launching a redesigned website, which will replace an existing one, proceed to Step 5.
       
  4. To launch a brand new website:
    • ​​After clicking on the link for your new website, you'll be taken to the Web hosting control panel for that site. Under the Websites & Domains tab, click on the "Add New Domain Alias" button.
      screen grab of web hosting control panel
    • Under the "Domain alias name" field, enter the "real" name of your domain (e.g., mysite.gatech.edu).
      IMPORTANT: Be sure to UNCHECK the "Redirect with the HTTP 301 code" checkbox.
      screen grab of the web hosting control panel showing 301 redirect settings
       
  5. To launch a redesigned website, which will replace an existing one:
    • ​​First, go to the control panel for the existing website by clicking on the link for the website in the left-side column of OIT's Web hosting homepage. Note that it will have an "s1" in its name (e.g., s1.mysite.gatech.edu). Your redesigned site will have an "s2" in its name.
    • After clicking on the link for your existing website, you'll be taken to the Web hosting control panel for that site. Look for the listing for the "real" name of your website (e.g., mysite.gatech.edu).
    • Click on the "Disable" link for the listing.
      screen shot of web hosting control panel
    • Next, go back to OIT's Web hosting homepage, and click on the link for your redesigned website. This site will have an "s2" in its name (e.g., s2.mysite.gatech.edu.)
    • Follow Step 4 to add your "real" website name as a domain alias in the control panel for your redesigned website.
Category: 

Websites Built with Drupal Express

This page lists profiled websites built with Drupal Express.

Category: