Redirecting…

Images

ID

Returns an image's ID.

Usage

{{ page.first_image.id }}

Title

Returns an image's title.

Usage

{{ page.first_image.title }}

Description

Returns an image's description.

Usage

{{ page.first_image.description }}

Source

Returns an image's URL.

Usage

{{ page.first_image.src }}

Example

<img src="{{ page.first_image.src }}" alt="{{ page.first_image.description }}">

Thumb Source

Returns an image's thumbnail URL.

Usage

{{ page.first_image.thumb_src }}

Example

<a href="{{ page.first_image.src }}">
  <img src="{{ page.first_image.thumb_src" alt="{{ page.first_image.title }}">
</a>

Has Images

Returns true if the page has images.

Usage

{% if page.has_images? %}
  This page has images.
{% endif %}

Example

{% if page.has_images? %}
  <p>This pages has images, it may take longer to load.</p>
{% endif %}

Images

Returns a hash of images attached to the page.

Usage

{{ page.images }} or {{ page.images_reverse }}

Example 1

This page has {{ page.images.length }} images.

Example 2

{% if page.has_images? %}
  Here are the images in reverse order:<br/>
  {% for img in page.images_reverse %}
    <img src="{{ img.src }}"/>
  {% endfor %}
{% endif %}

First Image

Returns the first image of the attached images.

Usage

{{ page.first_image }}

Example

<img src="{{ page.first_image.src }}" alt="{{ page.first_image.title }}">

Last Image

Returns the last image of the attached images.

Usage

{{ page.last_image }}

Example

<img src="{{ page.last_image.src }}" alt="{{ page.last_image.title }}">