Image asset

An image asset is used to upload image files into the Matrix system. To display an image in your site’s content, you need to create an image asset. Once created, an image asset can be used as many times as needed within your Matrix system.

Details screen

This section lets you change various details of the image, including the title and which file to use. The fields available are:

Title

The Title (asset short name) of the image.

Filename

The filename of the uploaded image file.

Upload file

Use this field to upload a new image file for the image.

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.

Alt

The alternative text for the image, describing what it is. This text is for accessibility. Read more about alt and title attributes for images on https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/.

Changing the alt text of an image asset will not change the alt text of the image used within the site.
Caption

The caption or short description 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.

To determine which assets in the system are using an image in their content, look at the Linking screen. The assets using the image are in the current linking section.

Varieties screen

The Varieties screen lets you create different sized versions of the image. For example, if your image has a width of 400 pixels, you can create a variety with a width of 100, so you can use a smaller version of the image.

Creating a new variety

To create a new variety

  1. Go to the Varieties screen of the image.

  2. Fill out the following fields in the new variety section:

    Name

    The name for the variety. This name will be used as the asset name of the variety.

    Variety type

    You can choose from the following types of varieties:

    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. For example, if an image is 100 pixels wide, and you select to constrain to 200 pixels, the image will be stretched. The height will also double to retain the aspect ratio. If your image is 100 pixels wide and you select to constrain to 50 pixels, it will be compressed to 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 image’s largest dimension 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.

    • Both min size: The image variety is created so that the smallest 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 less than 100 pixels. So if the original height was 400 pixels and the width was 200 pixels, the height would become 200 pixels and the width 100 pixels. Note that the larger dimension is constrained with the same aspect ratio as the smaller dimension.

    • Neither: The image variety is created with the specified width and height. Note that the aspect ratio is not preserved in this case.

    • Square (centre weighted): The image variety is created as a square-shaped image, cropped (center-weighted), and constrained by the dimension specified. Therefore, if the original image were 400 pixels high and 200 wide, it would be cropped vertically to 200 pixels. It would then be resized, as per the specified dimension.

    Upload alternate image

    If you select this option, a new upload field will appear where you can upload a new image as the variety.

    Choose this option if you have an alternate image to upload for the variety. To upload a new file:

  3. Click Browse and the file upload pop-up will appear.

  4. Locate the file that you want to use.

  5. Left-click on the image.

  6. Click on the Open button.

  7. The file’s path will appear in the upload file field.

  8. Once you have filled out the required fields, click Save.

A new variety asset will be added under the image in the asset tree. A new section called current varieties will also appear on the Varieties screen.

Current varieties

This section will list all current varieties of the image asset and update it using the available fields.

The name of each current variety will appear in blue under Current Varieties.

Keyword replacements for image varieties

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

Table 1. Keyword replacements
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.

Extracting metadata from a jpeg file

Matrix reads the dc:*xmp metadata from Adobe Photoshop image assets that use JPEG files and lists them in the Embedded data section on 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.

Read the Asset metadata screen documentation for more information on the Metadata screen.

This feature requires PHP Metadata Toolkit to be installed on your server. The tool is available from http://www.ozhiker.com/electronics/pjmt/. The tool’s path must then be entered on the External tool configuration screen. System administrator permissions are required.

Read the Configuring system settings documentation for more information on this screen.

Metadata extraction occurs when the image asset is created. Any existing images in your system will need to be re-uploaded for metadata extraction.

© 2015- Squiz Pty Ltd