Template tags - Amici Infotech Documentation

All public helpers are {exp:super_images:*} plus a File URL modifier.

When you pass operations, they replace the profile variant steps. Always start with geometry.

In EE templates, raw { is parsed as a tag. Encode braces in embed parameters and in code samples ({). Operations JSON should use HTML entities for {, }, and".

{exp:super_images:image}

Emits an <img> tag with a single src (the requested variant). Use {exp:super_images:picture} for multi-width srcset.

Shorthand HTML keys (alt, class, loading, …) still work. Prefer attr:* so you can add any attribute:

{exp:super_images:image
  src="{file:1:url}"
  variant="md"
  format="webp"
  attr:alt="Hero"
  attr:class="w-full rounded-lg"
  attr:loading="lazy"
  attr:decoding="async"
}

Parameter	Description
src	{file:ID:url}, local path, remote URL, or numeric ID
file_id	ExpressionEngine File ID (wins over src when set)
profile	Profile handle (default from config)
variant	Variant handle (sm, md, …)
format	Output format (jpg, webp, png, avif)
attr:name	Copied onto <img> (attr:alt, attr:class, attr:data-hero, …)
alt, class, loading, sizes, width, height	Shorthand for the same HTML attributes
operations	JSON array of inline operations

Custom pipeline (entity-encoded JSON in an embed):

operations="[&#123;&quot;type&quot;:&quot;fit&quot;,&quot;width&quot;:640&#125;,&#123;&quot;type&quot;:&quot;grayscale&quot;&#125;]"

Used as a tag pair, the same tag exposes result variables (Craft tryGenerate equivalent). Single-tag form still emits only the HTML.

{exp:super_images:image src="{file:1:url}" variant="md" format="jpg" attr:alt="Hero"}
  {image_html}
  {if success}
    {dimensions} · {size_kb} KB · {duration_ms} ms{if cache_hit} · cache hit{/if}
  {/if}
{/exp:super_images:image}

Variable	Description
{image_html} / {markup}	Rendered <img> (or {picture} / {markup} on the picture tag)
{url}	Delivery URL
{width} {height} {dimensions}	Pixel size (640×400)
{size} {size_kb}	Bytes and KB (one decimal)
{duration_ms}	Serve / generate time in milliseconds
{cache_hit}	yes when the derivative already existed before this request
{format} {mime} {variant} {profile} {driver} {identity} {error}	Extra diagnostics

{exp:super_images:picture}

Responsive <picture> with one <source> per format (for example WebP and JPEG), each with a full width srcset. The inner <img> uses the last format as fallback (src + matching srcset).

{exp:super_images:picture
  src="{file:1:url}"
  formats="webp|jpg"
  variant="lg"
  sizes="(min-width: 992px) 992px, 100vw"
  attr:alt="Hero"
  attr:class="block max-w-2xl"
  attr:loading="lazy"
  picture:class="hero-picture"
  source:media="(min-width: 768px)"
}

Parameter	Description
formats	Pipe-separated list, e.g. webp\|jpg (order = source order; last = <img> fallback)
sizes	sizes on every <source> and the <img>
attr:name	Attributes on the inner <img>
source:name	Attributes merged onto every <source>
picture:name	Attributes on the <picture> element

As a tag pair, {picture} is the full markup and {img} is the fallback <img>. Size and time variables describe that fallback derivative.

{exp:super_images:url}

Returns the delivery URL only (storage URL, or a signed runtime URL when lazy generation is on).

{exp:super_images:url src="{file:1:url}" variant="md" format="webp"}

As a tag pair, {url} is the delivery URL plus the same size/time variables as {exp:super_images:image}.

{exp:super_images:exists}

Returns yes or no. Does not create the file.

{exp:super_images:exists file_id="1" variant="md" format="jpg"}

There is no Twig tryGenerate / supportsFormat() helper. Use exists, url, image, or PHP GenerationService.

Variable modifier

{file:123:url:super_images variant="md" format="webp"}

Operations cheat sheet

Type	Key options	Drivers
fit / resize / scale	width, height, mode, factor	all
crop / fill	width, height, position	all
rotate / flip	angle, background · direction	all*
grayscale / invert	—	GD / Imagick (+ vips gray)
brightness / contrast	level or amount	all
saturation / sepia	level · threshold	Imagick
blur / sharpen	passes, radius, sigma · amount	all
border / padding / background	size, color · sides	GD / Imagick
watermark	path or text, opacity, angle, cover	Imagick
overlay / text	path, x, y · content, size, position	Imagick

Position strings use xAlign-yAlign (for example center-center, right-bottom).