How to use the Channel Images' "images static"?

Question

I have a channel that has a text field and a Channel Images field; I want the images to accompany the text.

I'm keeping the image information (the CSS, etc) in a snippet and using Hop Inject to place the snippet following certain paragraphs. That's working so far with one image. But I'm trying to figure out how to place the same snippet in various parts of the text and have it bring up the different images in order that are in the Channel Images field.

I was thinking the way to do this would be to use the {exp:channel_images:images_static} tag. But I cannot wrap my brain around the documentation and example provided. For example, the sample is like this:

{exp:channel:entries channel="about" url_title="{segment_3}"}
    <h2>{title}</h2>
    {exp:channel_images:images_static entry_id="{entry_id}"}
        {body}
        {extended}
    {/exp:channel_images:images_static}
{/exp:channel:entries}

...but I don't see what's calling the image, and I don't understand what the 'body' and 'extended' tags are supposed to be.

Anyone have any ideas about this?

EDIT: ADDING MORE EXPLANATION FOR CLARITY

Not sure if I'm explaining this properly, but what I'm trying to do is have a snippet that displays the first image in a Channel Images field, and then another snippet that will display the second image in that Channel Images field.

Answer 1

Okay, I was completely wrong about using "images static" -- not really sure what that is or how to use it, but whatever. But I am able to achieve my goal with just regular Channel Images tags, where my first snippet will be like:

  {exp:channel:entries channel="about" limit="1" dynamic="no" disable="categories|member_data|pagination"}
    {exp:channel_images:images entry_id="{entry_id}" limit="1"}
      <img src="{image:url:medium}" alt="{image:alt}">
      <div class="caption">{image:description}</div>
    {/exp:channel_images:images}
  {/exp:channel:entries}

and my second snippet will add offset="1" like this:

{exp:channel_images:images entry_id="{entry_id}" limit="1" offset="1"}

Problem solved.

Answer 2

Ok, so lets brake down the example a little. First thing I'd like to point out is that the {extended} tag in the example has no point being there, it is simply there to say "in our example, our 'about' channel has 2 fileds, one called body and one called extended". The rest of the example deals exclusively with the body field (and the channel entries field which is of course implied).

Lets say the body field is a plain textbox, in this text box we enter the text, for our example we'll consider the title of the entry to be "Test Title" :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in lacinia purus.

{image:1}

{image:1:description}

Quisque molestie tempus mauris eu lobortis. Sed id nunc eu diam dapibus mollis non id ligula.

That is literally, the braced content is just braces and characters in the text field.

So, now if we create a channel entries loop like below, we will see this text displayed on the page as so (for this example segment_3 obviously targets the entry in question):

{exp:channel:entries channel="about" url_title="{segment_3}"}
  <h2>{title}</h2>
  <p>{body}</p>
{/exp:channel:entries}

This gives us (in HTML, assuming the text boxes carriage returns are parsed into br's) :

<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque 
in lacinia purus.<br /><br />{image:1}<br /><br />
{image:1:description}<br /><br />Quisque molestie tempus mauris 
eu lobortis. Sed id nunc eu diam dapibus mollis non id ligula.</p>

Obviously, we don't want this as its displaying the literan {image:1} in the output!! Enter Channel Images' Static Images. For this example, lets say you've uploaded 1 image of some cheeseburgers to the Channel Images field of the entry, changed its title to "Cheeseburgers" and given it a description in Channel Images of "What I had for lunch today!"

So, we factor in the channel images tags into our example, as so :

{exp:channel:entries channel="about" url_title="{segment_3}"}
  <h2>{title}</h2>
  {exp:channel_images:images_static entry_id="{entry_id}"}
    <p>{body}</p>
  {/exp:channel_images:images_static}
{/exp:channel:entries}

So, no the cu-de-gras. The exp:channel_images:images_static tag has an entry ID, the same entry ID from the outer Channel Entries loop, so it can find the right Channel Images field.

What Channel Images > Images Static does is search the output from the inner variables (in our example just the body) and replaces {image:[ID][:[part]]} text with images.

So as we have {image:1} in our text in our textbox, this is replaced with <img src="/url/to/cheeseburgers5.jpg" alt="Cheeseburgers">, which is the URL and title for Image 1 in the Channel Entries field.

Further, we have {image:1:description} in out text, so this is replaced with the description attribute of image 1 in the channel entries field, ie "What I had for lunch today!"

So, with the static images tag our final markup in HTML is :

<h2>Test Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque 
in lacinia purus.<br /><br />
<img src="/url/to/cheeseburgers5.jpg" alt="Cheeseburgers"><br /><br />
What I had for lunch today!<br /><br />Quisque molestie tempus mauris 
eu lobortis. Sed id nunc eu diam dapibus mollis non id ligula.</p>

Voila! We have inserted a Channel Entries image from the Channel Images field into the "static" content from the textbox called body.

Incidentally, it doesn't have to be in a channel entries tag, you could wrap static content with the tags, so for example if we had this as out template code (assuming we have a channel of "image of the day" or shortcode IOTD, and each entry has a date as its title.) :

{!-- The URL title is calculated using todays date --}
{exp:channel_images:images_static url_title="{todays_date}"}
  <h1>Image of the day</h1>
  <p>Todays image is called {image:1:title} : </p>
  {image:1}
  <p><sup>{image:1:description}</sup></p>
  <p>Looks good doesn't it!! By the way its file name was {image:1:filename}</p>
{/exp:channel_images:images_static}

it would be parsed and the first image in the channel entries field for the entry specified by {todays_date} would be used to replace the tags {image:1:title}, {image:1}, {image:1:description}and{image:1:filename}`

Does that help you make sence of this??

In response to comment 1

You're not wrong in your comment, but this is in the context of being inside a channel entries loop. Channel Images is a field type so I am assuming your Channel Images field is on an entry of some description?? Lets say for examples sake your entry ID is "10".

so, in your template you might have this :

{exp:channel:entries dynamic="no" entry_id="10"}
  <h1>{title}</h1>
  {snippet_1}
  {snippet_2}
{/exp:channel:entries}

in your snippet (snippet_1), you can use this code , using your syntax (According to The Docs there is no 'alt' property, just a description)

{exp:channel_images:images_static entry_id="{entry_id}"}
  <img src="{image:1:url:medium}" alt="{image:1:description}" />
{/exp:channel_images:images_static}

You see the entry ID being passed into the static images tag?? thats what tells channel Images what entry to get the Channel Images field from.

The main difference between the basic image tag and image_static seems to be that while the former is for iterating through the collection (or gettingthe cover image) the latter (static) allows you to pick the row ID from the list of images in the field.