Help Home

Tutorial

  1. Introduction
  2. Creating Your First Page
  3. Editing Textile Content
  4. Adding an image
  5. Using Snippets
  6. Using Layouts
  7. Using the Faculty Extension

Tutorial #4: Images

Let’s add an image to the test page we created earlier.

Creating an image asset

  1. Log into the CMS and click on the “Images” tab. Here you will see a list of images that have been already added by other people. The list is long, but we’ll show you how to keep it organized in a minute.
  2. At the bottom of the page, click on “New Asset”. An “asset” can be any file, but in this case we will add an image.
  3. Give the image a meaningful title.
  4. Click on the “more” link.
  5. Give the image a meaningful caption. This caption can be automatically added to your content later.
  6. Add two tags to your image by entering “tutorial, test image” into the tags field. Tags are used to organize your images.
  7. Select an image file from your computer that you would like to upload into the system by clicking the “Browse” button.
  8. Click on “Create Asset” to upload the file.

Adding images to pages

After you create the image, it will take you back to the images tab.

  1. Click on the “tutorial” link in the “tags” column next to the image you just created. This filters the list of images by only those who have that same tag. You can create any tag to help yourself organize your images. For example, if you use your name as a tag, then you can keep track of all the images you have uploaded. This will save you from hunting through the list of images.
  2. Next to your image, click on “Add to Bucket”. The “Bucket” is a place for holding images you are currently working with. Again, this helps keep the list of images you are interested in down to a reasonable number. When you click on “Add to Bucket” the image appears in the bucket area at the bottom of the page.
  3. Right-click (Ctrl-click on a Mac) on the image in the bucket at the bottom of the page, and choose “Copy Link Location” or the equivalent for your browser.
  4. Now click on the “Pages” tab of the CMS.
  5. Navigate to your test page, and click on it to edit it.
  6. In your test page, type two exclamation points, ”!!” and paste the image link location between them, so that it looks something like the following: !http://152.16.15.129/assets/123/myPhoto.jpg!
  7. Click “Save and continue editing”
  8. View your page in a browser as you did before. The image should now appear on your page.

The tutorial on page layouts will explain how to put the image in a specific area on the page.

Advanced image topics

You can use Radiant tags to add images that will automatically be resized or “thumbnailed”. To begin with, you will need to use a different scheme to add your image.

Creating an image thumbnail

  1. Click on the “Images” tab in the CMS
  2. Click on your test image title in the list. This will take you to a page with the image on it.
  3. The filename is shown above the image. Copy this.
  4. Let’s say the image file name is “myPicture.jpg”. In your test page, create a tag like the following, using your image file name:
    <r:asset:image name="myPicture.jpg" size="thumbnail"/>
  5. Now save and continue editing.
  6. View your test page. It should have a thumbnail of your image on it.

You can also use the size=”icon” for an even smaller version of the image.

Using the image title or caption

To use the image title or caption in your content, copy the following into your test page, and replace the “myPicture.jpg” with your image file name. You can put any text or formatting around the title and caption tags.

<r:asset name=”myPicture.jpg”/>
<r:image size="thumbnail"/>
 <r:title/>
 <r:caption/>
</r:asset>

For a more advanced example of this usage, see the “staff” page in the CMS.