Yale School of Art
1156 Chapel Street, POB 208339
New Haven, Connecticut, 06520-8339
(203) 432-2600
THE GUIDE TO MAGIC MODULES

SEE ALSO:   ABOUT THIS SITE   


HOW TO EDIT THE SITE

LOG IN TO EDIT PAGE

Click on log in, on the left sidebar. Type in your username and password. They are the same ones you use for your Yale account.

Once you are logged in, click on edit this page on the left sidebar.

EDIT (OR DELETE) MODULES

In the editing mode, all already existing modules on the page are displayed in a list and in the order they appear on the page. Each module can be edited or deleted by pressing one of the two buttons situated right above it. The modules that you don’t have access to will have these two buttons greyed out. After you make changes, press save to retain them or cancel to keep the current version of the module unchanged.

CREATE MODULES

If you want to creat a new module on the page, select a module appropriate for your content from the drop down menu of the add a magic module tool and click create. On a newly created page, add a magic module tool will be on the top of the page. Otherwise, this tool will always appear after all already existing modules in the end of the page.

CREATE TEXT MODULE

Choose the kind of text module you need from the add a magic module tool’s drop down menu and click create. Enter text and other formatting information.

NOTE: If you choose a title module and your title is only one word long and fits into 1 column, you can still specify how many columns you want this module to span on the page. For example, if you specify 4 columns, no other modules would appear on the same horizontal line next to your title.

FORMAT TEXT

To format your text, you will use a simple text markup called Textile. Please refer to the markup language guide on this page.

PREPARE IMAGES

All images on the site are displayed at their actual size. The easiest way to downsize your images to the size you want is by using iPhoto. Select the image you want to resize in your iPhoto gallery, and choose File/Export from the top menu bar. Enter the size you want and Export. When preparing images in other applications (ex. Photoshop) make sure you choose ‘save for web’, to keep the sizes small. Once you have the images saved at the sizes you want them to appear online, upload your images to your folder on the Yale server.

CREATE IMAGE MODULE

Choose image module from add a magic module tool’s drop down menu and click create. This module allows you to make both individual images and image collections. Currently, each individual image can have a caption attached to it, whereas a collection can only have one caption for all images. This will be improved in the future.

Creating single image

Enter the image url. Enter other information and save.

Creating image collection

Enter all images urls (one per line). Enter all corresponding blowups urls. Enter caption that will be applied to the whole collection. Enter how many images you want to show at a time (per page). Enter column width for the entire collection. For example, you can choose to have your collection span three columns and keep the fourth column for the text module to be displayed next to it. Enter column width to allocate for each image. In this way, you can decide if you want your images to be more or less spaced out, (or even overlap). If you check show random image(s) from the collection, images will load in a random order each time you upload the page. Show “next” and “previous” buttons even when random will allow you to have both random upload and slideshow interface.

GRID INFO

It is useful to know the width of columns when resizing your images. The basic grid of the site has five columns. Each column is 162px wide. The first column is only occupied by the menu bar. All the modules start at the beginning of a column.

The vertical and horizontal spaces between images (as well as between text modules) are in increments of 12px. Make sure you take into consideration the space between images when deciding what size the images should be.

For example, if you want to show multiple one column images next to each other, spanning four columns of the grid and with 12px space between them, you should save them as 150px wide.

(150 | 12 || 150 |12 || 150 | 12 || 150 | 12 ) = (162 || 162 || 162 || 162 )

If you want to show multiple two column images next to each other and have 24px space between them, you should save them as 300px wide.

(300 | 24 || 300 |24 ) = (324 || 324 ) = (162 || 162 || 162 || 162 )

REARRANGE MODULES

If you want to change the order of the modules on a page, click on a module and drag it up or down to the place you want it to be.

PLEASE NOTE: After you make changes to any module and after you save them, you might not be able to drag any modules unless you first click done editing and then edit this page again, both on the left sidebar. Then you will be able to drag the module where you want it to be. The module dragging behavior is a bit buggy, but it always works if you leave and then re-enter the editing mode.

EDIT BACKGROUND MODULE

All pages (new or existing) come with a background module. A background module consists of three elements: background, stripe and photo. A default background module on new pages consists of white background (Color: ffffff), grey translucent stripe and light grey field of color ‘photo’ (designating an area for a background photo placement on most pages). All three parts of the background module could be either a color or an image. You can also choose not to have anything in the background by leaving all the fields blank.

DONE EDITING

After you save all the changes that you wanted to make on a page, click done editing on the left sidebar to exit the editing mode.

Last edited by: Dan Michaelson
Edit access: Sysop

MARKUP LANGUAGE GUIDE

Paragraphs are separated by one blank line.

A single paragraph.

Followed by another.

Text appears bold when surrounded with asterisks.

And then she fell!

Text appears italicized when surrounded with underscores.

I believe every word.

Text appears underlined when surrounded with pluses.

You are a pleasant child.

Double hyphens are replaced with an em-dash.

Observe — very nice!

Single hyphens are replaced with en-dashes.

Observe – very nice!

Conversion of trademark and copyright symbols.

one™, two®, three©.

To make an entire paragraph into a Header, place “hn.” at its beginning, where n is a number from 1-6.

Header 1

Header 3

To make an entire paragraph into a block quotation, place “bq.” before it.

An old text

A block quotation.

Any old text

Creating links.

I searched Google.

Last edited by: Johannes DeYoung
Edit access: Sysop