media:image

Description

The Image tag displays images from a given field in a result or a src. It will automatically resize and cache the image for performance.

The following module will need to be added to your pom.xml in order to use the twigkit image-service.

<dependency>
     <groupId>twigkit</groupId>
     <artifactId>twigkit.media</artifactId>
     <version>${project.parent.version}</version>
</dependency>

If your image is within an expression you will need to use the trusted filter eg (<media:image src="{{imageUrl | trusted}}"></media:image>)

If you are combining plain text with a variable it is recommend that you do this within a function in a controller. You can see this in the example below. This will remove the chance of getting a 404 in the JavaScript console caused by a request for the image being sent before the values in the src attribute were evaluated.

Example

Controller

$scope.myImageUrl = function(result){
   return 'http://placehold.it/' + result.fields.x.val + 'x' + result.fields.y.val;
}

View

<media:image src="{{myImageUrl(result) | trusted}}"></media:image

Usage

as element:
<media:image
       [result="{object}"]
       [field-name="{string}"]
       [field-prefix="{string}"]
       [field-suffix="{string}"]
       [src="{string}"]
       [lazy-load="{boolean}"]
       [fallback-image-url="{string}"]
       [width="{number}"]
       [height="{number}"]
       [alt="{string}"]
       [url="{string}"]
       [cache-original="{boolean}"]
       [image-service-url="{string}"]
       [use-headers="{boolean}"]>
</media:image>

Parameters

Param Type Details
result
(optional)
object

The result object the field with the image is coming from.

field-name
(optional)
string

The field in the result to obtain the image url.

field-prefix
(optional)
string

If the field contains a relative URL, then prefix it with this value.

field-suffix
(optional)
string

If the field contains a relative URL, then append this to that value.

src
(optional)
string

Rather than specify a field-name, provide a URL to the desired image. If you are using an angular expression you will need to add the trusted filter. eg (<media:image src="{{imageUrl | trusted}}"></media:image>)

lazy-load
(optional)
boolean

Whether the images should be lazy loaded. Lazy loading works best if image size is defined. Default:false.

fallback-image-url
(optional)
string

If no image is found, use the fallback URL provided. If no fallback image url is provided and the image is not found no image will be displayed.

width
(optional)
number

Width of the image to resize to. You can specify either width, height or both.

height
(optional)
number

Height of the image to resize to. You can specify either width, height or both.

alt
(optional)
string

Provide alternative text for the image.

url
(optional)
string

Provide a URL to make the image clickable.

cache-original
(optional)
boolean

Whether the write the original image (prior to resizing) to cache. Defaults to true.

image-service-url
(optional)
string

Specify an alternative URL for the Twigkit Media Module image service.

use-headers
(optional)
boolean

Whether to pass HTTP headers to the underlying image service (default: false).

Example

Source