a clean white desk with monitor, keyboard, cup of coffee and two small plants

ArtSci Website Guide

learn how to create, edit, and share content in your website

The Home Page

On department sites, the home page options are very similar to those in the Multipurpose Page. There are a variety of optional content sections to choose from. 

Some sections are designed to pull in content automatically, and others require you to add the content to the section manually. Only a few of these sections would ever be used at one time.

Slideshow Type

Choose which type of slideshow you want to display. The options are:

News


Events


Featured Full with Caption


Featured Full with Text


Featured half image w/ text

Links Section

Use this section to create links in the horizontal bar below the slideshow on your home page.

It is not recommended that you link to other websites from this section, but if you do, be sure to select the "New Window" checkbox so that visitors can easily return to your home page.

Intro Type

This option controls the top content section that is typically used for the "About the Department" text. This pull-down list allows you to choose either

Intro text with side image 

A wysiwyg toolbar area on the left with an image to the right


Intro text with related links

wysiwyg toolbar area on the left with a list of links to the right and an optional button link below the links. When entering the links, choose "Related Links" for links within your website. Choose "Related Link Out" for links outside of your website. 

Full Width Slide

Use this section to display a full-width image or set of images with optional caption. Slides rotate automatically. A visitor can go to a particular slide by clicking the dots at top center.

First Spotlight

This is identical to the Spotlight section on a multipurpose page. Use this section to display one of four options: Video, News & Events, Static Image, or Full-screen Video.

Video Option

On the left side, the Video option has a WYSIWYG area for a description, link text, and a link URL.  On the right side, you can add a title, short description, and URL for a video.  The video title and description will show up in a white field.  You must add an image for the video spotlight to display.  

Minimum image size: 800x800 or larger.


Static Image Option

On the left side, the Static Image option has a WYSIWYG area for a description, link text, and a link URL.  On the right side, you can add an image.

Recommended image size: 800x800 or larger.


News and Events Option

The News and Events option gives you two pre-populated categories to choose from: Events and News.  You can choose one of each.  The events will show up on the left side and the news will be on the right.


Full-screen Video Option

The full screen video option has a video and a video splash image with no text. Please see the "Using YouTube Videos" page for instructions on using a YouTube video.

Recommended image size: 1366x800 or larger.

Half Text and Half Testimonial

To add the Text

  1. Enter a title in the Title field
  2. Enter some text in the Body field.
  3. Optionally of enter link text and a link. If your link takes visitors away from your website, remember to check the "New Window" box.
  4. Choose a background color for the text area.

To add a Testimonial

  1. Click on "Add new paragraph" and type in the text of the testimonial. If you copy/paste, remember to copy as plain text using the tool in your toolbar for that.
  2. Enter the name and title of the person from whom the testimonial came.
  3. Choose a background color for the testimonial.

Featured News

In the Featured News section, the first option is to enter a Main Title. This will display in a red box on the top-left of the section. In the example above, the Main Title is "Featured News"

  • You can list an unlimited number of linked titles on the left, but we recommend using three or fewer featured news titles. Click "Add another Paragraph" to add more titles.
  • If you are linking to a site other than your own, remember to check the "New Window" box.
  • Each title can have some optional teaser text.
  • You have the option of a white or dark background color for this section.

​Video Spotlights and Event

This section will display a video on the left and 1 event (next upcoming) on the right. If you enter multiple videos, they will rotate in a slideshow on the left while the event on the right remains static.

  • The image is required for this section to display. Click on Browse to choose an image from the Media Library or add a new one.
  • For Video URL, you must use the link provided under the "Embed" option on YouTube - not the URL in your browser's address bar.
  • Optionally, you can include a title for the video and short description.

Upcoming Event and Two Articles

This section will display an upcoming event on the left with two articles that you pick from your existing articles on the right. The event will always be the next upcoming event and will change automatically when dates pass.

Video Spotlights and Two Articles

This section can have zero, one, or multiple video spotlights displaying on the left with two individually-chosen articles displaying on the right.

If multiple videos are chosen, they will rotate in a slideshow.

If the video spotlight is left empty, the two articles will display side-by-side

Additional Resources

This section is for creating links to resources

  • To title the section, type in the Title field. In the example above, the title is "Additional Resources Section Title"
  • To add resources, click the "Add another resource" button.
  • A resource is a title, subtitle, and URL
  • If you link to a site other than your own, remember to check the "New Window" box. The link will display with an arrow icon to indicate to the visitor that they are leaving your site. The "External Resource" above is an example of that.

Testimonial

Choose an existing testimonial from the drop-down list to display on the home page.

Testimonials are a content type, so to create a new one, you must go to Add Content -> Testimonial.

 

 

Instagram and Twitter

This section will display a feed from Instagram or Twitter or both. When your site is created initially, we set up your feeds. Contact the web team if you want to add a new Instagram or Twitter feed.

Second Spotlight

This is identical to the earlier Spotlight and the Spotlight section on a multipurpose page. Use this section to display one of four options.

  • Default
  • News & Events
  • Static Image
  • Full screen video

Call to Action

This section is designed for you to invite your visitor to follow a linked button. You could use this to ask them to learn more about a particular topic, to buy tickets, sign up for the newsletter, donate, or to fill out a form.

Background color options are red or charcoal

Creating New Content

A single web site could contain many types of content, such as basic pages, news articles, events, or web forms. A content type defines certain settings, such as layout, available fields, which taxonomy terms (tags) are available, and more.

After logging into Drupal, find the ‘Add content’ link within the grey shortcut bar at the top of the page.  After clicking it, you will see a list of the content types that you have permission to create.  Click the type of content you want to create (e.g. event). Complete all form fields.  Required fields are marked by an asterisk.  When you have finished adding content, click the Save button at the bottom of the page.

Here is a list of all of the available content types in the 2018 Arts & Sciences web theme with descriptions and helpful tips.

Article

Article is a shared content type.

Use Articles for time-sensitive content like news, press releases or blog posts. 

An Article will display on the News landing page

