Involver Developer Network : image

Images are uploaded for display via the configuration panel. Once files are uploaded, a featured image may be set. By default, the featured image will be the most recently uploaded image.

Caching Considerations

Attributes

name	type	required	description
name	string	false	This is a name to identify the specific feature instance that you are using in your template code. This is useful if you have multiple instances of the same feature on the same page.

Context Variables

name	type	description
image_items	Array of image_item elements	Returns a collection of images you can display on the page.
featured_image_item	image_item	Returns the featured image item as determined by the Featured Image configuration option.

Examples

Basic Configuration

This creates a simple unordered list of images with their titles appended as alt text.

{% image_gallery %}
    <ul>
        {% for image in image_gallery.image_items %}
            <li>{{ image.image_url | img_tag:image.title }}</li>
        {% endfor %}
    </ul>
{% endimage_gallery %}

The same thing again but using tablerow instead of for to create a table of images.

{% image_gallery %}
    <table>
        {% tablerow image in image_gallery.image_items cols:3 %}
            {{ image.image_url | img_tag:image.title }}
        {% endtablerow %}
    </table>
{% endimage_gallery %}

{% image_gallery %}
    <table>
        {% tablerow image in image_gallery.image_items cols:3 %}
            {% capture badge %}{{ image.image_url | resize_to:"square" | resize_to:"90" | img_tag:image.title }}{% endcapture %}
            {% capture description %}I've earned the {{ image.title }} Badge! Wow, I sure am cool!{% endcapture %}
            {% share image label:badge image:image.image_url name:image.title caption:image.title description:description onclick:"Analytics.logClickthrough('Badge Post Count')" %}
        {% endtablerow %}
    </table>
{% endimage_gallery %}

Using ajax_link to show a featured image and thumbnails

{% partial name:"featured" %}
    {{ featured_pic.image_url | img_tag:featured_pic.title }}
{% endpartial %}

{% image_gallery %}
    <div id="featured_container">
        {% render partial:"featured" image_gallery:image_gallery featured_pic:image_gallery.featured_image_item %}
    </div>

    <ul class="block-list">
        {% for image in image_gallery.image_items %}
            <li>{% ajax_link partial:"featured" container:"featured_container" featured_pic:image image_gallery:image_gallery %}{{ image.image_url | resize_to:"square" | resize_to:"90" | img_tag:image.title }}{% endajax_link %}</li>
        {% endfor %}
    </ul>
{% endimage_gallery %}

Overview