Image

An Image asset is used to upload image files into the Squiz Matrix system. To be able to display an image in the content of your Site, you need to create an Image asset. Once it has been created, it can be used as many times as you like within your Squiz Matrix system.

Adding an Image

When you add an Image, additional fields appear on the Create new Image screen, as shown in the figure below.

The Create new Image screen

  Enter the following details for the Image asset

• Title: enter the name for the Image asset. This will be used as the friendly name of the Image 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 an Image.
• Upload File: select which file to use as the Image. 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 an Image.
• Choose a pre-uploaded file: if the Image 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 Image asset, click the Use Image Editor button. For more information on how to do this, refer to the Using the Image Editor to create Images section in this chapter.
• Alt: enter the alt tag for the Image. This will be used in the HTML alt attribute of the <img> tag in the source code. This field is not required when creating an Image.
• Caption: enter a caption for the Image. This text can be displayed in the Site through the keyword replacement %asset_image_caption%. This field is not required when creating an Image.

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

Once created, you can configure the settings of your Image 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 an Image.

Tip: To find out which assets in the system are using an Image in their content, look at the Linking screen. The assets using the Image will be listed in the Current Linking section.

Details Screen

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

Details

This section allows you to change various details of the Image 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 Image was created will appear in this field. You can change the Title by clicking into this field and entering the new Title for the Image.
• Filename: by default, the name of the file that was used when the Image 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 Image. 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 outlines the details of the Image including 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 Image  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 Image and whether or not Public Read access has been granted, Squiz Matrix will use different style URLs.    
  • Yes: if the Status of the Image 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 Image 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 Image. 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 Image 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 Image.    

  Tip: If the Image is being used within the content of a page, the Alt text of that Image will not be updated when you change the Alt text on an Image asset. For example, if you have inserted an Image called Squiz Logo on the Home page and then change the Alt text of the Squiz Logo Image asset, the Alt text on the Home page will not change.    

• Caption: by default, the Caption that was entered into the Caption field when the Image was created will appear in this field. You can change the Caption by clicking into this field and entering the new Caption for the Image.
• Embedded Data: for more information on the Embedded Data field, refer to the Extracting Metadata from a JPEG section in this chapter.

Edit Image Screen

This screen allows you to edit the image being used for the Imagethrough 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, 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 Image. For example, if the Image 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 Image.

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 filled out the required fields, click Commit. A new Variety asset will be added under the Image 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 Image, 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.

Keyword Replacements for Image Varieties

Keyword replacements can be used to display information about an Image Variety. The keyword replacements that are available are listed below. Please note that <variety_name> is the name of the Variety that you want to use.

Keyword Replacement	Information shown
%image_v_<variety_name>%	This will display the Variety of an image.
%image_v_<variety_name>_url%	This will display the URL of the Variety.
%image_v_<variety_name>_width%	This will display the pixel width of the Variety.
%image_v_<variety_name>_height%	This will display the pixel height of the Variety.
%asset_thumbnail_v_<variety_name>%	This will display the Variety of a thumbnail.

Using Pre-uploaded Files

When creating a new Image, on the Create new Image 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 Image screen.

  The Create new Image screen when using a pre-uploaded file

The fields available are as follows:

• Title: enter the name for the Image asset. This will be used as the friendly name of the Image 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 an Image.
• Choose a pre-uploaded file: select which file to use from the list provided. This field is required when creating an Image.
• Upload a new file: if the Image 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 an Image section in this chapter.
• Alt: enter the alt tag for the Image. 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 an Image.
• 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 an Image.

Using the Image Editor

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

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

The Image Editor

The fields available are as follows:

• Title: enter the name for the Image asset. This will be used as the friendly name of the Image 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 an Image.
• 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 image 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, visit http://rsb.info.nih.gov/ij/docs/index.html. This field is required when creating an Image.
• File Name: this 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.
• Alt: enter the alt tag for the Image. 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 an Image.
• Caption: enter a caption for the Image. This text can be displayed in the Site through the keyword replacement %asset_image_caption%. This field is not required when creating an Image.

Updating the Image File

Once an Image 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 Image. 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 Image will be updated with the new version of the file.

Extracting Metadata from a JPEG File

If you create an Image asset using a JPEG file created in Adobe Photoshop, Squiz Matrix will read the dc:*XMP metadata from the file and list it in the Embedded Data section on the Details screen, as shown in the figure below.

The Embedded Data section of the Details screen

These values can be used in the metadata for the Image asset. To do this, copy the Keyword that you want to use from the list provided and paste it into the metadata field on the Metadata screen. (For more information on the Metadata screen, refer to the Asset Screens). Squiz Matrix will replace the Keyword in the metadata field with the Value that appears in the list. For example, if you had the Keyword %image_embedded_dc-title% in a metadata field, the Value Marvin will appear in that field. Currently, only data from the Dublin Core (dc) metadata set is available via the Keywords provided. For this to work, the PHP Metadata Toolkit needs to be installed on your server (available from http://www.ozhiker.com/electronics/pjmt/). Once this has been installed, a System Administrator needs to enter the path to the tool on the External Tool Configuration screen before it can work. For more information on this screen, refer to the System Configuration manual.

Please note that this metadata extraction occurs when the Image asset is being created. Any existing images in your system will need to be uploaded if the metadata extraction is desired on that image.

PreviousNext