The News landing page can be set to display your news articles in a list layout (below left) or in a grid (aka "card") layout (below right. The web team can toggle that option for you, if you need to change it from what was decided when your site launched.

News Landing Page layout options

List view
Card view

Learn more about creating an Article

    Basic Page

    For departments, a basic page has five sections available to use (Call to Action and the second Content section are not in the Basic Page on the "Gateway" sites). You do not have to use them all. Any sections left blank will simply not display to site visitors. 

    Introduction

    • Headline (optional)
    • Description (optional)
    • Background image (optional)
    • Choice of red, dark, or white background color
    • Choice to display an ampersand image (optional)

    Content

    • Title (optional)
    • Body area with wysiwyg toolbar (optional)
    • background color (optional)
    • Page format choices
      • single column
      • two columns
      • single column w/ sidebar menu

    Call to Action

    • Title (optional)
    • Description
    • Button (optional)
    • Background color (optional)

    Content

    • Title (optional)
    • Body area with wysiwyg toolbar (optional)
    • background color (optional)
    • Page format choices
      • single column
      • two columns
      • single column w/ sidebar menu

    Footer Callout

    • Body area with wysiwyg toolbar (optional)
    • Background color (optional)
    • Social Media Links (optional)
    • Button (optional)

    Book

    Books display in 2 locations:

    1. Above the footer on a Person page that has the "Long" format chosen (usually for faculty) when that person is tagged on the Book page. If multiple books are tagged with the same person, the books will display in a rotating slideshow.
    2. In the Faculty Bookshelf, which is an optional section on a multipurpose page. Not every site will use this feature as it requires a minimum number of books (around 6, depending on cover image sizes used) and not all departments have that many.

    Creating a new book

    1. Go to Add Content and select Book
    2. Title:  Fill in the tItle of the book
    3. Byline Options: Select the appropriate option for the By line. The options are
      • By
      • Edited by
      • Translated by
    4. Faculty and Staff: Begin typing the name of a faculty member for whom a profile ("Person" content type) has been created in your site. A list of names will appear in a drop-down below the field from which you can select the author of the book.
      • To add a second author who has a profile in your website, type a comma and add the second person's name in the same way.
    5. Byline Names: Only use this field if you need to add additional authors who do not have profiles in your website.
    6. Book Cover: Upload an image of the book cover
      • Files must be less than 8 MB.
      • Allowed file types: png gif jpg jpeg.
      • Images must be larger than 200x450 pixels.
    7. Description: Fill in descriptive information
    8. Links: Add links to the publisher's website. You can create multiple links if there is other associated material such as a book website or related volume.

    Event

    Event is a shared content type

    An Event is a piece of content with a required date and a number of other optional fields. Event teasers can display on an Event Landing Page, the Home Page, or a Multipurpose Page (or all three!). When a visitor clicks the teaser, it will open up the event page with all of the event details.

    How to add an RSVP form to an event

    It's important to create a new RSVP form for each event rather than just re-use a generic one. Something in the form should indicate which event the visitor is responding to.

    Step 1: Create a new RSVP form

    1. Add Content-> Webform
    2. Add a title that includes the name/date of the event
    3. Add form components (fields you want people to fill in)
    4. (optionally) Click "Email" to set up an email to come to you, the site visitor, or both.

    Step 2: Add the form to your event

    1. When creating the event, under RSVP, use the pull-down to choose the RSVP form you just created.

    How to add a Map on an Event

    To create a map, enter an address in the geolocation field. For campus buildings, use the addresses listed below and it will place the pin in that location. 

    For example:

    • Busch Hall: 38.6483448, -90.3093417
    • Seigle Hall: Seigle Hall, 63105  OR  38.6488025, -90.3147284
    • Eads Hall:  Eads Hall, 63130  OR  JMXV+78 University City, University Township, MO
    • Cupples II: 38.6486422, -90.3077834  OR  JMXV+M7 University City, University Township, MO
    • Compton: 38.649462, -90.305046
    • Crow: 38.649462, -90.305046
    • Ridgely Hall: 38.6481296, -90.3066999

    Fields available in an Event

    • Title *
    • Feature Event
      Check to feature the event on the event landing page slideshow.
    • Featured Home Slideshow
      Check to feature the event on the homepage slideshow.
    • Header Image
    • Thumbnail
      If no image is uploaded, a default image will display.
    • Intro Text
      This area should contain speaker info.
    • Description
    • Event Category
    • Event Date TBD
      If this checkbox is selected, the event will display at the beginning of your event landing page
    • Event Date
    • All Day
      select this if you do not want to enter a start time
    • Show End Date
      select this to show the end time
    • Date
    • Time
    • Repeat
      Select this to open additional options for how often the event should repeat. Do not use this feature if you plan to feature the event at the top of the event landing page or on the home page, as the date will always show the first occurrence when promoted to those areas.
    • Location
    • Additional Location Information
    • Geolocation Address
    • Please enter the full address where you would like the event marker to display. For example, 1234 Main Street, St. Louis, MO 12345.
    • External URL
      Events with this field will display the event as a lightbox before prompting the user to leave the site to view the event on the originating site.
    • Button Text
      If no text is specified, the default "MORE INFO" will show.
    • Button URL
    • RSVP Form
      Select an RSVP form to attach to the event. If left blank, no RSVP button will display. If selected, the chosen form will display once the user selects RSVP.
    • Search
      This field can be used to boost the priority of this content within the internal site search.
    • shared_content_xml
      On an imported event, this field shows the web address of the originating site.
    • shared_content_subscribers
      This will display the web addresses of any sites that have imported this event.

    FAQ

    An FAQ page offers the option of adding multiple sections distinguished by headings. Under each heading, the FAQ titles will display. When a visitor clicks a title, the page slides down to reveal more content. Each heading becomes an anchor link in the right column, to allow visitors to navigate quickly to a specific section. The page you are on is an FAQ page and this answer is one FAQ in the "Creating New Content" section.

    Image Card

    This content type goes by many names. On Departmtent sites, we named it "Image Cards," On University College, it is called "Programs," and on Artsci and Graduate School, it is called "Departments & Academics."

    The content requires an image and displays in a grid on a lading page.

    Image Card Landing Page

     

     

     

     

     

    Examples:

    https://music.wustl.edu/browse

    https://eps.wustl.edu/research

    Site visitors can use filters or search at the top of the page to find the cards in which they are interested.

     

     

     

     

     

    When clicked, the card opens up in a lightbox with more information

    Multipurpose Pages

    A multipurpose page is made up of close to 20 optional sections and new ones are added from time to time. Each section has a unique layout and set of features. A section will only display if content is entered into it, making the multipurpose page very flexible.

    Though the template is flexible in that each section is optional, the sections are not moveable. They always display in the order shown.

    See a list of all Multipurpose page sections

    Person

    Person is a shared content type.

    The "Person" content type is used to share information about the people in a department such as contact information, job responsibilities, research interests, publications, and more. A person's profile page should reside in the "Employee Department" according to HRMS. For faculty or staff who reside in multiple departments/programs/centers, the profile should be marked "shareable" so that other units can import it to their "Our People" pages. Only the primary department in which the page resides is able to edit the profile. The profile could be shared on multiple other sites including artsci.wustl.edu, which lists all faculty in Arts & Sciences. 

    Available fields in a Person page (required fields are marked with an asterisk *)

    Title*: The Title field is what displays to site visitors and should contain the person's name, as they wish it to appear.

    Content Type*: Always use "Long" for faculty members. The "Short" option will be used for most staff members. See below for more information about the two options.

    Headshot: The minimum image size is 684 x 684 pixels. Click Browse to upload an image from your computer or select the "Library (MBP)" tab to choose an image that has already been added to your site.

    First Name*: The person's first name

    Last Name*: The person's last name (Used for alphabetization)

    Titles: For instance, Chair and Professor of Chemistry. If a faculty member is active in multiple departments, list all similar titles together. For instance, Professor of History and of African and African-American Studies (Affiliate).

    Additional Titles: For instance, Director of Graduate Studies in Physics. Please include the appropriate department and avoid including commas in titles.

    Endowed Professorship: A named professorship title will display in gold beneath the person's name.

    Education: For faculty, enter graduate education only in the following format: PhD, Sample University. Please note that “PhD” is listed with no spaces or periods.

    CV: A field in which to upload a CV

    Links: Add links to faculty research groups, personal websites, and any other departments, centers, or programs with which the person is affiliated. Always include a link to your department for faculty profiles so that when the page appears on other sites, visitors can follow that to your department site.

    Interests: Include a list of research interests. Research interests should be capitalized and listed on separate lines. For instance:

    Astrophysics
    Nuclear Astrophysics
    Quark Matter

    Intro Text: Intro text should summarize a faculty member’s area of expertise in 1-2 sentences. For instance, Professor Smith is a sociocultural anthropologist widely recognized for her work on religion and ritual in East Africa. The text displays above the Biography section in slightly larger font and also appears in search results within the website.

    Biography: A description of the person's professional history, research interests, and current projects. In most cases, faculty biographies should be 2-3 paragraphs long.

    Social Media Links: Enter links to the person's social media accounts

    Email address: Please use @wustl.edu email address here

    Phone number: Please use dashes (not parentheses): 314-935-XXXX

    Fax number: Enter as above

    Office Building Name and Room Number: Please list building name followed by room number: Umrath 232

    Office Hours: Please spell out days and times or list “By Appointment.” For instance,

    Monday & Wednesday
    9:00 – 11:00 AM

    Office Directions URL: Go to Google Maps and search for the building name. Select the appropriate building and then copy/paste the resulting URL into this field. For example, https://www.google.com/maps/place/Ridgley+Hall+and+Holmes+Lounge/@38.6481286,-90.3083401,17z/data=!3m1!4b1!4m5!3m4!1s0x87d8caac31ac8bab:0xb035913f12d8714d!8m2!3d38.6481286!4d-90.3061514

    Mailing Address: Please follow this format, as required by the USPS:

    Washington University
    CB ####
    One Brookings Drive
    St. Louis, MO 63130-4899

    Dark Slideshow: This section appears on faculty (long) profiles below the biography section and can contain several slides containing a title, description, and link. It is commonly used for "select courses," in which case the title would be a course title, the description would be the course description and the link would be a link to the course listing page or to a faculty member's Canvas or personal website for the course.

    Additional Description: This field is most commonly used for recent publications (or select publications) and displays below the dark callout. This is also an appropriate place for other information that appears in list format, such as awards, previous appointments, and funding sources.

    Type of Person: Choose the category this person should display in on your "Our People" page.

    External Profile Link: Only use this in the cases where a person is primary in one of the other schools. Any person in Arts & Sciences should be shared as "shared content."

    Search: Adding a term to this field will cause this page to be at the top of any internal site search results for that term.

    Shared_content_xml: This field is not editable but displays the code used to share this piece of content.

    shared_content_subscribers: This field will display any sites that have imported this piece of content.

    Long v. Short

    Choosing "Long" or "Short" on a Person profile will change which fields display to site visitors. The "Long" version was designed for faculty and offers options such as Endowed title, publications, and courses, among other things. The "Short" version was designed to use for staff, but some staff may have publications or teach courses, and in those instances, it's fine to use the "long" version. Some people with teaching roles who do not have material written for the “biography” section, like lecturers, may also appear as a “short” profile.  

    In the Graduate School website only, every person, regardless of who they are, has to be marked as “staff” in order to show up on front end.

    What are the exact field differences when choosing long v. short on a “person?”

    Fields available for “Short:”

    • Title
    • Type
    • Content Type
    • Headshot
    • First Name
    • Last Name
    • Deans Title
    • Titles
    • Additional Titles
    • Email Address
    • Phone number
    • Fax number
    • Office Hours
    • Office Directions URL
    • Mailing Address
    • Building Name and Room Number
    • Biography
    • Social Media Links
    • Department Center, or Program (taxonomy)
    • In the gateway sites only, this field associates a person with a department so that the department image appears in the lower right corner of the person's profile. The image "lives" on the "Departments and Academics" card for that department and can be updated within the card (not within the person content).
    • Type of Person (Taxonomy)
    • External Profile Link 
    • Search
    • Areas of Study

    Fields available in “Long” (in addition to the fields listed above):

    • Endowed Professorship
    • Education
    • CV
    • Links
    • Research interests
    • Intro Text (below Building name and room number)
    • Dark slideshow
    • Additional Description

    Resource

    Resources are a way to create organized, browsable links to other content, which can be a page in your site or on another website. A Resource can display on the Resources Landing Page and/or on a multipurpose page, with a graphic icon representing the information available. 

    To make a Resource:

    1. Choose an internal title that will help you (and anyone else who edits in your website) to understand what content is represented in the card. Most of the time, this title can match the display title.
    2. Click "Browse" to choose an icon from the icons folder in your media library. Whenever possible, try to match the icons used on artsci.wustl.edu to be consistent.
    3. Enter the title that you want to display at the top of the card.
    4. Enter a subtitle
    5. Enter a URL.
    6. If the URL is pointing to an external website (not a page in your site), check the "New Window" box. This will cause the page to open in a new window, which is a best practice for website navigation that takes a visitor out of the current website.
    7. If applicable, choose a category for the resource.
    8. Save

    To Re-order Resources

    Resources are ordered by date (most recent at top) on the Resources landing page. The date does not display to visitors.

    Resource Queue method:

    1. Any resources added to the queue will display in the order you place them.
    2. Click on "Resource Queue" in the grey shortcut bar.
    3. Start to type the name of a resource then select the one you want form the list that pops up.
    4. Drag the resources into the order you want them to appear.
    5. Any resources that are not in the queue will appear after the ones in the queue. They will display ordered by authoring info date.

    Changing the date method:

    1. Go to find content and click "edit" next to the Resource you wish to re-order
    2. Scroll down to the authoring information tab at the bottom and change the date.

    Testimonial

    A testimonial displays an image on the left and a short quote on the right. 

    Testimonials can be embedded in the home page or into a multipurpose page. For the quote, we recommend 1-2 sentences at most.

    To Add a Testimonial

    1. Go to Add Content and choose Testimonial
    2. Fill in the required fields and Save
    3. Edit a multipurpose page (or home page) where you would like to display the testimonial.
    4. Scroll down to the testimonial section, select from the drop-down list of available testimonials, and Save.

    Sharing Content

    Content types available to share include PersonEvent, and Article.

    How do I share an Article, Event, or Person?

    You can turn sharing on or off for a particular Article, Event or Person.

    1. Log in to edit the page
    2. Scroll to the bottom to the admin settings tab titled Shared content settings.
    3. Click the checkbox in front of Shareable to share the content. This will add your content to the feed of available items under "Shared Content" in other sites in the new Arts & Sciences theme.
    4. Optionally,  you can send a notification to the content manager of another site by selecting them from the list under Notifications. Use this if you want to be sure another department knows about your new content.

    How do I import an Article, Event, or Person?

    On the Shared Content page, check the box in front of the content you wish to import, scroll to the bottom, and click the "Import" button.

    Can I share or import content types other than Article, Event, or Person?

    Not at this time, however there are improvements planned for the future which will allow us to share book. 

    I was notified about new content I'd like to import, but I cannot see it.

    First, try updating the feed

    Feeds will update to show new content every day at 6:00 am and 6:00 pm. If you want to manually refresh them sooner than that, follow these instructions:

    On the Shared Content page, click the button to "Update Feeds"

    Next, filter for the content

    You may need to use the filter options at the top of the Shared Content page to find what you're looking for. If you know the title, try searching for it.

    If I share something, will others be able to edit it?

    No, they will not be able to change any of the content you created. However, they will be able to apply their own tags to make the content appear in the correct category within their site.

    What happens if I delete content after someone has imported it?

    When the originating site deletes a piece of content, the content is not deleted from sites that have borrowed it. We recommend you contact the borrowing sites to ask them to remove it. Sites that have borrowed your content will be listed in the shared_content_subscribers box.

    What happens when shared content is changed to no longer be shared?

    That content will continue to be displayed on the receiving sites that already imported it but will not be available to be imported on any other sites. If you want the content to be removed from all sites, you must delete it.

    How can I tell who has imported my content?

    When editing the content, look for the shared_content_subscribers box near the bottom of the editing screen. It will list the addresses of any sites that have imported that piece of content.

    How can I share events and articles with The Record or The Source?

    Due to personnel changes in Public Affairs, there is no longer a person to whom events and articles may be automaticllly directed. For this reason, there is no longer a checkbox to "share with the Record," as in our old sites.

    Events may be submitted to The Source calendar via the online form at https://source.wustl.edu/submit-an-event/.

    News Articles may be shared by sending a link to Sue McGinn at smcginn@wustl.edu

    The Toolbar (wysiwyg)

     

    The First Six Tools

     

    Bold

    Use this tool to make normal text bold (not recommended for headings).


    Italics

    Use this tool to italicize text


    Left-align

    Mostly used just to undo center-aligned text.


    Center-align

    To align a paragraph to center.


    Bulleted list

    To create a bulleted list


    Numbered list

    To create a numbered list.

    Links

    To create a link, first highlight some text and then click the link tool to type or paste in the link address. 

    If it's internal to your website, do not use the entire path. Instead, use a relative link, which is everyting after the ".edu" in the web address. For example if you want to link to a page in your site with the full path of http://artsci.wustl.edu/events then the relative link to that page would just be this: /events

    Making links accessible

    • Avoid using a single word as a link, such as "click here"
    • These are difficult for visitors with impaired motor skills, tremors, or low vision to select.
    • Whenever possible, include the name of the thing you are linking to. For example instead of a link like this: Read more information
    • Make your link like this: Read more about student policies. This is helpful to users of screen reader technology, because the links can be read off as options. 

     

    Linking to Documents

    1. Upload your document to Box
    2. Click the "Share" button 
    3. In the new window that opens, click the drop-down menu below the link and select the option for "Anyone with the link"
    4. Copy the link
    5. Go to your web page and highlight the text that you wish to use as link text. Do not use general words such as "click here," instead describe what the visitor is going to get if they follow the link. For instance "Download a copy of the form."
    6. With the text highlighted, click on the link tool in your toolbar and paste in the link you copied from box.

     

    Linking to a Filtered View

    What is a Filtered View?

    If you click on one of the checkboxes at the top of your "Our People" page, you will be looking at a filtered view. Sometimes as you write content for a particular audience, you may find that you want to link to filtered view of people, events, or articles.

    When creating a link to a filtered view, the URL should be the page slug plus the category ids (comma separated). See below for examples.

    • /people/list/88,94/
    • /events/categories/491
    • /news/categories/470

    What is a slug?

    A slug is the part of a URL which identifies a particular page on a website in an easy to read form. For example, on the Anthropology website, the Our People page is this url: https://anthropology.wustl.edu/people. The slug is "/people"

    How do I find a category ID for People?

    1. Go to the filtered view that you have in mind. For instance, you could go to /people and filter for "current faculty."
    2. Click over to the list view (see image). 
    3. You will see a number at the end of the URL. This is the category ID. In the example below, the category ID is 470.

    How do I find a category ID for Events or Articles?

    1. Go to an event or article and view the page (not the teaser).
    2. You will see the categories listed in the top section, below the title. Click the category you want to link to. 
    3. You will see a number at the end of the URL. This is the category ID.

    Superscript and Subscript

    Use these to add a character that is slightly above or below the normal line of script.

    Block Quote

    This has been styled to be a larger font that is centeered on the page and is set off by horizontal lines above and below the text.

    This is a block quote

    Text Styles and Formatting Options

    Paste as Plain Text (A very important tool!)

    Use this every time you copy/paste to remove all styles and formatting except paragraph returns. 

     

    Remove Format

    Use to remove bold, italic or underline formatting on text.

     

    Format pull-down

    Use to select heading styles or normal font.


    Styles pull-down

    Use to select the Red Headline style or the Button style. Note: the Button style is only available when your cursor is in linked text.

    Embed video

    To embed a video, you must first upload it to YouTube or contact a member of the web team to upload to the YouTube channel we maintain for A&S departments. 

    The URL you will need to use is the one YouTube provides when you select the "Embed" option. First, select "Share" below the video, then select "Embed." It looks like this: https://www.youtube.com/embed/(your video's unique code)

    1. Select "Share"
    2. On the next screen select "Embed"
    3. On the last screen, copy the web address from the embed code
    4. While editing the page in your site, click the "Video filter" tool in the toolbar: 
    5. Paste in the URL you copied from YouTube
    6. You don't need to fill in the other fields - but feel free to, if you want to specify those options.
    7. Save

     

    Add a Table

    1. Click the Table icon to add a new table 
    2. Choose the number of columns and rows you will need
    3. If you like, change the other options such as border size, alignment, spacing, padding, or add a caption. In the example below, we selected "first row" for the header and provided a caption and a summary.
    4. Summary field is used by screen readers for the visually impaired and should contain a brief summary of the content of the table. It does not display visually on the page.
    5. Click OK to insert the table
    6. Copy/paste or type the data into the table

     

    This is the caption
     Color Make
    Blue Honda
    White Volkswagon

     

    Insert an Image

    1. Click the Media browser icon to insert an image. 

    2. You have two options.
    • Option 1: Browse to your computer to upload the image
      1. Select a media folder in which to store the image.
      2. Add Alt text for the visually impaired.
      3. Submit
    • Option 2: Click the Library(MBP) tab to browse and select from existing images in your website.

      1. On the Embedding screen, select Display as: WYSIWYG. 
         
      2. Submit

    Note: Once an image is inserted, you must save the page once before additional options become available.

    After saving, double-click on the image to open the image properties window. This window offers alt text, width, height, alignment, and caption options 

    Here is a short video demonstration:

     

    SEO and Search

    Search Engine Optimization is about helping search engines understand and present content.

    To improve your serving and ranking:

    • Put useful content on your page and keep it up to date.
    • Write useful and descriptive titles.
    • Ensure that all pages on the site can be reached by a link from another findable page. 
    • Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.
    • Use text instead of images to display important names, content, or links.
    • Use Siteimprove to
      • Find and fix broken links
      • Find places you need to use <alt> tags on images.
      • Correct misspellings

    The Search Field

    On many types of content, there is a "Search" field available. Adding a word to this field will affect the internal site search results. If a word is entered into that field, regardless of whether it is in the content of that page, the internal site search will place a higher weight on that page when someone searches for that word.

    For example, when searching the term "Psychology" on artsci.wustl.edu without adding that word to the search box of any pages, the returned search results will put "Philosophy-Neurosciences-Psychology" at the top of the results because the word "Psychology" is in its title. It would put the page title "Psychological and Brain Sciences" further down the list because "Psychology is not in the title (though it is used in the body of the page). Adding that term to the "Psychological and Brain Sciences" page causes it to be higher in the search results when a visitor searches for the word "Psychology."

    User Roles

    There are several levels of access available to users of your website. If you are the primary manager of content on your website, you will have the "SiteStaff" role. There may be others in your department who help you with parts of the website. The other roles were designed with that in mind.

    Training is needed for all website users and will be tailored to the role assigned. If you need to add a new user to your website, contact the web team and let us know which role you would like to assign. We will contact them to schedule their training.

    Other things you will need to contact us for help with:

    • Add/edit/remove categories (tags)
    • Change type of layout on Events or News Landing pages
    • Add or remove social media icons in your footer
    • Set up a feed from Twitter or Instagram on your home page
    • Change the default image at the top of the Events landing page

    Editor

    This role may...

    • Edit or Delete any content where they are assigned as the author
    • Skip Comment Approval
    • Edit Own Comments
    • Edit Metatags
    • View Revisions
    • Revert to Revisions
    • Create new Events

    Intern

    This role may...

    • Edit Own Comments
    • Edit Metatags
    • Create new/Edit own Articles
    • Create/ Edit any Book, Event, Person
    • Delete own Book, Event, Person
    • Use Media Browser

    Media Manager

    This role may...

    • Administer Files
    • Use Media Browser

    Web Forms

    This role may...

    • Create/Edit any Webforms
    • Access all Webform results
    • Edit all Webform submissions

    URL Path Manager

    This role can be added onto the SiteStaff role in circumstances that require access to these features. This role may...

    • Create Redirects
    • Create Custom URL Aliases

    Site Staff

    This role may...

    • Manage Shared Content
    • Create/Edit/Delete any content
    • Publish/unpublish any content
    • Promote/un-promote to/from home page
    • Administer Comments and Comment settings
    • Skip Comment approval
    • Edit/Delete/Download any Files
    • Use Media Browser
    • Administer Menus and Menu items
    • Edit Metatags
    • Change the author of content
    • View/Revert to/ Delete Revisions
    • Create/Edit/Delete Webforms
    • Clone any content
    • Create/Edit URL Aliases
    • View Site Reports
    • Access/Edit/Delete Webform submissions

    Grad Center Staff

    This role is unique to the Graduate School website. This role may...

    • View and Post comments, Skip comment approval, and Edit own Comments
    • Upload/Edit/View/Download any Files
    • Delete own Files
    • Use Media Browser
    • Edit Meta Tags
    • View/Revert to/ Delete Revisions
    • Create/Edit own/Delete own Articles, Person, FAQ, Multipurpose, Testimonial
    • Create/Edit any/Delete own Events, Basic Page
    • Create/Edit/Delete any Liberman Center
    • Create/Edit any /Delete own Webforms
    • Access/Edit/Delete Webform submissions
    • Clone own Content

    Page Settings

    When editing a piece of content, there is a collection of page settings in tabs at the bottom of the editing screen. Most of these options are the same across all types of content.

    Exceptions to this are the Shared content settings (only available on sharable content) and Menu settings (not available on some types of content that should not go into a menu, such as events).

    Depending on your user role, you may only see some of these options.

    Learn about user roles

    Shared content settings

    You can turn sharing on or off for a particular Article, Eventor Person.

    1. Log in to edit the page
    2. Scroll to the bottom to the admin settings tab titled Shared content settings.
    3. Click the checkbox in front of Shareable to share the content. This will add your content to the feed of available items under "Shared Content" in other sites in the new Arts & Sciences theme.
    4. Optionally,  you can send a notification to the content manager of another site by selecting them from the list under Notifications. Use this if you want to be sure another department knows about your new content.

    Menu Settings

    To add content (basic page, multipurpose page, etc.) to the menu, scroll to the bottom of the edit form and check "Provide a menu link" under the menu settings tab at the bottom of the edit form. This will expose additional fields related to menu settings. As a best practice, a site should never have more than seven links in any single menu level.

    URL Path Settings

    The first time content is saved, Drupal automatically generates a nice URL alias based on the title.  To create a custom URL alias for a page, click on the vertical tab at the bottom of the edit form labeled 'URL path settings' and uncheck "Generate automatic URL alias."

    Comment Settings

    By default, comments will be turned off for all new content. 

    You can open comments on any individual article. This will allow visitors to comment on that particular article. To disable comments on an article, go to the edit form for that article, click on "comment settings" in the vertical tabs at the bottom, and select "Closed." (See image below.)

    To approve comments made on your site, you may browse to the article containing unapproved comments and click "approve" or you may approve comments in bulk on the comment administration page. To view a full list of unapproved comments and approve or delete them, click "find content" in the shortcut bar, click the "comments" tab, and then click "unapproved comments" at the top of the page.

    Revisions

    What is a revision?

    A revision is a saved earlier version of a page.

    Once a page has been saved, the next time you edit the page, you can save the unchanged version of the page as a revision. You can save as many revisions of a page as you like. There is no limit.

    Saving a revision is helpful if you think you may need to quickly revert back to the page as it was prior to your changes.

    How to make a new revision

    • A revision can be created by editing a page and opening the Revision Information tab near the bottom of the page.
    • To save your changes as a revision, slect the checkbox in front of Create new revision. Optionally, you can create a log message for your self (or your co workers) to note what you changed in this revision.
    • You can make as many revisions as you like - there is no limit.

    How to find and use a saved revision

    Once a page has at least one saved revision, a new Revisions tab will appear at the top of the page when you are editing it. Select that tab to see a list of all revsions and log messages for that page.

    On the Revisions tab, you will see saved revisions listed with the date, time, username, and log messages in the left column and options to either revert or delete in the right column.

    To preview a revision without actually reverting to it, click the date. After reveiewing, use the browser's back button to return to the list.

    Meta Tags

    Meta Tag options are available in a tab at the bottom of every page when you are logged in and editing.

    Basic Tags

    • Title and Description will be filled in automatically. The other options in this section are not necessary.

    Advanced Tags

    • Some of these will be filled in automatically. For most sites, this is all that is needed.

    Open Graph

    • These control how Facebook, Pinterest, LinkedIn, etc interpret the site's content. We recommend customizing the content description field in this section for articles that you want to promote. This will optimize sharing on social media.

    Facebook

    • This is specifically for API use - which most of our sites don't need.

    Twitter Cards

    • Choose the Twitter card type option that best describes the way you want the content of the page to be displayed when shared on Twitter.
    • Most of the important fields in this section will be filled in automatically, but you may need to fill in your twitter account if it did not exist at the time the site was created.

    Google+

    • Don't worry about this section since there are specified tokens in place by default.

    Authoring Information

    This tab allows you to edit the author of a page. This is useful if you have a user with the "Editor" role because editors are only allowed to edit their own content. Just make that user the author of any page you wish to permit them to edit.

    Publishing options

    Un-check the "Published" option to save a page as unpublished.

    Accessibility

    Your new 2018 Arts & Sciences Drupal web theme already has a lot of accessibility built into the templates but we still need you, the content creator, to make our websites accessible. The following tips are based on a portion of the WCAG 2.0 standards developed by the World Wide Web Consortium (W3C).

    Why make accessible websites?

    Web accessibility is a basic human right. It means your content can be used as effectively by people with disabilities as it can by those without. This includes:

    Making your website accessible has other benefits.

    • search engine optimization
    • improved responsiveness (mobile-friendly design)

    Legal compliance is important too.

    • 2017 saw a refresh of Section 508, which requires that persons with disabilities have comparable access to and use of information and communication technology.
    • Plaintiffs filed more website accessibility lawsuits in federal court for the first six months of 2018 than in all of 2017.

    Make it Perceivable

    Provide text alternatives for non-text content.

    • Include alternative text for every image. Use helpful descriptions of photos, diagrams or charts to describe the content and how it relates to the text on the page.
    • Images that are links must have alt text that describes the landing page, preferably the page title and/or h1 text—not a description of the image.
    • Keep text to “tweet length," 140 characters or less If the image needs further explanation, describe it in the inline text or a link to a separate page.

    Use graphics that do not rely solely on color to convey meaning

    Graphs and charts should use text labels and/or fill patterns rather than color alone.

    Inaccessible Bar Chart

    Below is an image of an inaccessible bar chart. Solid sections of red and green with similar brightness are used- which may not be distinguishable for colorblind users.

    In addition, the only key to the chart refers to the colors, thus information is only conveyed by color. The greyscale version of the chart shows what a colorblind person would experience.
      

     

    Accessible Bar Chart

    The data from the first table has been redone as a bar chart, but the colors have been changed to shades of blue. Colorblind users can use the different levels of darkness to tell the platforms apart. In addition, labels for each platform have been added to the bottom of the chart, so that viewers do not even have to refer to the key.

    Credit for Bar Chart examples: Penn State Accessibility

    Make it Operable

    Make sure link text does not match taxonomy terms

    This would result in identical link text that leads to different locations - which makes navigation of your website unclear.

    Give users enough time to read and use the content.

    • Keep captions on moving slide images short and to the point.
    • Offer visitors the option to stop slides to give them more time to read.

    Do not use content that causes seizures.

    Web pages must not contain anything that flashes more than three times in any one second period. Keep this in mind when adding video to your site.

    Make it Understandable

    Make text readable and understandable.

    • Web pages should have titles that describe the topic or purpose clearly and concisely. 
    • Page titles should be unique within a site. Duplicate page titles are confusing and will also harm your page ranking in search engines.
    • Text should be supplemented with illustrations, videos, and other formats where appropriate.

    Navigation and information structure should be discernible and consistent.

    The purpose of each link should be able to be determined from the link text alone. Link texts should be written so they make sense out of context. Generic texts such as “click here” and “more” give no indication as to the destination of the links.

    Instead, try "follow this link to see our list of all resources" This is because screen readers will offer visitors the option to simply hear a list of links on a page. More descriptive linked text makes it easier for visitors to navigate through the list of links.

    Proper heading hierarchy will ensure screen readers find and read the list headings in the correct order. Headings should be nested. The page title automatically gets Heading 1, so you won't be able to use it anywhere in your website using the Arts & Sciences 2018 webtheme.

    Heading 2

    Heading 3

    Heading 4

    Heading 3 should only ever be used following a Heading 2. In other words, never use Headings to simply give a page larger text. 

    Accessibility Resources and Further Information

    Arts & Sciences makes Siteimprove available to all content creators. Read more about how Siteimprove can help you to check for and improve your site's accessibility.

    Washington University Accessibility User Group (AUG): https://sites.wustl.edu/aug/

    General information and guidelines for accessible web design may be found on the W3C Website: https://www.w3.org/standards/webdesign/accessibility 

    Web Accessibility in Mind (Web AIM) has a mission to empower organizations to make their web content accessible to people with disabilities: http://webaim.org/ 

    EduCause Review of Section 508 Refresh: https://er.educause.edu/articles/2017/12/the-section-508-refresh-and-what-it-means-for-higher-education

     

    Webforms

    First, a note about security: 

    None of the data submitted through webforms is encrypted, so webforms should never be used to collect sensitive information. If your site is public, the files uploaded through a webform are also technically public. (If someone knows the URL, they can access the files).

     

    Create a Webform: Basic Steps

    1. Click “Add content”
    2. Choose Webform
    3. Title your webform
    4. Click "Provide a menu link, if desired
    5. You may want to give it a nice URL alias.
    6. Click Save. You will be taken to the form components options.
    7. Add questions (form components) to your form.
      1. Click on “form components” under the “Webform” tab. (You will be on the correct page automatically if you just created a new webform.)
      2. Enter the text for each input field in the textbox under label.
      3. Select the desired field type from the dropdown. (See more below.)
      4. Check ‘mandatory’ if a field should be required.
      5. Click ‘Add’
      6. A new page with additional options will display.  If this is a basic textfield, you can usually leave everything on the default settings, scroll to the bottom of the page, and click “save component.”
    8. After adding all form fields, setup e-mail notification if desired.
    9. Under the webform tab, click “e-mails.”
    10. Enter each e-mail separately in Address field and click ‘Add’ after each.
    11. If you have added an e-mail form component to your form, you can select it using the “component value” option and send an email to the form submitter as well.

    How to add intro text at the top of a form

    In our old web theme, you could add a message to the "Body" section when you created a new a webform. This section displayed at the top of each page of the form.

    In this new theme, you can still create some introductory text at the top of your form, but it will only appear on the first page. You can do this by using the component type named "markup." 

    If you want a message at the top of each page of your form, you can make multiple Markup components.

    Conditional Fields

    You can display fields, pages, and fieldsets conditionally based on the values that someone filled out on the form.

    The steps for creating a conditional statement:

    1. Create a component that will determine what the visitor sees, such as Expected graduation year (select list).
    2. Add at least one more component following that, such as a custom Note to first-year students (markup).
    3. Click the Conditionals button near the top of the Webform tab.
    4. Use the If/then statements to create a conditional rule (or many).
    5. Click Save conditions.

    Private Fields

    Want to collect submissions and then add additional administrator-only data as well? (Status, review, etc.) Each form component is public (visible to anyone who can submit the form) by default, but there is a checkbox for marking a component "Private". (See image below)

    When the private checkbox is checked, only users who can view the form results will see the form field. One example use would be to track the status of an application. Example steps:

    1. Create application form with all public-facing form components (name, e-mail, etc).
    2. Add a select option field for application status. Options could be something like "Pending", "Accepted", and "Rejected". Make sure to set the field as required with "Pending" as the default.
    3. Mark the field as private.
    4. Visitors filling out the form would not see the status field, and when the form was submitted, the field would be blank.
    5. An administrator with result access could log in, review the submissions, and update/edit each submission to mark them as accepted or rejected.

    Accessing Form Results

    Option 1: Have form submissions sent to you by email.

    You can set up the form to automatically e-mail a certain address every time someone submits the form. This is good for forms that require a relatively quick response or that exist for a very long time (e.g. Computing’s “Classroom Request” form).

    Option 2: Log into the website to retrieve form submissions.

    1. Click on Find Content
    2. Click the Webforms tab on the upper-right
    3. To view the submissions in your browser, click Submissions next to the appropriate form -or- to download the results to Excel, click Download.

    For surveys or RSVP forms (forms with a set end date), using the Results tab may be more practical. (See image below.)

    Every time someone submits a webform, a new record is created in the results. You can see a list containing the date and time of each submission. You can also view the results of each submission individually by clicking ‘view’ in the Submissions list. Alternatively, you can view a table of all responses by clicking ‘Table’. (This is only practical in forms with a small number of fields.)

    You may also export your results to Excel by clicking ‘Download.’ We recommend that you download form results to Excel to store a copy and then clear the form results in Drupal at least once per year to keep the number manageable.

    Form Components (Field Types)

    Commonly Used Components

    Textfield - A one-line box for unformatted (no bold/italics) text. (e.g. Name)

    Textarea - A multiple-line box for text with no character limit. (e.g. Comments)

    E-mail – Valid email address format. If you want to send your submitters a copy of the form submission, it’s best to use an actual email field versus a textfield.

    Markup – This is for entering a description at the beginning of a form page or mid-way through a form. 

    Select options – These are for drop downs, radio buttons, and checkboxes – anything where you need to give the user a set list of choices. The interface for configuring select option fields is substantially improved in Drupal 7.

    • If you don’t configure the select field at all, it will display as a radio button field. (User can only select one option.)
    • If you check ‘Multiple’, the select field will be displayed as a list of checkboxes. (User can select multiple options.) Note – if you want a single checkbox, you still need to select multiple – just only provide one option.
    • If you do not check ‘Multiple’ and instead check ‘Listbox’, you will get a dropdown. (User can only select one option.)

    Number - Only allows numeric values and can be displayed as a textfield or select list. You can specify a valid range.

    Form Components You Will Probably Rarely Use

    Date and Time – self-explanatory (submission date is collected automatically)

    Grid - Provide multiple questions that the user can rate on a given scale such as 1-5 or "bad, OK, good" Displayed as rows in a table.

    Hidden - A field that is not displayed to the submitter with data you want to collect that can be automatically generated.  Note: This is probably something you will never need to use.

    File – Only enabled on specific sites. It is extremely important for the security of our shared server that if you use a file field that you limit allowed file types to only images, PDFs, and Word documents. You should also limit file size. This is configured on a per-field basis which is why we don’t enable it on all sites. Uploaded webform files are public. They can be accessed directly at the file URL if someone knows it, so you should not be accepting files containing sensitive information. If you have a form that accepts files, make sure to periodically clear your old form results to remove those files, especially if those files contain student work. (Results->Clear)

    Spam Discouragement

    Enable Captcha

    1. Go to Find Content
    2. Click the Webform tab
    3. Select The title of the form in question to view it as visitor would
    4. Scroll to the bottom and click the large red text "CAPTCHA: No challenge enabled"
    5. Smaller text reading "place a CAPTCHA here for untrusted users" will appear. Click on that text to open a page with CAPTCHA options.
    6. From the pull-down, select any of the CAPTCH types. The default type is set to "rmath" which offers the visitor a simple math problem to solve.
    7. Save

    Un-publish or close the form when no longer needed

    The longer a form is public, the more likely it is that spammers will find it. So if the form is just a temporary survey (even if you might re-use it later) and the survey period is over, it's a good idea to un-publish it. You can always republish it at a later date for a new (or the same) survey. Alternatively you can close the form to prevent further submissions. This is also a good usability to make it clear to your visitors that you are no longer collecting RSVPs or survey results.

    To close a webform and prevent further submissions,

    1. Go to Find Content
    2. Click the Webform tab
    3. Select Form settings next to the form in question
    4. Set the status of the form to “closed”
    5. Scroll down and Save configuration
    6. Do NOT delete form components to prevent further submissions. When you delete a form component, all submissions in that form field are also removed.

    Email your Form Submissions

    1. Log into the site, go to Find Content->Webform tab to find the webform, and click on Edit
    2. At the top of the window, you'll see tabs "View", "Edit", Webform", and "Results." Click on Webform.
    3. Click the grey E-mails button to add or edit the email addresses the form submissions will be sent to. Having the form email automatically is an option. The submission results are available to check under the results tab.
    4. Scroll down and save your changes.

    Conditional Recipients

    You can send submissions to different e-mail addresses based what value a submitter chose in a select field.

    Let's say you are a department that has one contact person for admission questions, another for programs, and finally someone who receives general questions. To automatically route form submissions to the correct individual:

    1. Create a required select option form component called something like "subject".
    2. Add the 3 areas as options.
    3. Customize the option keys to be the e-mail addresses of the 3 individuals. Note: the keys must be unique, so the same e-mail cannot be used more than once! Click on Manual entry in the lower right corner of the Options box (see image)
    4. Type the email addresses followed by a pipe (vertical line symbol) | and then the option (see image below). The key for each option must be unique and should only contain alphanumeric characters - no spaces or special characters. (@ is an exception.) For simplicity, do not use capital letters.
    5. Save the component

    6. In the e-mail settings, choose the "subject" component as the "e-mail to" value.

     

    Organizing your Webform

    There are two main ways to group fields:

    • Fieldsets – groups related fields within a page. In newer sites, fieldsets are themed with a thin border. They can also be collapsible, a nice way to make a really long form less daunting. You can add descriptive text at the top of each fieldset. Note: to actually place fields within a fieldset, you need to drag fields ‘under’ the fieldset component – similar to moving menu items under a ‘parent’ item in the menu administration.
    • Pagebreaks – allows for multi-page forms.  (Note: if you are allowing file upload – only enabled on certain sites – file fields must be on the last page of a multi-page form.) The description at the top of the page will continue to be displayed on each page of the form.

    Both of these are added as form components despite not really being form fields. One way of thinking about these is that fieldsets ‘hold’ collections of fields and pagebreaks are the submit buttons at the bottom of each page in a multi-page form.

    Control the Width of a Field

    By default, each field in a form will go the full-width of the page. If you want certain fields to be shorter and next to each other (rather than above/below), do this:

    1. Log in 
    2. Navigate to the view of form components by going to Find Content and selecting the Web Forms tab at top.
    3. Next to the web form you wish to edit, click on Components (You will be on the correct page automatically if you just created a new webform.)
    4. Edit the component (field) you wish to shorten
    5. In the Wrapper CSS Class field, type "half."
    6. If you do this to two adjacent fields, they will appear in the same row.

    Other options that will work:

    • one-third
    • two-thirds

    Form Best Practices

    1. Not in use? Close it under webform->form settings.
    2. Do not allow users to submit the form if they are not eligible. (e.g. Close the form when an application period is over or when you are no longer accepting survey responses.)
    3. Keep it short.
    4. Group related fields together visually. (e.g. contact information)
    5. Put all required fields at the top together.
    6. Use specific options instead of open-ended text boxes where ever possible. (Less work for your users!)
    7. Make the length of the text box or text area reflect the content. For example, the box for a 6 character ID should only be 6 characters wide.

    Images

    Minimum Sizes for Images

    First, a caution regarding image sizes

    Each section with the option to upload an image (a "Browse" button) is designed so that images must meet a minimum image size to display correctly (or at all, in many cases). 

    If you click "Browse" and upload an image from your computer, you will see the minimum size displayed below the upload button. If you choose an image that doesn't meet the minimum, you will receive an error message.

    HOWEVER....

    If you navigate to the media library to browse for an existing image instead of uploading a new one, it is possible to choose one that does not meet the minimum size and you will not get the error message. If an image that does not meet the size requirement is selected in this way, it will appear on the back end (in editing view) but will not display on the front end (what site visitors see).

    Minimum Sizes for Images

    Article

    Header Image: 1366 x 548 pixels

    Thumbnail: 600 x 600 pixels

    Basic Page

    Intro Background Image:  1366 x 480 pixels

    Book

    Book Cover: 200 x 450 pixels

    Event

    Header Image: 1040 x 526 pixels

    Thumbnail: 600 x 600 pixels

    Image Card

    Thumbnail: 600 x 600 pixels

    Multipurpose

    Introduction

    Background Image: 1366 x 480 pixels

    Main Content and Sidebar

    Icon: 420 x 300 pixels

    Video Spotlights with Articles

    Image: 800 x 800 pixels

    Dark Callout

    Left Image: 800 x 800 pixels

    Spotlight - Video

    Image: 800 x 800 pixels

    Spotlight - Static Image

    Image: 800 x 800 pixels

    Spotlight - Fullscreen Video

    Image: 1366 x 800 pixels

    Fullscreen Slideshow

    Image: 1366 x 800 pixels

    Timeline

    Header Image: 1366 x 480 pixels

    Static Slideshow Image: 600 x 600 pixels

    Slide Background Image: 600 x 600 pixels

    Gallery

    Image: 600 x 600 pixels

    Person

    Headshot: 684 x 684 pixels

    Testimonial

    Testimonial Image: 680 x 680 pixels

    Controlling Thumbnail Images with the Image Focus Tool

    1. Edit the page where the thumbnail is being used.
    2. Edit the thumbnail image.
    3. You will see an image preview with a little plus sign + in the center. Wherever you place that plus sign becomes the center of the thumbnail image. This becomes more important when the image used is rectangular but will display as a (square) thumbnail. 

    Guidelines for taking Photos for your Website

    General guidelines for images of people (for profiles or testimonials)

    When the student or alumnus is not able to be photographed on campus, we would like to ask them for a portrait that is well-lit, in focus, and shows them from the waist up with margins on the left, right, and top.  

    Photo guidelines page

    Adding an image next to text

    ]

     

    Still have questions? We can help!

    Contact the Web Team