Resources for Drupal Site Editors and Content Managers

Resources for Drupal Site Editors and Content Managers

Step-by-step tutorials explain how YOU can can quickly update pages on any Georgia Tech Drupal 7 Website without knowing any HTML.  (Drupal 8 guides for content managers will be coming in the not too distant future.)

Learn to embed videos, share your news and events with the rest of campus, and more on your Georgia Tech Drupal-powered website!

For Drupal Express sites, please see the Drupal Express Handbook.


Site Editor and Content Manager Topics

root Mon, 03/11/2013 - 12:11

Logging Into Your Site

Logging Into Your Site
Category
jtomasino3 Mon, 03/09/2015 - 16:33
Drupal Version

Get Permission to Edit

To add or edit content on a Drupal site, the site's administrator has to give you special permissions, so send an email asking for this permission first.  The administrator may want to offer you some training first, or they might refer you to our community training pages.

Off-campus Changes Require VPN

If you are OFF CAMPUS, you will need to connect to the VPN before you can make changes if your website is hosted on OIT Web Hosting.  Because of the security system that OIT uses, you may be able to log in to your site without going through the VPN, but you often cannot save any changes you try to make.

Using Your GT Account Username to Log In

Many campus Drupal sites (and all Drupal Express sites) are configured so that authorized editors can log in with their usual GT account username (e.g. gburdell3).  Sites configured this way will either log you in automatically (if you are already logged into your GT account username in your current browser session), or send you to the central campus login page.  If you are shown a login prompt that isn't the standard central campus login page, contact your website's administrator to find out how to access your unit's website.

Web Addresses for Logging In

If you need to log in to your site after its initial installation, go to either:

  • http://yoursite.gatech.edu/user
  • http://yoursite.gatech.edu/?q=user

Of course, be sure to replace 'yoursite.gatech.edu' with the actual hostname for your website.

Alternatively, if your site is a Drupal Express site, you can look for a Login link in the gold Georgia Tech footer bar at the bottom of any page.

Creating and Managing Pages

Creating and Managing Pages
Category
afrank30 Wed, 09/03/2014 - 14:59
Drupal Version

This section contains guides to creating and managing content pages in Drupal.  Please see the Editing Page Content section for details on how to create and edit page content using CKEditor, the popular What You See Is What You Get (WYSIWYG) text editor, which on some sites is packaged as the GT Editor.  Additional content editing topics can be found in our All About Blocks section and our Photos and Videos section.

Whenever you create content, please be sure to follow proper accessibility practices.  The Ivan Allen College of Liberal Arts has posted a helpful Accessibility Online Course and a Web Accessibility Primer for quick reference.


Drupal Page Creation and Management Sub-Topics

Page Layouts and Content Types

Page Layouts and Content Types
Category
root Mon, 03/11/2013 - 13:07
Drupal Version

Basic Content Types (Built Into Drupal)

Basic Page

A web page has unique content that should usually have a link from the main menu (the top, gold menu in the new design). A page may contain documents, images, or just regular text. Use basic pages for your static content, such as an 'About us' page.

Block

A block usually looks like a box, contains text or images, and can be shown on one or many pages. You often see a block floating on either the right or left side of a page. The GT Theme offers a number of preset block layouts and block styles.

Georgia Tech Custom Page Layouts

If your site is using the GT Theme, and has had the custom GT Content Types page layouts module installed, you will also have three additional ways to organize content on your pages.  Every field (such as a row of blocks) that comes with each of these layouts is optional, so you can pick and choose just what you need for a particular page.

Horizontal landing page

This layout is most often used for homepages.

It allows up to four horizontal rows of blocks to be added below the main body text.

Vertical landing page

This layout is often used to show related content to whatever is at the top of the page.

It creates two vertical columns for blocks that can be added below the main body text.

Multipurpose page

Your Swiss army knife of page layouts, this layout works well for breaking up content-heavy pages into separate sections.

It provides three separate fields for body text, each with:

  • a horizontal block row beneath it, and
  • a sidebar beside it.

Switching Layouts

If you need to change from one layout to another, it is best to engage your website developer / administrator, as this process requires special privileges on many Drupal sites, and even on sites where a content editor can switch layout types, there is a risk of losing your content if you don't do the conversion properly.

Drafts, Publishing, and Revisions

Drafts, Publishing, and Revisions
Category
esembrat3 Mon, 12/17/2012 - 13:00
Drupal Version

About Drafts and Revisions

If your site has Revisioning installed and turned on (a standard feature for Drupal Express sites), then the following concepts will apply:

  • After you have created or edited a page or block, it is saved as a draft.
  • Every time you make a change to a page or block and save it, you create a new revision.
  • In order to see your new content on your website, you must publish it.

The great thing about revisions is that you can compare versions and even revert back to an earlier version.

Viewing, Editing, Comparing, and Deleting Revisions

  1. Navigate to the page you want to publish. Select the "Revisions" tab at the top of the page.
  2. The last version of your page will be the first one on the list. If you have not yet published it, it will be highlighted in pink with the words, "In Draft/Pending Publication" in the "Status" column next to it.
  3. Select the date link to view your draft. Now you can edit the latest version, compare it to the version that is currently published, delete it, or publish it.

Publishing Drafts

  1. Navigate to your draft by following the steps above, OR, if you have just saved your page, the "Publish" button should appear at the top of the page.
  2. Select the "Publish" button.
  3. Select the "Publish" button to confirm that, yes, you really do want to make this revision go live.

Unpublishing Revisions

  1. Select on the "Revisions" tab at the top of the page.
  2. Select 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.
  3. Above the Revision table, select the "Unpublish Current Revision" link
  4. On the next page, select the "Unpublish" button to confirm that you do indeed want to unpublish this page.
  5. Select the save button.

