Skip to main content

​
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

ParamTypeDetails
result (optional)objectThe result object the field with the image is coming from.
field-name (optional)stringThe field in the result to obtain the image URL.
field-prefix (optional)stringIf the field contains a relative URL, then prefix it with this value.
field-suffix (optional)stringIf the field contains a relative URL, then append this to that value.
src (optional)stringRather 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. For example, (`<media:image src="{{imageUrl | trusted}}"></media:image>`)
lazy-load (optional)booleanWhether the images should be lazy loaded. Lazy loading works best if image size is defined. Default:false.
fallback-image-url (optional)stringIf 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)numberWidth of the image to resize to. You can specify either width, height or both.
height (optional)numberHeight of the image to resize to. You can specify either width, height or both.
alt (optional)stringProvide alternative text for the image.
url (optional)stringProvide a URL to make the image clickable.
cache-original (optional)booleanWhether the write the original image (prior to resizing) to cache. Defaults to true.
image-service-url (optional)stringSpecify an alternative URL for the Twigkit Media Module image service.
use-headers (optional)booleanWhether to pass HTTP headers to the underlying image service (default: false).