Reason: Basics

Reason at Beloit College
Reason can be accessed at www.beloit.edu/reason
Main Reason Page Interface
Reason Page
1. Site Dropdown Menu: This box lives in the top left corner of your screen and allows you to switch
to managing a different minisite (individual site within the larger beloit.edu domain, ISR or Career
Services for example).
2. "Go to Public Site" Link: This link will take you out of the admin area for this minisite and to the
home page for the minisite (i.e., the live version of your site).
3. Left Sidebar
a. Add/Edit Items Menu: This menu lists the types available for you to work with in this
minisite. Clicking on a link will take you to an individual type admin area where you can add
or edit items of this type. (For example, if you click on "Images" you will see the list of
images managed by the current site and be able to add a new image to Reason.)
b. Borrowed Items Menu: This menu shows you the types of items available for you to borrow
from another minisite.
4. Recent Activity Area: The central portion of the page contains links to recently edited items,
grouped by type, for easy access to things you’ve been working on. Reason shows the three most
recently edited items of each type.
1
Viewing/Finding Pages
Click the Pages link in the Left Sidebar from the Main Reason page to view all the pages associated with
your site. Note: These techniques work for viewing/finding other types such as Images and Assets.
Add/Edit Pages Screen
1. Use the Search box to search for pages by page name or page ID number. You can use the Content
box to search for Keywords on pages.
2. The Add Page link will let you create a new page.
3. Current/Pending/Deleted pages toggle. This will allow you to view Current Items (active pages),
Deleted Items (deleted pages), or Pending Items (page drafts that are not yet live).
4. Change your View of pages. You can view pages either in List view (list of pages)
or Tree view (parent/child relationship between pages).
5. List of Pages
6. Admin functions: Preview a page (view it in a web browser) or Edit a page.
2
Adding a Page
Clicking the Add a Page link will bring you to a screen where you can add page content and metadata.
The term "content" is easy to understand -- it is the information that actually appears right there on the
page. But metadata is a little trickier. "Metadata" refers to additional information about the content of
the page. Metadata is very helpful in putting together a good website, because it:
1. Provides different ways of finding and categorizing web content
2. Makes searching work better, and
3. Makes reusing content easier
Only the fields with an asterisk (*) next to them are required fields.
Adding a Page screen


Click the Create an external link instead of a page link to create a link to an external web site
Title-This is the title of the page and will appear at the top of the published web page
3











