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
-
Go to the Varieties screen of the image.
-
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 to200
pixels, the image will be stretched. The height will also double to retain the aspect ratio. If your image is100
pixels wide and you select to constrain to50
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 than100
pixels. So if the original height was400
pixels and the width was200
pixels, the height would become100
pixels and the width50
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 than100
pixels. So if the original height was400
pixels and the width was200
pixels, the height would become200
pixels and the width100
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 and200
wide, it would be cropped vertically to200
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:
-
Click Browse and the file upload pop-up will appear.
-
Locate the file that you want to use.
-
Left-click on the image.
-
Click on the Open button.
-
The file’s path will appear in the upload file field.
-
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.
Keyword replacement | Information shown |
---|---|
|
This will display the variety of an image. |
|
This will display the url of the variety. |
|
This will display the pixel width of the variety. |
|
This will display the pixel height of the variety. |
|
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. |