Developer Documentation
Getting started
Overview
Semantic elements
Deployment
Alahup! Elements > image group (imgGrp)
tag : imgGrp
parents : div, li, img
children : img
The "image group" element can contain anything but image elements.
Most of the time, you will want to parse the image group's children (= the image elements) from the image group's template to have better control over the output.
The image group element has two special variables :
-
$this.tallest returns the height (in pixels) of the tallest image of the group.
-
$this.widest returns the width of the widest image of the group.
Example
elements/sets/default/imgGrp.tpl :
{* horizontally aligned images with captions on bottom *}
<div class="imgGrp {$this.custom.type}" style="{if $this.custom.align eq 'left' or $this.custom.align eq 'right'}float: {$this.custom.align};{else}text-align: center; clear: both;{/if}">
{foreach from=$this.children item="image"}
<div class="image-caption" style="float: left;">
{* force the height of the image div so bottom captions are aligned *}
<div class="image" style="height: {$this.tallest|min:$this.custom.hmax}px; text-align: {$this.custom.image_align};">{render item=$image wmax=$this.custom.wmax hmax=$this.custom.hmax}</div>
{* render the caption of the image with render content= ! *}
<div class="caption" style="text-align: {$this.custom.caption_align};">{render content=$image}</div>
</div>
{/foreach}
</div>
<div class="imgGrp {$this.custom.type}" style="{if $this.custom.align eq 'left' or $this.custom.align eq 'right'}float: {$this.custom.align};{else}text-align: center; clear: both;{/if}">
{foreach from=$this.children item="image"}
<div class="image-caption" style="float: left;">
{* force the height of the image div so bottom captions are aligned *}
<div class="image" style="height: {$this.tallest|min:$this.custom.hmax}px; text-align: {$this.custom.image_align};">{render item=$image wmax=$this.custom.wmax hmax=$this.custom.hmax}</div>
{* render the caption of the image with render content= ! *}
<div class="caption" style="text-align: {$this.custom.caption_align};">{render content=$image}</div>
</div>
{/foreach}
</div>