SIPA Students looking at computer screen

Website Guide

Communications and External Relations (CXR)
Columbia University
School of International and Public Affairs (SIPA)
The Interchurch Center
61 Claremont Avenue
New York, NY 10115
[email protected]

Our website guides provide everything you need to manage and enhance your web presence effectively. With resources from Drupal content management system (CMS) account setup, service requests for website updates, CMS training for hands-on support, and photo submission guidelines, you'll have all the tools to keep your site current and engaging.

Services

Request a Drupal Account → (Google Form)
To gain editing access to our website, please request a Drupal account. As a Content Editor, this account will allow you to log in and update content within your designated site sections.

Drupal Content Management System CMS Training → (Google Docs)
Content editors can refer to the CMS training manual for website editing. It provides essential steps and best practices to streamline the editing process.

Photo Submission → (Google Form)
Submit a headshot for inclusion in the faculty and staff directory and your profile pages.

Component Toolkit

SIPA’s website is powered by the Drupal Content Management System (CMS), offering enhanced flexibility and modularity in its design. Instead of using rigid templates, the site was built with a "building block" approach using customizable elements called “components.” This toolkit provides an outline and explanation of each component available for page design, along with best practices for effective use.

Commonly Used Components List

Please refer to the Component Toolkit list above to identify each component and its intended use case.

Three students walking on Columbia University campus

Image

In the top hero image, the subject matter is obscured by the text box, whereas in the bottom image, it remains unobstructed.
- The hero is at the top of every SIPA page. It is required on all pages and cannot be moved.
- The image is optional. If using an image, keep the subject matter on the left side so the text box does not cover the main subject.
- An ambient video can be used via a Vimeo Pro link. When ambient video is present a pause button will appear in the to allow users to pause video (a WCAG requirement).
- When there is no image, a placeholder image will be automatically added.
- A page name is required.
- A headline is optional (should be no more than 50 characters)
- CMS editors can determine if, and where an orange underline uses HTML tags. The underlined text is purely visual and has no associated functionality (e.g., link).
Image
- The section title is optional, and it should be no more than 40 characters.
- Each stat block contains a numerical amount and description (no more than 60 characters). Both are required.
- The number of stats is not restricted; they will wrap if more than four are added.
Image
- Image is required.
- A quote of 120 characters or less is required.
- Call to action (CTA) and Name are optional.
Image
Image

Manual Cards
- This component contains a title (optional) and 2-6 cards and images.
- When there are less than 3 cards in a row, the cards will NOT center.
- Components with more than 3 cards will wrap to the following line.
- Each card contains an optional image, a required, clickable title (40 characters or less), body text (120 characters or less), and an optional eyebrow (25 characters or less).
Image

Article Cards & Manual Cards (Horizontal)
- This component contains a title and up to 3 article cards that populate the most recently published stories based on taxonomy, or can be manually selected.
- The title, eyebrow, date (if relevant), publication (if relevant), and image of the card come from the referenced node.
Image
Image
Image
Image
Image
Image
Image
Image
Image

Commonly Used Components Comparison Chart

The table below lists commonly used templates (referred to as content types in Drupal), such as Landing Page, Left Nav Page, Article, Event, Capstone, and Microsite with the components available for each.

View the Comparison Chart

Components	Landing	Left Nav	Article	Event	Capstone	Microsite
50-50 Split CTA	✓	×	×	×	×	✓
50-50 Split CTA	✓	×	×	×	×	✓
Accordions	✓	✓	✓	×	✓	×
Article Cards - by Taxonomy	✓	×	×	×	×	×
Article Cards Horizontal - Manual	✓	×	×	×	×	×
Article Cards Horizontal - by Taxonomy	✓	×	×	×	×	×
Article Cards - Manual	✓	×	×	×	×	×
Caption Image + Text	✓	×	×	×	×	×
Chart	✓	✓	×	×	×	✓
Collapsible Panel	✓	✓	×	×	×	✓
Degree Information	✓	×	×	×	×	×
Enhanced Tabbed Content	✓	✓	×	×	×	✓
Event Cards - Manual	✓	×	×	×	×	×
Event Cards - by Taxonomy	✓	×	×	×	×	×
Full Width Image + Text	✓	×	×	×	×	×
Full Width Text + CTA	✓	×	×	×	×	×
Image Gallery	✓	×	✓	×	×	×
Intro Text	✓	×	×	×	×	×
Link List	✓	×	×	×	×	×
Manual Cards	✓	✓	×	×	×	×
Manual Cards 2 Up	×	✓	×	×	×	×
Manual Cards - Horizontal	✓	✓	×	×	×	×
Microsite Chapter	×	×	×	×	×	✓
Profile Cards	×	✓	×	✓	×	×
Quote + CTA	✓	×	✓	×	×	×
Rich Text	✓	✓	✓	✓	✓	×
Rich Text 50/50	✓	×	×	×	×	✓
Spacer	✓	✓	✓	×	✓	×
Stats	✓	✓	×	×	×	✓
Text + Images Mosaic	✓	×	×	×	×	×
Thumbnail Checklist	✓	✓	×	×	×	×
Vertical Tabbed Carousel	✓	×	×	×	×	×
Video with Text	✓	×	×	×	×	×

Image Styles

The site design is responsive, meaning that content automatically scales and rearranges for the best possible display based on the user’s screen size. The following table catalogues how images display at the 1200pt desktop view and recommend CMS upload sizes that will ensure crisp images even on retina devices.

View the Image Styles Chart

Component	Display Size	Upload Size	Ratio
	@1x at 1200pt	Recommended minimum	Responsive
Homepage Hero	1200 x 500px	2000 x 1125px	16:9 Note: Keep subject matter on the left side of the image
Landing Page Hero	1200 x 400px	2000 x 667px	3:1 Note: Keep subject matter on the left side of the image
50/50	600 x 600px	1800 x 1800px	1:1
Find Your Education Link List	400 x 225px	1200 x 675px	16:9
Full Width Text with CTA	1200 x 400px	2000 x 667px	3:1 Note: Use atmospheric, non-specific imagery. Architectural details, statues, campus flora, etc.
3-up Manual Cards	350 x 197px	1050 x 560px	16:9
Featured Events Promo - Primary Featured Events Promo - Secondary	525 x 296px	2000 x 1125px	16:9
Text with Video (poster image)	700 x 394px	2000 x 1125px	16:9 Note: Event Featured Images promote events sitewide.
Caption Image w/ Right Hand Rich Text	300 x 533px	900 x 1600px	9:16
Text and Image Mosaic (quote)	400 x 400px	1200 x 1200px	1:1
Full Width Image and CTA	1200 x 675px	2000 x 1125px	16:9
Quote and Image	600 x 600px	1800 x 1800px	1:1
Manual Cards Horizontal	250 x 140px	750 x 420px	16:9
Profile Header	275 x 275px	825 x 825px	1:1 Note: Profile Images promote profiles site-wide.