Developer Documentation
Getting started
Overview
Semantic elements
Deployment
Alahup! Elements > image (img)
tag : img
parents : imgGrp
children : t, div, ul, imgGrp, menu, invisible, mod
The image element cannot live outside an image group element which it necessarily has as a parent.
The image element holds information about an image and but also acts as a container which typically contains the caption.
Thus, you can use {render content=$this} to render the caption (which can contain anything), but most of the time, you will want to control this from the image group template for layout purposes.
The image template may have been called (most likely from the image group template) with a size constraint :
{render item=$image wmax=500 hmax=$this.custom.hmax}
...
The image element has several special variables :
-
$this.src returns the link to the resized image
-
$this.originalSrc returns the link to the original image
-
$this.width returns the width of the image (after resizing)
-
$this.height returns the height of the image (after resizing)
-
$this.originalWidth returns the width of the original image
-
$this.originalHeight returns the height of the original image
-
$this.linkAttributes returns the link attribute (same as link tag)
-
$this.linkAttributesNoAnchorName, same as linkAttributes, without the anchor name (absolute and relative links only) (same as link element)
Example
<img class="{$this.custom.type}" class="br0">{$this.src}" width="{$this.width}" height="{$this.height}" alt=""/>
{if $this.linkAttributes}</a>{/if}
{* note that we could render the caption here (if any)
with render content=$this but it's usually a better idea (for layout purposes) to render the image's caption from the image group template *}