Adding a Page

Adding a Page
Category
jtomasino3 Wed, 03/25/2015 - 22:16
Drupal Version

Process for Adding a Page

  1. After logging in to your website, you will see a black menu bar across the top (if you do not see a black menu bar, contact your site administrator for assistance).
     
  2. Select the Content menu, then Add contentYou will see a list of different types of content that you can add. If your site is using the custom GT Content Types,  and you are adding a top-level (AKA landing) page, we recommend that you choose Multipurpose page, as this will give you the most options for formatting and layout.  If your site is not using GT Content Types, or if you are creating an inside page that doesn't need a lot of special formatting, you should choose Basic page.
     
  3. Type your page title into the Title field.
     
  4. Scroll to the very bottom of the page and select URL Path Settings. If your site has the option, you can either check the "Automatic Alias" box, or type in your own. To create your own, you should use the page title, or some variation of it. This will be used in the page’s URL. Always use lowercase letters and dashes between words. Do not end your alias with a “/”
     
  5. To add breadcrumb links and/or to have the page show up in your website menu, go to Menu Settings. Check the "Provide a Menu Link" box. The Menu Link Title field will automatically populate with your page title. You can change it if you'd like. Next, decide what menu you want this page added to, by selecting it from the "Parent Item" drop-down list. If you want this page to be a main menu item in the gold bar, select, "Main Menu."
     
  6. Select 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 how to add content to a Multipurpose page in this tutorial [add link].

Creating and Editing Page Content

Creating and Editing Page Content
Category
root Fri, 07/14/2017 - 17:38
Drupal Version

This section contains guides for creating and editing page content using CKEditor, the popular What You See Is What You Get (WYSIWYG) text editor, which on some sites is packaged as the GT Editor.  Additional related guides can be found in the Creating and Managing Pages section, and additional content editing topics can be found in our All About Blocks section and our Photos and Videos section.

Whenever you create content, please be sure to follow proper accessibility practices.  The Ivan Allen College of Liberal Arts has posted a helpful Accessibility Online Course and a Web Accessibility Primer for quick reference.


Content Editing Sub-Topics

CK Editor / GT Editor Toolbar Control Buttons

CK Editor / GT Editor Toolbar Control Buttons
Category
root Thu, 07/13/2017 - 12:12
Drupal Version

Many campus Drupal websites have either the What You See is What You Get (WYSIWYG) text editor called CKEditor, or the custom built specialized version of CKEditor known as "GT Editor".

The table below describes many of the control buttons you will find on the CKEditor or GT Editor toolbar.  If your control buttons don't look like these, you should ask your site administrator or local web developer to look into upgrading your site to the latest version of CKEditor.

Note: The control name can be seen by hovering over the control, and is what should be heard when working with accessibility technology.

Note: It is possible that your site administrator may have removed or rearranged control buttons or added ones not described below.  In addition, Drupal 8 sites will not have all of the buttons below by default, as Drupal 8 comes with a minimal functionality version of CKEditor.

Control Button Image Control Button Name Additional Notes
Maximize Maximizes the editor in the browser window so you can see more of your content while editing.
Styles Formatting Styles Lets you apply pre-defined combinations of various formatting styles to text.
B Bold  
I Italic  
X2 Superscript  
X2 Subscript  
Insert Special Character  
Insert Teaser Break Creates an invisible break to tell Drupal that everything above the break (and nothing below it) should be shown when this page is shown in a search listing or Views listing.
Insert Horizontal Line  
Insert/Remove Bulleted List  
Insert/Remove Numbered List  
Decrease Indent In a numbered or bulleted list, moves the current item up a level (further to the left)
Increase Indent In a numbered or bulleted list, moves the current item down a sub-level (further to the right)
Table Lets you create and configure a table
Image Lets you insert an image into your content
Link (to content) Link to other pages, uploaded files, other websites, etc.
Unlink Removes a link from text, returning the text to normal text.
Anchor Create a link anchor in your text, which can be used to send users directly to that part of the page.
Paste from Word Tries to preserve formatting and strip unnecessary markup when pasting in content from Microsoft Word
Source Source View and/or edit the HTML source code for your content.

 

GT Theme Content Styles List

GT Theme Content Styles List
Category
afrank30 Thu, 12/19/2013 - 13:40
Drupal Version

If your site is using the official GT Theme and the GT Editor module, then you should have a Styles drop-down option in the toolbar of your WYSIWYG (GUI) text editor (AKA CKEditor) with the following formatting styles.  If you are not using both the official theme and the GT Editor module, then you will not see any of these styles (and may not even see the Styles drop-down option).

"Block" styles

"Block" styles describes HTML elements or containers which do NOT sit next to each other on a line, but "own" the entire page's width for the lines they fill.

Basic HTML Styles

These first options are mainly headings, so you can add visual (and invisible) outlines to your pages and make it easier for people to scan them quickly.

  • Heading <h3>
    • Subheading 1 <h4>
    • Subheading 2 <h5>
    • Subheading 3 <h6>
  • Preserve format <pre>

Image and Media Styles

Mostly, these options style images within your pages. They work best when you place your image on its own line, and not inside a paragraph.

  • Float Left: moves your image to align with the LEFT side of the page and makes other text wrap around your image on the same lines it occupies.
    • Float Left - Simple
    • Float Left 70%
    • Float Left 50%
    • Float Left 30%
  • Float Right: moves your image to align with the RIGHT side of the page and makes other text wrap around your image on the same lines it occupies.
    • Float Right - Simple
    • Float Right 70%
    • Float Right 50%
    • Float Right 30%
  • Clear Floats: forces text to NOT wrap around your image, so that the image has lots of white space on either side of it.
    • Clear Float Left
    • Clear Float Right
  • Embedded Media Wrapper: not currently used, but may one day make videos more responsive on various sizes of device.