Link Name-If you will be adding this page to the left side navigation links, you can enter Text
here for what the page should be called in the Navigation pane. If you leave it blank, the page
title will automatically be used.
Author-Who created the page, best practice to use Beloit College username
Description- This field is used by Google and other searches. It may also be used in some page
listings as a "teaser" for the page. It's good practice to always include a description on your
pages, but it's not good practice to simply repeat the page title, since the description is
displayed below the page title and redundancy looks silly. If you can't think of a nice 1- or 2sentence summary of the content of the page, you can leave this field blank.
Keywords- This field is used by people searching the site to understand the content of the page.
Enter the main concepts of the page and variants on those words that you think people might
search for when they want to find the page. It is particularly useful to include words which
describe the content but don't appear there.
Parent Page- This field allows you to specify the page's position in the structure of the site. If
you are not sure, Reason makes it easy to come back later and rearrange your pages.
Page URL-This is the last item of a URL chain for a page. For instance, in
www.beloit.edu/isr/policies “policies” is the page URL
Show this page in navigation-Choose Yes if you would like the page title to show in the
navigation bar on the left side of your site
Type of Page- This field determines how page is laid out and what is on the page.
Content-This is where the actual content of your page will go
State- A Pending page is unpublished, but can be edited from within Reason. Live means that
the page is published and viewable on the site.
Save options-Reason is browser based and browsers can crash from time to time. It’s a good
idea to save your work frequently. Use Save and Continue Editing to save your work and
continue editing, use Save and Associate to save your work and associate other pages, assets, or
images with the page, use Save and Finish to save your work and exit the page. The page will
then either be pending or live depending on the State that was chosen.
4
Live Page Elements
Example Live Page
1.
2.
3.
4.
Page Title-this is defined in the Title field when adding a new page
Navigation bar-Site navigation links, this usually stays the same even if the page content changes
Associated Assets (documents)
Page Content
Editing a Page
1.
2.
3.
4.
5.
Log in to Reason at www.beloit.edu/reason
Open your site and go to Add/Edit Pages
Locate the page you wish to edit and click the Edit link from the Admin Functions column
Use the Content editor to add text, images, and links
The icons on the Content toolbar will allow you to format text, insert images, and add hyperlinks
and named anchors to the page.
6. Click Save and Finish when complete to make your page live. Reason is browser based and
browsers can crash from time to time. It’s a good idea to save your work frequently. Use Save and
5
Continue Editing to save your work and continue editing, use Save and Associate to save your work
and associate other pages, assets, or images with the page, use Save and Finish to save your work
and exit the page. The page will then either be pending or live depending on the State that was
chosen.
Content editor
Adding a Page to the Navigation bar
The Navigation bar shows up on the left hand side of a live page. It contains links to pages in your site.
1.
2.
3.
4.
5.
Log in to Reason at www.beloit.edu/reason
Open your site and go to Add/Edit Pages
Locate the page you wish to edit and click the Edit link from the Admin Functions column
Change the Show this Page in Navigation value to “Yes”
Click Save and Finish to make the change live
Reordering the links in the Navigation bar
Please see the Child Site glossary area for a diagram of the parent/child site relationship.
1. Log in to Reason at www.beloit.edu/reason
2. Open your site and go to Add/Edit Pages
3. Click the Sort these items link
6
Sort these items link
4. Choose the page that you wish to change the order of links for
5. Highlight an item and use the Up/Down arrows to move the item up or down
Sorting screen
Changing where Pages link from
1.
2.
3.
4.
5.
Log in to Reason at www.beloit.edu/reason
Open your site and go to Add/Edit Pages
Locate the page you wish to edit and click the Edit link from the Admin Functions column
Change the Parent Page to the appropriate page
Click Save and Finish to make the change live
7
Linking to another page or website
1.
2.
3.
4.
5.
Log in to Reason at www.beloit.edu/reason
Open your site and go to Add/Edit Pages
Locate the page you wish to edit and click the Edit link from the Admin Functions column
Select the text that you wish to become a link
Click the Insert Link icon from the content editor bar
Insert Link icon
6. Use the “an existing item” tab to link to an Asset (file) that has been uploaded to your site or to link
to another page within your site.
Add link to an existing item
7. Or, use the “a web address” or “an email address” tabs to link to an external web address or email
address.
8
Adding an Image
1. Click the Images link in the Left Sidebar from the Main Reason page to view all the images uploaded
to your site
2. Click the Add Image link to upload a new image to your site
Adding an Image screen









Name-This is the name of the image, used for internal reference only
Photographer-Give credit to the photographer if applicable
Short Caption-Used under thumbnail versions of the image, this should be short
Long Caption- Used under large-size versions of the image, this could be more descriptive
Keywords- Helps to search for images
Photo Taken- If applicable, this is the date and time the photo was taken
Original Image Format-Used to indicate the source of the image, either digital, print, or slide
Image-Click the Browse button to browse for the image on your computer
Thumbnail- You can ignore this field; Reason creates thumbnails automatically for you
9
3. Click Save and Finish to upload the image to your site
Batch Importing Images
Note that it is helpful to have created a live photo gallery page in advance so that you can automatically
add the images to the gallery upon import. Follow the steps for creating a new page and make the type
of page a photo gallery page. You could also follow the instructions for creating a photo gallery to turn
an existing page into a photo gallery page.
1. Click the Images link in the Left Sidebar from the Main Reason page to view all the images uploaded
to your site
2. Click the Batch Import Images link
3. Click the Browse button to upload the first image, repeat this process to upload the second image
and so on until all images have been uploaded
4. Fill in information about the batch of images you are importing
5. If you have already created a photo gallery page and made it live, you can automatically attach the
imported images to the gallery using the “Attach to Gallery” drop down menu
6. Click the Import Photos button
Batch Import Images screen, part 1
10
Batch Import Images screen, part 2
7.
8.
9.
10.
11.
After importing the images, click the link to Review & approve imported images
Click Edit next to the first image, add a short caption and any other relevant information
If you are satisfied with the image, click the Publish and Go to Next button to review the next image
Click Save and Finish after you have published the batch of images
You can now preview the photo gallery page
Adding an image to a page
There are three ways to put images on your web pages with Reason.
1. Standard/Automatic way: images appear in the right sidebar of the page
2. Inline/Manual method: images appear amidst the text of the page
3. Gallery: images appear in a grid under the text of the page
Placing images on your pages: Standard (Sidebar images)
The easiest way to add images to a page is to place them in the right column (sidebar) of the page.
11
Example of image added to sidebar
1.
2.
3.
4.
Open your site and go to Add/Edit Pages
Locate the page you wish to edit and click the Edit link from the Admin Functions column
Click Place Images on the Page in the workflow menu on the left
Click Select next to images that you want to appear on the page

