Thumbnail

A Thumbnail is used to create thumbnails for your Site. These Thumbnails can be assigned to an asset on the Details screen and then displayed as content within the Site. For example, you can create a MS Word Document thumbnail, assign it to the MS Word Documents assets that are in the Site and then display the thumbnail on the search results page so users know which assets are MS Word Documents.

Adding a Thumbnail

When you add a Thumbnail, additional fields will appear the Create new Thumbnail screen, as shown in the figure below.

The fields available on the Create new Thumbnail screen

Enter the following details for the Thumbnail asset.

• Title: enter the name for the Thumbnail asset. This will be used as the friendly name of the Thumbnail and will appear in the Asset Map. This name will also appear where ever the keyword replacement %asset_short_name% is used. This field is required when creating a Thumbnail.
• Upload File: select which file to use as the Thumbnail. To do this, click on the Browse button; the File Upload pop-up will appear. Locate the file that you want to use, left click on it and click on the Open button. The path of the file that you have selected will appear in the Upload File field. You can only upload files of type gif, jpg, jpeg and png. This field is required when creating a Thumbnail.
• Choose a pre-uploaded file: if the Thumbnail has already been uploaded to the server, you can select that file by clicking on the Choose a pre-uploaded file button. For more information on how to do this, refer to the Using Pre-uploaded Files section in this chapter.
• Use Image Editor: if you would prefer to use the Image Editor to upload and modify the image to use on the Thumbnail asset, click the Use Image Editor button. For more information on how to do this, refer to the Using the Image Editor to create Thumbnails section in this chapter.
• Alt: enter the alt tag for the Thumbnail. This will be used in the HTML Alt attribute of the <img> tag in the HTML source code of the Site. This field is not required when creating a Thumbnail.
• Caption: enter a caption for the Thumbnail. This text can be displayed in the Site through the keyword replacement %asset_thumbnail_caption%. This field is not required when creating a Thumbnail.

Once you have entered the required information, click Commit. The Thumbnail will appear in the Asset Map on the left hand side of the screen.

Once created, you can configure the settings of your Thumbnail on its associated asset screens. These screens are often the same or similar to those for a Standard Page and are described in the Asset Screens manual. In this chapter, we will describe the Details, Edit Image and Varieties screens, which are different for a Thumbnail.

Details Screen

The Details screen for a Thumbnail allows you to set up this asset. For more information about the Status, Future Status and Thumbnail sections of this screen, see the Details chapter in the Asset Screens manual.

Details

This section allows you to change various details of the Thumbnail including the Title and which file to use.

The Details section of the Details screen

The fields available are as follows:

• Title: by default, the Title that was entered into the Title field when the Thumbnail was created will appear in this field. You can change the Title by clicking into this field and entering the new Title for the Thumbnail.
• Filename: by default, the name of the file that was used when the Thumbnail was created will appear in this field. You can change the name of the file by clicking into this field and entering the new file name.
• Upload File: this field allows you to upload a new version of the Thumbnail. This file can be an updated version of the image or a different image. To upload a new file, click on the Browse button - the File Upload pop-up will appear. Locate the file that you want to use, left click on it and click on the Open button. The path of the file that you have selected will appear in the Upload File field. You can only upload files of type gif, jpg, jpeg and png. 
• Current File: this section shows you a preview of the Thumbnail as well as the size of the file, when it was last updated and the width and height of the image. If you click on the Current File link, a preview of the image will appear in a new window.  

  Tip: If you have selected a new Thumbnail to upload using the Upload File field, the details of this file will not appear in the Current File section until you click Commit.  

• Allow Unrestricted Access: depending on what this setting is, the Status of the Thumbnail and whether or not Public Read access has been granted, Squiz Matrix will use different style URLs.  
  • Yes: if the Status of the Thumbnail is Under Construction and Public Read access has been granted then a human readable URL will be used, for example, http://www.example.com/dog.jpg. This means that it is served dynamically from the Squiz Matrix repository and hence is not optimal in terms of performance.
    If the Status of the Thumbnail is Live and Public Read access has been granted then a static URL will be used, for example http://www.example.com/__data/assets/image/100/dog.jpg where 100 is the asset ID of the Thumbnail. The static URL gives optimal performance as it is served directly by the web server.
  • No: if this setting is No, then the human readable URL will be used. This may be required if an external system is referencing the file and needs to use the dynamic human readable URL.
  The default setting of the Allow Unrestricted Access field is Yes.
• Alt: by default, the Alt text that was entered into the Alt field when the Thumbnail was created will appear in this field. You can change the Alt text by clicking into this field and entering the new Alt text for the Thumbnail.
• Caption: by default, the Caption that was entered into the Caption field when the Thumbnail was created will appear in this field. You can change the Caption by clicking into this field and entering the new Caption for the Thumbnail.

Edit Image Screen

This screen allows you to edit the image being used for the Thumbnail through the use of the Image Editor. This editor is based on the application ImageJ. For more information about the menu options and the tools available on the toolbar, please visit http://rsb.info.nih.gov/ij/docs/index.html.

The Edit Image screen

The File Name field allows you to change the name of the file that is being used. If the image is a gif file, you can convert it to a jpg file by selecting .jpg from the drop down list.

Varieties Screen

The Varieties screen allows you to create different sized versions of the Thumbnail. For example, if the Thumbnail has a width of 400, you can create a Variety that has a Width of 100 so you can use a smaller version of the image.

Creating a New Variety

To create a new variety, go to the Varieties screen of the Thumbnail.

 The New Varieties section of the Varieties screen

In the New Variety section, fill out the following fields:

• Name: enter the name for the Variety. This will be used as the asset name of the variety.
• Variety Type: you can choose from the following types of variety:  
  • Resize Current Image: if you select this option the fields shown in the figure above will appear. This option will create the Variety based on the dimension you select in the Constrain by field.  
    • Width: the image variety is created with the specified width. The image will be either stretched or compressed to match the width specified – so for example, if the image is 100 pixels wide and you select to constrain to a width of 200 pixels, the image will be stretched to create the variety and will be twice its original width. The height will also be doubled to retain the aspect ratio. If your image is 100 pixels wide and you select to constrain to a width of 50 pixels, the image will be compressed to create the variety and will be half its original width. The height will be also be halved to retain the aspect ratio.
    • Height: the image variety is created with the specified height, and will be either stretched or compressed accordingly. The width will be constrained in the same manner to maintain the aspect ratio.
    • Both: the image variety is created so that the largest dimension of the image is constrained by the dimension specified. For example, entering a value of 100 pixels will ensure that neither dimension of the image is greater than 100 pixels. So if the original height was 400 pixels and the width was 200 pixels, the height would become 100 pixels and the width 50 pixels. Note that the smaller dimension is constrained with the same aspect ratio as the larger dimension.
    • Neither: the image variety is created with the specified width and height. Note that the aspect ratio is not preserved in this case.
  • Upload Alternate Image: if you select this option the fields shown in the figure below will appear.  

    
     The Upload Alternate Image fields  

    You would choose this option if you had an alternate image to upload for the Variety. To upload a new file, click on the Browse button - the File Upload pop-up will appear. Locate the file that you want to use, left click on it and click on the Open button. The path of the file that you have selected will appear in the Upload File field.

Once you have field out the required fields, click Commit. A new Variety asset will be added under the Thumbnail in the Asset Map. A new section called Current Varieties will also appear on the Varieties screen.

Current Varieties

For each Variety that has been created for the Thumbnail, the name of that Variety will appear in blue text under the Current Varieties section, as shown in the figure below.

 The Current Varieties section

This section allows you to update the details of the Variety using the fields that are available. You can also view the Variety by clicking on the Click to open in a new window link or delete it by clicking the Delete box and clicking Commit.

Using Pre-uploaded Files

When creating a new Thumbnail, on the Create new Thumbnail screen there is an option called Choose a pre-uploaded file. This option allows you to select a file that has already been uploaded to the Squiz Matrix server. For more information on how to upload a file to the server, refer to the Server Administrator manual.

When you click on the Choose a pre-uploaded file button, the fields shown in the figure below will appear on the Create new Thumbnail screen.

The Create new Thumbnail screen when using a pre-uploaded fiel

The fields available are as follows:

• Title: enter the name for the Thumbnail asset. This will be used as the friendly name of the Thumbnail and will appear in the Asset Map. This name will also appear where ever the keyword replacement %asset_short_name% is used. This field is required when creating a Thumbnail.
• Choose a pre-uploaded file: select which file to use from the list provided. This field is required when creating a Thumbnail.
• Upload a new file: if the Thumbnail has not been uploaded to the server, click on the Upload a new file button to upload the file manually. For more information on how to do this, refer to the Adding a Thumbnail section in this chapter.
• Alt: enter the alt tag for the Thumbnail. This will be used in the Alt attribute of the <img> tag in the HTML source code of the Site. This field is not required when creating a Thumbnail.
• Caption: enter a caption for the Thumbnail. This text can be displayed in the Site through the keyword replacement %asset_thumbnail_caption%. This field is not required when creating a Thumbnail.

Using the Image Editor

When creating a new Thumbnail, on the Create new Thumbnail screen there is an option called Use Image Editor. This option allows you to use the Image Editor to upload a thumbnail.

When you click on the Use Image Editor button, the fields shown in the figure below will appear on the Create new Thumbnail screen.

 The Image Editor

The fields available are as follows:

• Title: enter the name for the Thumbnail asset. This will be used as the friendly name of the Thumbnail and will appear in the Asset Map. This name will also appear where ever the keyword replacement %asset_short_name% is used. This field is required when creating a Thumbnail.
• Use Simple Upload: if you no longer want to use the Image Editor, click the Use Simple Upload button.
• Image Editor: select which image file to use. To do this select File -> Open Local – the Open pop-up will appear. Locate the file that you want to use, left click on it and click on the Open button. The thumbnail will appear in the Image Editor. This editor is based on the application ImageJ. For more information about the menu options and the tools available on the toolbar, please visit http://rsb.info.nih.gov/ij/docs/index.html. This field is required when creating a Thumbnail.
• File Name: this field allows you to change the name of the file that is being used. If the thumbnail is a gif file, you can convert it to a jpg file by selecting .jpg from the drop down list.
• Alt: enter the alt tag for the Thumbnail. This will be used in the HTML Alt attribute of the <img> tag in the HTML source code of the Site. This field is not required when creating a Thumbnail.
• Caption: enter a caption for the Image. This text can be displayed in the Site through the keyword replacement %asset_thumbnail_caption%. This field is not required when creating a Thumbnail.

Updating the Thumbnail File

Once a Thumbnail has been created, you can change the file that it is using at any time. To do this, go to the Details screen of the Thumbnail. In the Upload File field, click on the Browse button - the File Upload pop-up will appear. Locate the file that you want to use, left click on it and click on the Open button. The path of the file that you have selected will appear in the Upload File field. You can only upload files of type gif, jpg, jpeg and png.

Once you have clicked Commit, any assets that reference the Thumbnail will be updated with the new version of the file.

PreviousNext