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>