Pros:
o
o
o
o
Easy to place and remove images
Doesn't interrupt the flow of the page
Can be used to make an image gallery page
Automatic popup windows for full-sized images
Placing images on your pages: Inline images
Images are placed in the content area of the page, alongside the text.
12
Example of Image added within content
1.
2.
3.
4.
5.
Log in to Reason at www.beloit.edu/reason
Open your site and go to Add/Edit Pages
Locate the page you wish to edit and click the Edit link from the Admin Functions column
In the content area, place your cursor where you want the image to go
Click on the Insert Image icon from the content editor toolbar
Insert Image icon
6. Select the image you want to place on the page.
7. Select your Image Options
o Choose Thumbnail or Full Size
o Choose the image Alignment: Left, Right, or None (below the text)
8. Click OK
9. Save your page using either Save and Continue Working or Save and Finish

Pros:
o
o

Can set the order of images on a page
Can place large images directly into page
Cons:
o
o
Images interrupt flow of document
No pop-up images
13
o
Harder to manage images
Creating a Photo Gallery
A gallery page places images in a grid below any text content. Photo galleries allow you to fit
many images onto a page. If you have more images than one page can hold, additional pages
will be created automatically.
1. Log in to Reason at www.beloit.edu/reason
2. Open your site and go to Add/Edit Pages
3. Locate the page you wish to edit and click the Edit link from the Admin Functions
column
4. Click Place Images on the Page in the workflow menu on the left
5. Click Select next to images that you want to appear on the page
6. In the links on the left side of the page, click Edit
7. Next to Type of Page, choose Photo Gallery
8. Save your page, and Preview your results
Example of Photo Gallery Page
14
Adding Assets (files)
1. Click the Assets link in the Left Sidebar from the Main Reason page to view all the assets associated
with your site
2. Click the Add Asset link to upload a new asset to your site
Adding an Asset screen




Name-This is the name of the asset, used for internal reference only
Description-Description of what the document contains
Author- Author of the asset
Publication Date- If applicable, this is the date and time the asset was published
15

Content- You can safely ignore this field for now. In the future it may be used to provide an
alternate web version of the content of the asset.
 File-Click the Browse button to browse for the asset on your computer
3. Click Save and Finish to upload the asset to your site
Adding an asset to a page
There are two ways to put assets (files) on your web pages with Reason.
1. Standard/Automatic way: links to files appear in the right sidebar of the page
2. Inline/Manual method: links to files appear amidst the text of the page
Placing links to assets on your pages: Automatic (sidebar) Method
Links to assets are created in the right column of the page. Each link automatically contains
information about file size, type, and description.
Example of Asset added to sidebar
1.
2.
3.
4.
5.
Log in to Reason at www.beloit.edu/reason
Open your site and go to Add/Edit Pages
Locate the page you wish to edit and click the Edit link from the Admin Functions column
Click Make links to assets in the workflow menu on the left
Click Select next to assets that you want to appear on the page
Pros:
16




Easy to place and remove assets
Highlights links to assets
Provides helpful additional information
Will change automatically if you update an asset
Cons:

