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
<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 ( |
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). |