For Themers: these apply a <div> with a special class around the selected image or media. That <div> may replace the <p> element if your image is within a paragraph, leading to incorrect styling. This is intentional, as every Float style (except for those ending in "Simple") is designed to provide special styling to any text that accompanies your Floated image.

Paragraphs, Buttons and Links

Add visual enhancements to paragraphs or turn small phrases or a short sentence into a special button or link.

  • Intro Text: makes a paragraph's font size and line spacing larger (designed to be used only for the FIRST paragraph on a page).
  • Yellow Highlight Button
  • Blue Highlight Button
  • Jump Link

For Themers: these apply a <p> with a special class around the selected text.

"Inline" styles

"Inline" styles describes containers which are designed to sit next to each other on the same line and usually occur within a paragraph.

Basic HTML Styles

  • Computer Code <code>
  • Cited Work <cite>
  • Inline Quotation <q>
  • Block Quotation <blockquote>

Pull Quotes

  • Pull-quote - Left: styles a sentence as a large quote on the LEFT side of the page.
  • Pull-quote - Right: similar to above, but on the RIGHT side of the page.

For Themers: these apply a <blockquote> with a special class around the selected text.

File Types

Add icons to your selected text, which show pictures of the related file type.

  • PDF Icon
  • MS Word Icon
  • MS Excel Icon
  • MS PowerPoint Icon
  • Generic File Icon

For Themers: these apply a <span> with a special class around the selected text.

Adding Images to a Page in GT Editor (IMCE)

Adding Images to a Page in GT Editor (IMCE)
Category
root Thu, 07/13/2017 - 13:35
Drupal Version

The following instructions are for adding an image or picture to a page when your site is using GT Editor or otherwise has the IMCE module installed.

Important!  Be sure to properly resize your image file before you upload it to your site.

  1. Place your text editing cursor where you want to be located within your content
    • If you want the image on it's own line, create that blank line and place the cursor on it
    • If you want the image to float left or right of existing text, place your cursor at the beginning of that line of text
  2. Select the Image button in the editor toolbar (it looks like a painting of an outdoor landscape with a mountain and a little sun in the upper-right corner).
  3. In the pop-up control panel, select the Browse Server button to the left of the URL field.
    • If you do not see a Browse Server button, then your site is not configured with the IMCE module, and the following instructions do not apply to your website.
  4. In the next pop-up control panel that appears, navigate to the folder where you want to save your uploaded image or a folder that already contains a file that you wish to use for your link.  To upload a new file to your chosen folder:
    1. Select the Upload toolbar button, and then use the resulting controls to find and select the correct file on your local computer.
    2. Once you have selected a file, select the Upload button that appears below the Create thumbnails option (not the Upload button above in the toolbar).
    3. Your newly uploaded file should appear in the folder file list.
  5. Select your chosen or uploaded file to highlight it, then select the Insert File button from the toolbar.
  6. You will now be returned to the first pop-up control panel, and you should see a filesystem path in the URL field.
  7. If your image is conveying something important to your website users (i.e. the image is not purely decorative, meaning you could remove it and users would still get the same message from the page), then you need to enter a short description of the message conveyed by the image in the Alternative Text field.
  8. If you want your image to float left or right of your existing text, then select the appropriate option for the Alignment field.  You may also need to add a little horizontal or vertical spacing by entering a small numeric value (usually 10 works) for the HSpace and / or VSpace fields.
  9. When you are finished, select the OK button to place your image into the page.

Adding Tables to a Page with GT Editor / CKEditor

Adding Tables to a Page with GT Editor / CKEditor
Category
root Thu, 07/13/2017 - 17:07
Drupal Version

When (and When Not) to Use a Table

Tables should only be used for the display of tabular data (data that is connected to one or more headings).

Do not use tables for any of the following reasons:

  • Displaying a list of items (use an unordered or ordered list instead)
  • Creating a multi-column page layout (use proper page layout tools instead)

If you are not sure about how to present a certain type of information, please check with your communications manager, your website developer, or even the Georgia Tech Drupal Mailing List for assistance.

How to Place and Configure a Table Using GT Editor or CKEditor

  1. Place your cursor where you want the table to appear.
    • If you want the table on it's own line, create that blank line and place the cursor on it
    • If you want the table to float left or right of existing text, place your cursor at the beginning of that line of text
  2. Select the Table button in the toolbar: 
  3. In the pop-up control panel, fill in the fields as appropriate:
    • For Rows and Columns.  (You can adjust this again later if needed.)
    • Leave the Width field blank to allow for automatic sizing of the table, or enter 95% to force a full-width table with a little bit of right-hand spacing
    • Set Headers to something other than None.  All tables must have at least one row or column of headers (if not both) to be compliant with accessibility laws.
    • To float the table to the Left or Right of existing content, select the appropriate option under Alignment
    • Under Summary, enter a short summary of what the table represents and what message you expect your website visitors to get from the data in the table.  This is very important for people with vision disabilities who cannot directly view the table and thus cannot see the visual arrangement of the data.
    • Use the Caption field to give the table a visible title.  If the caption can properly summarize the intent of the table and its data, then you could use it alone and leave Summary blank, but at least one or the other should be used (and you can use both, if that works best for your needs).
  4. Select the OK button and you should see your empty table generated within the content of your page.
  5. Now, you can add content to each cell of the table by clicking on or tabbing to a cell.

