How to put images on your Reason pages

1. Log into Reason
2. Add image(s) to your Reason site by either:
   • Uploading image(s) into Reason, or
   • Borrowing image(s) from other Reason sites
3. Place the image(s) on your page

Logging into Reason

1. Go to go.carleton.edu/reason
2. Log in using your username and password
3. If you have editing access to multiple sites, choose the site you want to work on. For this lesson, choose Reason Training.

Getting images into your site: Uploading images from your computer and/or network drives

1. Choose Images in the Add/Edit menu
2. Click Add Image
3. Next to the Image field click Browse...
   • Select an image on your computer or shared drive
   • Notes: This image must be in a web format (jpg, gif, png). If the image is in another format, you will need to convert it. Also, this image can be any size; Reason will resize it down to an appropriate scale for the web.
   • Click Open
4. Fill in the rest of the Adding Image form:
   • Name: Used for internal reference. You can enter information that will be useful to Reason users here, like: "Matt Ryan Portrait".
   • Author: Used to credit the photographer.
   • Short Caption: Used under thumbnail versions of the image. This should be short, like "Matt Ryan"
   • Long Caption: Used under large-size versions of the image. This could be more descriptive, like "Matt Ryan, Associate Director of Web Communications and Development." This does not have to be filled out if the short caption is enough.
   • Keywords: For help in searching for images.
   • Photo Taken: Allows you to enter the date and time that the photo was taken. If the image is from a digital camera, Reason may be able to find out automatically when the picture was shot.
   • Thumbnail: You can ignore this field; Reason creates thumbnails automatically for you.
5. Click Save and Continue Editing and check your work
6. Click Finish to return to the image listing

Getting images into your site: Borrowing from other Reason sites

1. Choose Images under Borrow
2. If you have previously borrowed images from another site (which we have on the Reason Training site) those images will appear first.
3. Scroll down to the Unselected images (in other words, those that are not borrowed by your site yet)
4. Use the filters to find images you want to use, or just page through the available images
5. When you find an image you want to use, click Select next to that image. It will become available to be placed on your site, and is moved up to the Selected list here.

Placing images on your pages

There are three main ways to put images you your Reason pages.

1. Standard/Automatic way: images appear in the right column of the page

2. Inline/Manual method: images appear amongst the text of the page

3. Photo Gallery: images appear in a grid under the text of the page

The standard way to place images on a Reason page

• How to do it:
  • Choose Pages in the Add/Edit menu
  • Click Edit on a a page
  • 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
• What happens:
  • Images are placed in the right column of the page
• Pros:
  • 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
• Cons:
  • Cannot reorder images

The "Inline" method of placing images on a Reason page

• How to do it:
  • Choose Pages in the Add/Edit menu
  • Click Edit on a a page
  • In the content area, place your cursor where you want the image to go
  • Click on the Insert Image button (a little mountain)
  • Choose the image you want to place on the page
• What happens:
  • Images are placed in the middle of the page, amongst the textual content.
• Pros:
  • Can set the order of images on a page
  • Can place large images directly into page
• Cons:
  • Images interrupt flow of document
  • No pop-up images
  • Harder to manage images

Making a photo gallery

• What is a photo gallery?
  • A photo gallery page places images in a nice grid below any text content
  • Example: the Art Gallery Collection page
• How do I make my page a gallery?
  • Place images on the page in the standard way
  • In the workflow links on the left side of the page, click Edit
  • Next to Type of Page, choose Photo Gallery
  • Save your page, and check your results!
• Pros:
  • More images can fit on a page
  • If you have many images, they are separated automatically into pages
  • Visitors can search images in the gallery
  • Images can be introduced by the textual content of the page
• Cons:
  • If you have a lot of text on the page, images are difficult to navigate