The CS Dept website is built using the django web framework. Most pages are managed by the django-cms content management system. A CMS is a web application that responds to web requests by constructing pages on the fly, and provides an interface for creating and managing them.   Here's what it looks like:

Important Concepts

Pages

Pages managed by the CMS are organized in a hierarchy, not unlike files in a filesystem. Each page can have owner and group permissions, and these can be inherited by child pages. The structure (html) of the page depends on the template chosen. Templates offer one or more content areas, and may hook into a particular theme.

Plugins

A core concept in django-cms is the plugin. All content areas, the unique parts of each page, are constructed from them. The most basic plugin is the text plugin. Many pages will use no other.

Other plugins provide images, videos, maps, and much more. To make things more interesting, the text plugin allows other plugins to appear within it, so you can control the layout of text and media on your page.

Text Plugin

The text plugin we use is CKEditor. With it, you can control the structure of your page content, adding paragraphs, headings, lists and more. CKEditor should not be used to design your page. Page design is the job of the site's stylesheets. However, you can add images, videos, links, maps and other media, and control where they appear in the flow of your text.

Placeholders

Templates determine where on the page your content appears. Templates can offer more than one content location, for instance, a main content area and a sidebar. These locations are called placeholders, and they have names that appear when you edit them.

Editing Content

When you are signed into the website, a CMS toolbar appears at the top of each page that provides access to page content and site administration.  But first you must sign in.

Sign In

Visit the sign in page and sign in using your Brown Account. Note that you are only signed in when you are connected securely (via ssl). You can sign in from any CS web page, by clicking on the "Sign In" link in the lower right corner.

Editing a Web Page

When you visit a page that contains content you have permission to edit, an "Edit Page" button appears in the CMS toolbar.  Click on it to edit the page.

As you mouse over the page, your mouse pointer will change to indicate that you can double-click to edit whatever is beneath it. Double-click, as it suggests, and an in-browser html editor appears in a popup, as shown in the image at the top of this page.

Images

Putting an image on a page is a two-step process.  First you upload the image to a web "folder," and add some information about it.  Then you reference this image from your page using an Image CMS plugin.

Two Steps!  Why?

It's an extra step, but it's worth it.  You get automatic scaling and cropping, which you can change later with no loss of resolution.  You can set a caption or alternative text for non-visual users.  You can make the image into a link by adding a url.  Your images will be automatically upscaled for high resolution screen displays and downscaled for mobile users.  You can have the image float to the left or to the right.  And there are many more options, too.

Image CMS Plugin

When you select an Image plugin from the "CMS Plugins" menu, click on the magnifying glass icon to browse the images folders to look for for an image, or to upload a new one.  When you find the image you want, click on the "down left" arrow next to it.

Uploading a New Image

You've selected an Image plugin, clicked on the magnifying glass, and you are browsing image folders.  Click on the "Upload" button and select an image to upload.  The image appears in the clipboard on the right.  Now choose a folder in which to put the new image, and click on the "left" arrow to move it.

What Folder Should I Use?

For your personal images, create a folder for yourself in the "User Files" folder.  Please make the name self-identifying.  Groups and organizations can contact the technical staff to have a folder created in the "Group Files" folder for shared use by the group.  Images can be moved from folder to folder without affecting pages that reference them.

Using Raw HTML

You can also use raw html to add an image.  The "src" attribute should point to an image that is accessible from the static web file system.  You can do this, but we encourage you to use CMS-based images for CMS-based pages.