How to Modify an Existing Table

You can modify the configuration of an existing table by right-clicking on the table and using the pop-up contextual menu.  Through this menu,  you can add columns, add rows, manipulate individual cells, and adjust the display and formatting settings for the table.

Available table contextual menu options:

  • Paste
  • Cell ->
  • Row ->
  • Column ->
  • Delete Table
  • Table Properties

Creating Links in CKEditor

Creating Links in CKEditor
Category
root Thu, 07/13/2017 - 17:33
Drupal Version
Tags

This page covers the creation of different types of links using the standard CKEditor link tool.  If your website is using the GT Editor or otherwise has the Linkit module installed, then you will have some additional options as described on the Creating Links in GT Editor (Linkit).

Accessibility and Usability of Links

To comply with accessibility law, and good sense usability guidelines, always make the visible text of your link something that clearly indicates what the website visitor is going to be taken to when following that link.  Some examples of improper link text include:

  • Click Here
  • Here
  • Read More
  • More
  • Follow This Link

Wording like these give the user no indication of what you are linking them to, and this is really bad for users with vision disabilities who utilize screen readers.  As a matter of speed and efficiency, these users often have the list of links on a page read aloud without their supporting context.  Hearing "Click Here" ten times makes it impossible for these users to know which link is which, and thus they will be unable to navigate through the links on your page.

While you can make an image into a link, it is best to only make text into links, or to link both an image and an equivalent piece of text together as a link so that you always have some plain text describing the destination of your link.  If you really only want to make an image into a link, then you must set the Alternative Text field of the image to a description of where the link is going to take the user.

Drupal 7

CKEditor in Drupal 7 has a variety of options available.  It is best to only use the ones described below:

Adding a Link

  1. Highlight the text that you want to turn into a link.
  2. Select the Link control button on the toolbar:
  3. Select the type of link you want to add in the Link Type drop-down:
    • URL: Links to another page in the current site, or an external site:
      • Enter the URL into the URL field.  The Protocol field will automatically adjust itself.
      • Enter links to pages on the current website as relative URLs, which do not include the server name:  /undergraduate/minors
      • Enter links to pages on the a different website as fully qualified URLs, which include the server name:  http://mysite.gatech.edu/undergraduate/minors
    • Link to anchor in the text: If you have already placed anchors in the current page, this will let you select one of them and create a jump-link to that anchor point
    • E-mail: This will let you easily create a link that invokes the user's default email program to send an email to a designated email address:
      • Fill in the E-Mail Address, Message Subject, and Message Body fields as desired.  Only the E-Mail Address is required, and bear in mind that the user can easily change the subject and body text in his/her email client - what you provide here is just a suggestion to the user.
  4. Select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

  1. Put your text cursor somewhere within the linked text.
  2. Select the Unlink control button:
  3. The link will now be gone, though the text will remain.

Drupal 8

If you are working with a Dupal 8 site, you will find that it's version of CKEditor has taken a minimalist approach, so the instructions are really simple:

Adding a Link

  1. Highlight the text that you want to turn into a link.
  2. Select the Link control button on the toolbar:
  3. Enter the URL of your link into the URL field of the pop-up contol panel and select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

  1. Put your text cursor somewhere within the linked text.
  2. Select the Unlink control button:
  3. The link will now be gone, though the text will remain.

Creating Links in GT Editor (Linkit)

Creating Links in GT Editor (Linkit)
Category
root Thu, 07/13/2017 - 18:01
Drupal Version
Tags

If your Georgia Tech Drupal website has the GT Editor feature package installed, then it also has the Linkit module, which gives you an enhanced interface for creating links to local content.

Accessibility and Usability of Links

To comply with accessibility law, and good sense usability guidelines, always make the visible text of your link something that clearly indicates what the website visitor is going to be taken to when following that link.  Some examples of improper link text include:

  • Click Here
  • Here
  • Read More
  • More
  • Follow This Link

Wording like these give the user no indication of what you are linking them to, and this is really bad for users with vision disabilities who utilize screen readers.  As a matter of speed and efficiency, these users often have the list of links on a page read aloud without their supporting context.  Hearing "Click Here" ten times makes it impossible for these users to know which link is which, and thus they will be unable to navigate through the links on your page.

While you can make an image into a link, it is best to only make text into links, or to link both an image and an equivalent piece of text together as a link so that you always have some plain text describing the destination of your link.  If you really only want to make an image into a link, then you must set the Alternative Text field of the image to a description of where the link is going to take the user.

Creating Links to Pages Within Your Site

  1. Highlight the text that you want to turn into a link.
  2. Select the Link control button on the toolbar: Image removed.
  3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
  4. In the Search for content field, begin typing any word(s) from the title of the page you would like to link to.  As you type, a drop-down box should open up and show you any pages whose titles have the word(s) you have entered.  Simply select the page you want from the list.
  5. As a confirmation, you should see a URL path appear in the Link URL field after you have selected a page.
  6. Select the Insert Link button to create your link.

Creating Links to Pages on Other Sites

  1. Highlight the text that you want to turn into a link.
  2. Select the Link control button on the toolbar: Image removed.
  3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
  4. In the Link URL field, type in the fully qualified (starts with "http://" or "https://") URL for the page to which you want to link.
  5. Select the Insert Link button to create your link.

Creating Links to Uploaded Files

Note: A "file" can be anything that can be reasonably opened in a web browser or which your site users would want to download to their own computer: a Word Document, a PDF file, an image file, etc.  For the greatest level of usability, consider turning any kind of office related document into a PDF, as PDFs can be opened on virtually any computer or mobile device without needing any additional software.

