ias drupal (2) · working with images! to embed an image in the wysiwyg, use the media browser...

Drupal at IASINTRODUCTION TO DRUPAL AT IAS

Purpose of this session

! Give new and current users an overview of why we are using Drupal.

! Share tips and build community.

! Give an overview of key concepts in Drupal.

! Identify resources for content editors.

! Determine how IAS can help the new and current content editors.

! Suggestions for redesign of the current web sites are beyond the scope of this session.

What is Drupal and why do we use it?

! Content Management System (CMS)

! Separation of design development from maintaining content

! Separation of roles

! Easier for non-technical people to use

! Consistency across the site

! Modular and expandable

! IAS Specific

! Many sites are hosted off campus.

Where do I start if I am new?

! Drupal 7 documentation: https://www.drupal.org/documentation/7! Understanding Drupal

! Nodes, content types and fields

! Organizing content with taxonomies

! Working with menus

! IAS Content Editor’s Guide: https://www.ias.edu/docs

! https://www.itg.ias.edu/drupal-resources

Tip: Think about your audience

! Mobile First Strategy! Do not be bound by the idea that your page will look the same to all users on

all devices.

! Use responsive design mode on your web browser.

! What is responsive web design?

! How do you break responsive page design? ! Static tables for layout

! Using specific sizes instead of percentages

Tip: Use the staging server for testing

! www-stage.ias.edu

! www-stage.hs.ias.edu

! www-stage.sss.ias.edu

! www-stage.math.ias.edu

! Staging sites are usually wiped clean once a week

User roles and permissions

! What are roles and permissions in Drupal?

! How are they used?

! Default roles – Anonymous, Authenticated and Administrator

! IAS roles

! How to find out what roles you have?

Drupal content: node

! What is a node?

! Why is this important to know?

Content Types

! What is a content type?

! What are IAS content types?

! Resource: IAS Editor’s Guide: https://www.ias.edu/docs

Organization: Taxonomy

! Taxonomy is used for organizing your content into categories.

! Vocabulary is a container that holds different categories. For example, the vocabulary “Scholar Type” contains categories like “Director”, “Faculty”, and “Member”.

! The categories themselves are referred to as Terms.

Displaying information

! Modules included in the setup of IAS Drupal allows us to display information in many ways.

! Views

! Sections

! Stacked Pages

Text Editing

! The WYSIWYG (what you see is what you get) text editor allows you to format the text.

! You will find buttons for common things such as making text bold, italicized, adding an image, hyperlink, lists and setting the text’s style.

! Whenever you paste items into a text field be careful not to paste styles from external sources.

! Click the “Remove Format” button Tx (next to “Paste from Word”). This will remove most of the formatting.

Text Editing

! To add a heading, select the line of text that you wish to make a heading in the content window, and then choose a style from the “Paragraph Format” drop down.

! Note: that by default all regular text will be set as a “Normal”.

! WYSIWYG tip: Use Shift+Enter to create a paragraph break without a large gap between lines.

Working with Images

! Guidelines for Images

! Resolution is 72 dpi

! File type is JPG for images

! File type is PNG for icons, logos, and transparencies

! Further Information for image guidelines is located in the Image Production Guide

Working with Images

! To embed an image in the WYSIWYG, use the Media Browser button.

! In the Media browser, use either Upload, Web, Library, or My Files tab.

! Alt Text , Title Text , Image Credit , and Image Caption are optional.

! Use the Link Image to hyperlink the image to another web page.

! Note: in order to edit media options later on, select the media in the WYSIWYG editor then click the “Add Media” button.

! Tip: Using alternate text improves accessibility and optimizes it for search engines.

What are links

! Three different types of links:

! Email Links - links that go directly to someone’s email address.

! Absolute link - contains all the information necessary to locate a resource and uses the following format: protocol://domain/path (e.g. http://ias.edu/scholars)

! Relative link - locates a resource and typically consists only of the path (and optionally a resource) , but no protocol or domain (e.g. /scholars).

! The Link Button vs “Linkit” Button

Aliases and Redirects

! Aliases - Drupal uses "nodes" to identify pages by their position in your database. "URL Alias" allows you to provide a more understandable name to the page.

! Automatically generate URL aliases for new content.

! Redirect - A URL redirect is a URL that is set to direct visitors to a certain page

URLs

! Some things to note

! URLs should not have spaces in them, so where we intend a space to exist a dash“-“ is generally used.

! As convention, the URL paths are typically all lower case.

Menus

! Menus are a collection of links (menu items) used to navigate a website

! You can add and edit the menu links

! Only create a menu link in one location otherwise there will be duplicate menu links.

! When creating a menu link use the relative path URL for internal links

! Choose the parent item if applicable

! You can change the order of the menu items by simply dragging and dropping

Webform

! A Webform can be used to create a questionnaire (survey), registration for an event, contact form.

! You can add any number of fields to the form.

! You can send confirmations and notifications to the form submitter.

! You can limit the number of submissions for the form

! You can control when a form is open or closed to accept submissions

! See all the submissions submitted in table format, analysis view or export to excel

Training Options

! ITG Website – https://www.itg.ias.edu/drupal-resources

! IAS Drupal 7 Sites Documentation - www.ias.edu/docs/

! LinkedIn Learning

! Drupal.org

Where do we go from here?

! cms-users@ias.edu will be the mailing list for content editors

! Open discussion