Cannot mix links to assets with links to other web content
Placing links to assets on your pages: Manual (inline) Method
A link is created in the main text of the page that takes the visitor to the asset document. This
link looks exactly like other kinds of links.
Example of asset added within content
1. Log in to Reason at www.beloit.edu/reason
2. Open your site and go to Add/Edit Pages
3. Locate the page you wish to edit and click the Edit link from the Admin Functions column
17
4. In the content area, highlight the text where you want the link to the asset to go
5. Click on the Insert hyperlink icon from the content editor toolbar
Insert hyperlink icon
6.
7.
8.
9.
10.
11.
Make sure the “an existing item” tab is selected, then select Assets on the left
Use the Asset drop down menu to select the asset you would like to link to
Fill in a description or change the default description if necessary
Click the More Options link to have the asset open in a new window
Click OK
Save your page using either Save and Continue Working or Save and Finish
Pros:


Can mix links to assets with main text of the page
Can order assets any way you want
Cons:



Does not update automatically when you update an asset
Does not include useful download information for visitors
More work to manage
Tips & Tricks

Create content in Word and then copy and paste it into Reason. This can be helpful if you want to
create tables or do special formatting that is not possible with Reason.
Reason Glossary
Asset
The type of entity that represents files that have been uploaded to the server. Assets can be any file
type — PDF, Word, plain text, or any other valid file extension. Some file types, like images and media
files, have their own data type in Reason. Although these file types can be uploaded as assets, they are
intended to be uploaded using their appropriate types, which provide richer metadata and more
powerful management.
Associate
The general term for making a relationship between two items in Reason. For example, adding a post to
a blog could also be described as associating the new post with the blog. Users more familiar with email
terminology can think of association as attachment – attaching a photo to an email could also be
18
described as making a relationship between the photo and the email, or associating the photo with the
email.
Borrowing and Sharing
Reason entities can be shared between sites. Widely used, this can help you avoid duplicating items on
your domain, and can reduce the possibility of updates occurring in one site but not another.
An item is considered "shared" if a) the site is set up to share the that item's type, and b) the item is
flagged "shared" rather than "private."
Shared items can be browsed from any other site that has access to that item's type. For example, in
order to browse and borrow shared images a site must be set up to manage images itself.
Child Site/Page
Children are sub-sites/pages that are related to a parent page or site. For instance, on the ISR How-To
page, Wireless Documentation is a child of the How-To page and the How-To page is a child of the ISR
site.
Diagram Example of Parent/Child relationship
Entire Website/Entire Domain
What we refer to as “sites” throughout Reason and its documentation are actually subsets of your
website. To try to minimize confusion, we’ll be careful to refer to your “entire website” or “entire
domain” when we want to refer to your entire web presence instead of an individual minisite.
19
Entity / Item
The most basic unit of organization in Reason. Everything that makes up the entire website that an
instance of Reason manages is represented by an entity, whether it is a text blurb, a page, or a minisite.
Entities are categorized into data types that describe each entity and determine how it can be used.
Those familiar with relational databases will understand "Entity" as a similar concept to "Record" or
"Row."
Page
The type of entity that represents an individual web page. A page's content and behavior can be altered
by modifying its page type. A simple page may primarily display text entered directly onto the page, but
more sophisticated pages can be assembled from a collection of almost any other items.
Page Type
A page type defines which modules should be placed on a page, and in which particular locations. Each
page in Reason is assigned a single page type. For example, the show_children page type adds the
children module (which lists the children of the current page) to the location immediately below the
main page content.
Users with the administrator role can choose from the full set of Reason page types when editing a page,
whereas users with other roles can only choose from a limited subset of page types.
Parent Site/Page
A page or site which represents a broad category/topic which has child pages or sites which cover
specific areas within that category/topic.
Minisite / Site / Reason Site
A section of your entire website that is treated as its own subsite within Reason. Minisites each have
their own home page, primary maintainer, and their own administrative area (sometimes called the
Reason backend) where users who have been given access to the minisite can create and edit the items
that belong to that minisite.
A minisite's primary structure is provided by a hierarchy of pages, on which any number of features can
be placed (using page types,) like event calendars, publications, forms, image galleries, etc.
Theme
A theme defines the way Reason pages should look and the HTML framework they should use. Visual
styling is handled by external CSS urls associated with the theme, and the HTML framework is handled
by the minisite template associated with the theme.
Once defined, a theme can be applied to any number of sites.
Themes are assigned at the site level. There is currently no way to assign different themes to separate
pages in the same site.
20