Note: These instructions require that your site be running the GT Editor feature package or otherwise have both the Linkit and IMCE modules installed.

  1. Highlight the text that you want to turn into a link.
  2. Select the Link control button on the toolbar: Image removed.
  3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
  4. Select the Open file browser button below the Search for content field.
    • If you do not have an Open file browser button, then your Drupal site does not have the IMCE module installed.  Stop and contact your site administrator or developer for further assistance.
  5. In the next pop-up control panel that appears, navigate to the folder where you want to save your uploaded file, or a folder that already contains a file that you wish to use for your link.  To upload a new file to your chosen folder:
    1. select the Upload toolbar button, and then use the resulting controls to find and select the correct file on your local computer.
    2. Once you have selected a file, select the Upload button that appears below the Create thumbnails option (not the Upload button above in the toolbar). 
    3. Your newly uploaded file should now appear in the folder.
  6. Select your chosen or uploaded file to highlight it, then select the Insert File button from the toolbar.
  7. You will now be returned to the first pop-up control panel, and you should see a filesystem path in the Link URL field.
  8. Select the Insert Link button to create your link.

Photos and Videos

Photos and Videos
Category
esembrat3 Mon, 02/18/2013 - 10:34
Drupal Version

The sub topics below provide information on how to make use of images/photos and videos on your Drupal websites. 

Of course, the first step to adding photos or videos is obtaining good quality content. While just about anyone can take high resolution pictures quickly and easily these days with a cell phone, you may wish to look through the Georgia Tech Digital Image Portal, which contains professional quality photographs for which Georgia Tech owns the copyright. 

Good video content takes a bit more time to produce, but Institute Communications has provided some guides to producing and distributing videos at Georgia Tech.


Photo and Video Sub-Topics

Resizing Images

Resizing Images
Category
root Thu, 06/29/2017 - 18:29
Drupal Version

It is important to resize images to best fit the needs of a particular web page.  When an image is larger than necessary, this results in users wasting time and bandwidth (which they may have to pay for on mobile devices) to download image content that they will never actually see.

These days, photographs straight from a digital camera may be over 4000 pixels wide, which is much too wide for a web page.  Even if you are creating a photo gallery, most desktop monitors can only display around 2000 pixels in width.  So, you need to reduce the size of these images before uploading them to your website.

Image Resizing Guidelines

  • If you try to make a small image larger, it will simply become fuzzy (AKA pixelated), and the larger you make it, the fuzzier it will become.  However, you can easily make a large image smaller when needed.

  • For basic website pages, 400 pixels wide images are a good best-practice. For mobile compatibility, choose a width for your image that is less than 400 pixels.

  • If uploading large images for the press to use, your resolution should not be higher than 300ppi (pixels per inch) and the image should not be more than 3,000 pixels on it's longest side. If these images are not for the press, but are used as full-page-width decorations, you should make them even smaller.

  • If you are uploading an image for a headline / hero image (an image at the top of a main landing page that fills the page left to right), resize your image to no more than 1440 pixels wide.

  • When making an image smaller, don't sacrifice the quality of the image.  Instead, simply change the pixel length/width of the image.

  • Also, be sure to check "Scale proportionally" or "Maintain aspect ratio", so that your picture does not get skewed to where people have extra-wide heads that look strange.

How to Resize Images

Of course, you can use any graphic image editing program that you are comfortable with, such as Adobe PhotoShop, GIMP, etc.  If you are not sure how to resize images in one of these editors, just do a search in your favorite search engine on the editor's name and the phrase "resize image".

Adding Video to a Drupal Page

Adding Video to a Drupal Page
Category
root Thu, 06/29/2017 - 18:43
Drupal Version

The following instructions assume that you have the Video Embed Field module installed on your Drupal 7 site.  This is included on any Drupal Express site, but may not be installed on other Drupal sites found on campus.

Note: For best results, try not to put more than three videos on one page.

Embed a Video from YouTube

  1. Go to the video on YouTube.
  2. Beneath the video, select the "Share" link.
  3. Copy the URL.
  4. On your Drupal site page, type in the following shortcode, replacing your-url-here with the URL you copied from YouTube:

[VIDEO::your-url-here]

Example:

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

Don't forget to save your changes!

All About Blocks

All About Blocks
Category
afrank30 Wed, 09/03/2014 - 15:02
Drupal Version
Tags

The following pages explain how to create and work with different types of Drupal blocks.


Block Sub-Topcs

Block Layouts and Widths

Block Layouts and Widths eh94 Mon, 11/04/2013 - 15:07
Drupal Version
Tags

If you have access to manage blocks on your Drupal site, the following tips and tricks may help you achieve better positioning of your blocks.

Automatic Re-Sizing and Regions

Blocks that are placed within the main content regions of a horizontal, vertical or multipurpose page (only available if you have installed the custom Georgia Tech Content Types package) will automatically resize, based on number of blocks in that region. Regions whose blocks behave this way include:

  • Area ABOVE Main Content (IGNORES sidebar regions)
  • Area ABOVE Main Content (RESPECTS sidebar regions)
  • Main Content
  • Area BELOW Main Content (RESPECTS sidebar regions)
  • Area BELOW Main Content (IGNORES sidebar regions)

Choose your Width

There are also block layout options that you can use to change a block's default width. You'll find these in the Layout drop-down list when you are creating or updating a Block:

  • Full width
  • Three quarter width
  • Two thirds width
  • Half width
  • One third width
  • One quarter width

For instance, you could have four blocks that sit side-by-side, but then apply the "Full width" layout option to the fifth block so that it extends the full width of the region, rather than sitting there like a misplaced element.

