Product Selector

Fusion 5.12
    Fusion 5.12

    media:image

    Table of Contents

    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 #/api/lightning.filter:trusted[trusted filter]. For example, (<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).