App Studio

Version 4.2
How To
Documentation
    Learn More

      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

      ParamTypeDetails
      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

      


      

      

      


      

      Demo