Remember: these widths apply to a block WHEREVER it is shown. So, if you need the same content to display differently on different pages, you may need to create a separate block for each look.

Screen Size and Number of Horizontal Blocks

Blocks will have different limits on number shown per row, based on the screen size of the device used to view your site.

  • For a desktop computer view of your site: regions are limited to four blocks next to each other (horizontally), after which additional blocks will break and start a new row.
  • On smaller screen sizes (such as tablets): blocks will stack two or three horizontally.
  • On the smallest viewports (such as smartphones): blocks will stack on top of each other (vertically), instead of next to each other (horizontally).

Clear Floats to Prevent Collisions

There is also a "Clear floats" checkbox available, useful for preventing block collisions due to varying content heights within each block.

An example problem might be a block in a lower row colliding with a block in the row above it, due to the content of the block in the upper row causing it to sit higher than its adjacent blocks. Just apply the clear floats option to the lower block and it will no longer collide with the block above.

Block Regions

Block Regions root Thu, 06/29/2017 - 17:57
Drupal Version
Tags

Block Regions are areas on a Web page where blocks can be placed. Using Block Regions to place blocks on a page is different than adding blocks directly to a Horizontal Landing Page, Vertical Landing Page, or Multipurpose page.

Available Block Regions in the GT Theme

The following regions are available in the GT Theme.  If you are using a different theme, it will likely have a different set of regions.

  • Spotlight area in header typically used for home page carousels
  • Area ABOVE Main Content (IGNORES sidebar regions)
  • Left Side Menu (displays above all other content in Left Sidebar)
  • Left Sidebar
  • Site help content
  • Area ABOVE Main Content (RESPECTS sidebar regions)
  • Main Content
  • Area BELOW Main Content (RESPECTS sidebar regions)
  • Right Sidebar
  • Area BELOW Main Content (IGNORES sidebar regions)

Visual Demonstration of Block Regions in the GT Theme

Addding Design Elements to Blocks with "Styles"

Addding Design Elements to Blocks with "Styles" afrank30 Fri, 01/03/2014 - 10:50
Drupal Version
Tags

If your site is using the GT Theme, and has had the custom Georgia Tech Page Layouts package installed, then when adding a new block, or editing an existing block, you can make your blocks look fancier than a standard Drupal block.  This is done by selecting a custom style via the checkboxes under the "STYLING" section at the bottom of any block configuration page.  The available styles are:

  • BLOCK STYLE: promo block
  • BLOCK STYLE: related info block
  • ICON: Information
  • ICON: Alert
  • ICON: Download
  • ICON: Link
  • ICON: Institution
  • ICON: Mortar Board
  • BLOCK TITLE: GT Gold
  • BLOCK TITLE: GT Blue
  • BLOCK TITLE: Gray

BLOCK STYLE: promo block

This style formats your block title on a transparent background and the rest of the block on a grey background with gold top and bottom borders.

BLOCK STYLE: related info block

This style formats your block title on a gold background and the rest of the block on a grey background.

ICON: Information

This style formats your block title with an 'i' information icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Alert

This style formats your block title with an exclamation point icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Download

This style formats your block title with an down arrow icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Link

This style formats your block title with an arrow icon (pointing to the upper right) before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Institution

This style formats your block title with a Greek / Roman building icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Mortar Board

This style formats your block title with a graduation mortar board icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

BLOCK TITLE: GT Gold

This style formats your block title with a gold background.  The body is styled as a normal Drupal block.

BLOCK TITLE: GT Blue

This style formats your block title with a blue background.  The body is styled as a normal Drupal block.

BLOCK TITLE: Gray

This style formats your block title with a grey background.  The body is styled as a normal Drupal block.

Making Super Blocks

Making Super Blocks afrank30 Fri, 12/12/2014 - 14:15
Drupal Version

Super Blocks are only available if your site has the Georgia Tech Super Block module installed.

Creating a Super Block

To start making a new Super Block, use the Administrative toolbar (the black bar across the top of your site). Choose Content > Add content > Super Block.

After the new Super Block form opens, you can enter your information into the fields described below.

Title and Description

