VariablesLast updated: 4 February 2023

JCOGS Image makes a large number of variable elements available for each image that it processes.

Variable elements can be included within an output= parameter, and or included within a JCOGS image tag-pair, and can be used to help construct either custom <img> or <picture> tags, or generate other forms of useful output within your template (such as picture captions).

If you use a tag suffix to differentiate nested levels of Pair tags you can access variables from specific nested levels by prefixing the variable with the appropriate tag suffix used. So for example this tag uses a differently processed image for browsers that have scripting enabled compared to those that do not:

{exp:jcogs_img:pair src="{image}" width="{image_width}" height="{image_height}" crop="yes" allow_scale_larger="yes" save_type="jpg"}

    {exp:jcogs_img:pair:inner src="{another_image}" width="{another_image_width}" height="{another_image_height}" crop="yes" allow_scale_larger="yes" quality="85"} 
            <img src="{inner:made}" data-src="{made}" width="{width}" height="{height}">
            <noscript>
                &amp;amp;amp;lt;img src="{made}" class="image" width="{width}" height="{height}"&amp;amp;amp;gt;
            </noscript>
    {/exp:jcogs_img:pair:inner}
{/exp:jcogs_img:pair}

Base64 output

Currently the only way to generate base64 output is via a JCOGS Image variable.

aspect_ratio

CE Image Compatibility: New feature

The aspect ratio of the processed image.

Syntax

{aspect_ratio}

aspect_ratio_orig

CE Image Compatibility: New feature

The aspect ratio of the source image.

Syntax

{aspect_ratio_orig}

attributes

CE Image Compatibility: Full

Contains content of attributes parameter if set, plus any unrecognised parameters in the tag, plus for tag-pair operations any non-JCOGS image variables and unrecognised parameters enclosed by the tags.

Syntax

{attributes}

Illustration

The JCOGS Image tag:

{exp:jcogs_img:image src="{images}" width="300" attributes="style='margin-top:3em'" class="cats" data-mood="fierce"} class="eggs" data-type="lions" {attributes} {/exp:jcogs_img:image}

will add result in the class, style and other non-standard tag parameters being represented like this

data-type="lions" data-mood="fierce" class="cats eggs" style="margin-top:3em"

Explanation: Parameters that JCOGS Image does not recognise that are within the JCOGS Image tag or are enclosed by a JCOGS Image tag pair are simply collected up and passed straight into the {attributes} variable. Any class= or style= parameters found within the tag or enclosed by the tag pair are collected up and then reconciled before being added to the {attributes} variable to ensure that there is just one instance of each of these two parameters presented in the output variable.

average_color

CE Image Compatibility: Full

Returns the average colour present in the processed image in hexadecimal colour format.

Syntax

{average_color}

base_64

CE Image Compatibility: Full

Provides a base64 encoded version of the source image after JCOGS Image tag parameters have been applied to the source image.

Syntax

{base_64}

base_64_orig

CE Image Compatibility: Full

JCOGS Image - Variables - Provides a base64 encoded version of the source image before JCOGS Image tag parameters have been applied.

Syntax

{base_64_orig}

dominant_color

CE Image Compatibility: New feature

A relative link to a dominant colour version the processed image.

For more information on Dominant Colour images see the Advanced Topic “Lazy Loading”, the documentation for the “lazy” parameter, or for the filter “dominant_color”.

Syntax

{dominant_color}

extension

CE Image Compatibility: Full

The filename extension of the processed image.

Syntax

{extension}

extension_orig

CE Image Compatibility: Full

The filename extension of the source image.

Syntax

{extension_orig}

filesize

CE Image Compatibility: Full

The size of the processed image in power based units (e.g. Kbytes)

Syntax

{filesize}

filesize_bytes

CE Image Compatibility: Full

The filesize of the processed image in bytes.

Syntax

{filesize_bytes}

filesize_bytes_orig

CE Image Compatibility: Full

The filesize of the source image in bytes.

Syntax

{filesize_bytes_orig}

filesize_orig

CE Image Compatibility: Full

The filesize of the source image in power based units (e.g. Kbytes)

Syntax

{filesize_orig}

height

CE Image Compatibility: Full

The height in pixels of the processed image.

Syntax

{height}

height_orig

CE Image Compatibility: Full

The height in pixels of the source image.

Syntax

{height_orig}

lazy_image

CE Image Compatibility: New feature

A relative link to a lazy loading placeholder image chosen for a tag - either the Low Quality Image Placeholder (LQIP) or the Dominant Colour version of the image depending on what options have been chosen for this tag / server.

Syntax

{lazy_image}

lqip

CE Image Compatibility: New feature

A relative link to a low quality image placeholder version the processed image.

For more information on LQIP images see the Advanced Topic “Lazy Loading”, the documentation for the “lazy” parameter, or for the filter “lqip”.

Syntax

{lqip}

made

CE Image Compatibility: Full

Provides the relative path from the web_root folder to the cached copy of the processed image.

Syntax

{made}

made_with_prefix

CE Image Compatibility: New feature

Provides the path from the web_root folder to the cached copy of the processed image inclusive of any image_path_prefix that has been defined.

Syntax

{made_with_prefix}

made_url

CE Image Compatibility: Full

Provides a full URL pointing at the cached copy of the processed image.

Syntax

{made_url}

mime_type

CE Image Compatibility: New feature

Returns the mime type of the processed image.

Syntax

{mime_type}

name

CE Image Compatibility: Full

The name of the processed image (without extension).

Syntax

{name}

name_orig

CE Image Compatibility: Full

The name of the source image file (without extension).

Syntax

{name_orig}

orig

CE Image Compatibility: Full

Provides the relative path from the web_root folder to the source image (if available).

Syntax

{orig}

orig_url

CE Image Compatibility: Full

Provides a full URL pointing at the source image (if it is available).

Syntax

{orig_url}

path

CE Image Compatibility: Full

Provides the full local path to the cached copy of the processed image.

Syntax

{path}

path_orig

CE Image Compatibility: Full

Provides the full local path to the source image (if available).

Syntax

{path_orig}

sizes_param

CE Image Compatibility: New feature

Contains the fully constructed HTML <img> sizes= parameter for inclusion in a constructed tag based on the srcset= parameter included in the opening tag.

Syntax

{sizes_param}

srcset_param

CE Image Compatibility: New feature

Contains the fully constructed HTML <img> srcset= parameter for inclusion in a constructed tag based on the srcset= parameter included in the opening tag.

Syntax

{srcset_param}

type

CE Image Compatibility: Full

The image format used for the processed image.

Syntax

{type}

type_orig

CE Image Compatibility: Full

The image format used for the source image.

Syntax

{type_orig}

width

CE Image Compatibility: Full

The width in pixels of the processed image.

Syntax

{width}

width_orig

CE Image Compatibility: Full

The width in pixels of the source image.

Syntax

{width}