Description

  • Example Description 1: "Block - Homepage - Bachelor's Programs"
  • Example Description 2: "Block - About Section - Contact Information"
  • The Description field is always required.
  • Only you and other editors of the site will see the "Description" field; it will be used for the block reference fields on layout pages (such as in the Article or Aside areas on a Multipurpose page.)
  • Be concise, but describe each block in a way that is easy for your fellow editors to sort through later (because you will probably have a long list of 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.

Title

  • Example Title: "Bachelor's Programs"
  • The Title is optional.
  • If used, visitors to your site will read the Title as a very short text headline at the top of a Super Block.
  • You can use <em>, <strong>, and <br />, tags in the title if needed. Just don't forget to close <em> and <strong> tags! (i.e., <strong>Strong Title</strong>)

The Teaser and Image

​​Teaser Text

  • This field is optional, but can be used to include text or a blurb about the image in your Super Block.
  • It can also be used instead of an image, if only want to include text and links in your Super Block.

Primary Image

  • The Primary Image is optional, but is the heart of what makes super blocks so fun!
  • Image Size Recommendation: 492 by 320 pixels
  • Always enter the "Alternative text" so that your images communicate with people using screen readers, too!

Image Placement

  • This field is required, but you can ignore it if not uploading an image.
  • Here you can select positioning for your image and the default value is "Left".
    • If super blocks are in a region with other blocks (such as within the "Articles" section of a Multipurpose page), the image will fill the entire width of the block across the top, and any teaser text you entered will appear below the image.
    • But, if a super block appears alone in a region, the image will align with the left or right side of your block and any teaser text you entered will wrap around the sides of your image inside of the block.

The Jump Link

Jump Link Title and URL

  • These are optional, but you can enter a link (in the URL box) and it's human-readable label (in the Title box), if necessary.
  • The Link Title will show on the completed Super Block as a standard "Highlight Button".
  • The Link URL you enter will apply to the Highlight Button, and also to the Title and Primary Image of the Super Block.

Jump Link Location

  • This field is required, but you can ignore it if not entering a Jump Link.
  • Depending on what options you select, your Highlight Button link will appear either:
    • Below the teaser text and image (the default value), or
    • As an overlay on top of the image.

The Skin (or Design)

  • This field is required, and determines which of the pre-set design treatment is used for this block. The skin options are:
    • Standard: uses a gray title and jump link with white text and a gold icon (this is the default value).
    • GT Blue: uses a blue title and jump link with white text and gold icon.
    • GT Gold: uses a blue title, but the jump link is gold with white text, and a blue icon.

Slide Shows and Carousels

Slide Shows and Carousels
Category
root Mon, 05/14/2018 - 14:25
Drupal Version

While carousels were traditionally seen as a good way to squeeze more content into a limited amount of screen space, research studies (see Should I Use a Carousel?) show that site visitors are most likely to ignore anything beyond the first slide, and a poorly built carousel can irritate users, leaving them with negative feelings towards your site and your organization.

More information is available on the image carousels page of the Georgia Tech Resources for Webmasters website, but in short, for the time being it's best to avoid carousels whenever possible, especially with Drupal sites.


Warning:  If you inherit any Drupal sites, you may see the GT Slideshow or GT Carousel Slider module on them.  These modules are no longer supported or maintained and should be removed from your site(s) as soon as possible.


For sharing a small collection of images, an image gallery that displays properly sized thumbnails that link to their full-size counterparts is the best option.  For larger collections of images, you should consider an actual photo album application.  There are hosted options as well as locally installable applications like ZenPhoto that you can consider.

Webforms

Webforms afrank30 Wed, 10/01/2014 - 09:50
Drupal Version
Tags

This section provides tips and tricks for using the Webform module to create forms on a Drupal website, from an Editor's perspective.

Please note that due to European Union General Data Protection Regulation rules, when collecting personal information it is best to host your form on the campus licensed Qualtrics service, which has been approved for collecting personal data.  If you collect personal data on your unit's website, you and your unit are responsible for making sure that you follow all of Georgia Tech's data policy rules and regulations.

If you are not collecting any personally identifiable information that isn't covered by any other privacy or secrecy policy, then you are free to host such a form wherever you like.  That said, we'd still strongly recommend not using third-party services that aren't under a Georgia Tech contract.  See the Resources for Webmasters page on "outside web hosting solutions" for an explanation of the issues with outside services.


Webform Topics

Custom Emails for Webform 7.x-3.x

Custom Emails for Webform 7.x-3.x afrank30 Thu, 05/11/2017 - 13:42
Drupal Version
Tags

The following instructions show how to make it easier to read Webform data sent in emails (for Webform 7.x-3.x).

Under the Emails tab for a Webform, find the section titled Email template.

Default template

If you choose "Default template" from the drop down box, you usually have this code:

Submitted on %date
Submitted by user: %username
Submitted values are:
%email_values

The results of this submission may be viewed at:
%submission_url

Custom template

However, if you choose "Custom template" from the drop down box, you can customize how your webform data is output in the email(s) that are sent. For example, unless people are creating accounts on your site, you may want to remove the %username line.

Key values

Of more frequent use, though, is the need to simplify submitted data and shorten the labels. To include and format a specific piece of data in this email, use %value[key], where key is the machine name of the field holding that data.

Keys can be found under the Form components tab for a webform. For each field you want to include in the email, select Edit"for that field's row, and copy the Field Key.

Example template

An example custom email template, where you let webform create the names of your field Keys, based on the Label you gave each field, might look like this:

Submitted on %date

DETAILS:

Contact Person:
%value[contact_person]
%value[email]
Work: %value[work_phone]
Cell: %value[cell_phone_if_applicable]

Event Details:
Name: %value[event_name]
Date: %value[event_date] from %value[event_start_time] to %value[event_end_time]
Location: %value[event_location_please_include_rain_location_if_applicable]

The results of this submission may be viewed at:

%submission_url

Advanced Drupal Tasks

Advanced Drupal Tasks afrank30 Fri, 03/22/2013 - 09:36
Drupal Version

This section describes some of the more advanced tasks you might need to accomplish when editing a Drupal-powered website.


Advanced Topics

Roles and Responsibilities

Roles and Responsibilities root Mon, 03/11/2013 - 13:04
Drupal Version
Tags

Roles are used by Drupal to apply a set of permissions to a group of user accounts.  Some roles are built into Drupal, and some are automatically created by different Georgia Tech community modules and distributions, such as Drupal Express.

Drupal Provided Roles

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, so be careful about what permissions this role is given.

Roles Provided by Georgia Tech Community Modules

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. Should NEVER be assigned automatically.

Super Administrator

This role has full access to the Administrative section of a GT Drupal site. Should NEVER be assigned automatically.

Contextual Filters in Views

Contextual Filters in Views ma195 Thu, 05/08/2014 - 10:24
Drupal Version
Tags

Contextual filters in Views are powerful, but getting them to work perfectly can be a nightmare. This will hopefully save some people from the headaches I had.

My goal was to have a News page that could easily be filtered to only have specific stories. I started with:

  • A Taxonomy vocabulary called "Keywords"
  • A "News Story" content type
  • A field named "Keywords" in the News Story that is a Term Reference type linked to the Keywords taxonomy

Our news stories are imported from Mercury, and the keywords are automatically imported into the Taxonomy vocabulary.

The goal is to have a page that lists all our news stories at example.gatech.edu/news.  A simple view can handle that easily. With a correctly configured contextual filter, we can add a taxonomy term to the end of the URL, and the view will automatically filter itself down to just the stories tagged with a term. Basically:

  • example.gatech.edu/news will list all news stories
  • example.gatech.edu/news/robotics will list all news stories with the keyword "robotics"
  • example.gatech.edu/news/music will list all news stories with the keyword "music"

Neat, right? The problem is, contextual filters can be a nightmare to set perfectly.

Part 1: Create the Basic View

  1. Create a new view at Structure -> Views -> Add. We set ours to show content of type News, sorted newest first.

  2. Make sure the "Create a page" box is checked, give it a URL, and set the display format to something simple like unformatted list of linked titles.

  3. Save the view and head to the URL to make sure it works. Good? Let's head back and edit that view.

Part 2:  Make the View Advanced!

Make sure you are using the Page display, not the master. Usually when something isn't working, it's because I was not editing the page view.

  1. Open the Advanced menu on the right if it isn't already.

  2. Select Add next to Contextual filters.

  3. Check Content: Has taxonomy term ID in the pop-up and Apply.

On the next page, under "When the filter value is NOT in the URL:"

This controls what the view does when there's nothing added to the end of the view's URL - i.e., in our case, what will show at http://example.gatech.edu/news.  The options include:

  • Display all results for the specified field - Shows everything that matches the view's base filter. This is what makes our default news page show all stories.
  • Provide default value - Lets you chose a default tag if you want a subset shown.
  • Show "Page not found."
  • Display a summary.
  • Display contents of "No results found."
  • Display "Access Denied."

The next section is "When the filter value IS in the URL or a default is provided:"  We used two options:

  • Override title - this lets you change the default title. We entered "News stories tagged with %1", which will take the term in the URL and substitute it for the %1. So if you are on example.gatech.edu/news/music, the title will be "News stories tagged with music."
  • Specify validation criteria - this is the tricky part. Check this, then:
    • Set Validator to "taxonomy term."
    • Select the "Keywords" vocabulary.
    • Set Filter value type to "Term name converted to Term ID."
    • Check "Transform dashes in URL to spaces in term name filter values."
    • Set Action to take if filter value does not validate to "Display a summary."

Finally, save the filter, then save the view.

Create or Rename a Menu

Create or Rename a Menu jtomasino3 Thu, 04/02/2015 - 09:24
Drupal Version
Tags

Create a Menu

  1. Navigate to the Menus page (Structure -> Menus).
  2. Select Add Menu.
  3. In the Title field, enter a title.
  4. In the Description field, enter an optional description.
  5. Select Save.

Enable a Menu

Enabling the menu allows it show up in the dropdown list when you want to add a web page to a menu.

  1. Navigate to the content type for which you want to enable the menu (e.g. Structure -> Content Type -> Multipurpose Page)
  2. Choose Menu Settings
  3. Select the checkbox of the menu(s) you want to enable
  4. (Optional) Set the "Default Parent Item" to choose whatever menu you want as the default for that particular content type.

Rename a Menu

Note: The default menus cannot be renamed.

  1. Navigate to the Menus page (Structure -> Menus).
  2. Select Edit Menu.
  3. In the Title field, enter a new title.
  4. Select Save

Editing Menus (Advanced)

Editing Menus (Advanced) jtomasino3 Wed, 04/08/2015 - 21:41
Drupal Version
Tags
  1. Navigate to Structure > Menus, or you can get there by hovering over the gold primary menu bar until a little cog appears in the upper right-hand corner. Click on the cog.
  2. You will see a list of links in your primary menu.
  3. Select the Add Link button.
  4. In the Path field, enter a path for the link.
    • This can be an internal Drupal path such as "node/add." or an external URL such as http://example.com.
    • Enter <front> to link to the front page.
  5. In the Description field, enter the text that will be displayed when a user hovers over the link.
  6. Enable any of the following options:
    • Enabled: If the link is not enabled, it will not be displayed in the menu.
    • Expanded: If this option is enabled and the menu link has children, the menu will always appear expanded.
  7. In the Parent Link list, select the parent menu of the link.
  8. (Optional) In the Weight list, select the relative weight of the link. Links with the "lightest" weight will display higher in a menu. Links with the same weight will display in alphabetical order.
  9. Select Save.

Reporting a Problem with Your Web Site

Reporting a Problem with Your Web Site afrank30 Fri, 03/22/2013 - 10:11
Drupal Version

If you run into a problem editing your Drupal website and need to get help from the community, please use the following guidelines to best share and explain the problem you have encountered.

  1. First, take a picture of the whole screen of your computer, making sure you are on the problem page and, if possible, showing the error you encountered. You can capture screenshots on either a Mac or on a Windows computer.
  2. Next, make sure to include the full web address (or URL) of the problem page. For example:  http://yoursite.gatech.edu/content/my-problem-page
  3. Clearly Describe the problem:
    1. Explain exactly what were you trying to do.
    2. Tell us what actually happened, and how that differed from what you expected to happen
    3. Type out any error messages that you received that aren't overly long.  Some people block images in their emails, and you can get a quicker response from them if they can just read the error message without having to manually open your screen capture image.
  4. Email your screenshots, URL, and description of the problem to whoever helps you with your website. If you don't have anyone, you can always send to the Georgia Tech Drupal Mailing List and hope someone knows how to solve your problem.