0

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.

0

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.

| improve this answer | |
  • Hey edward, glad you found a way forward. Admitedly not having an install to test with I couldn't double check the static_images bit or see the issue you mention (it not working :/ ), but out of curiosity did you try the shorthand form {image:1} before you abandoned static_images? – Blatant Feb 23 '16 at 11:18
  • Hi Blatant, yes, the {image:1} was among the first things I tried. I wish the documentation were more clear. – edward Feb 23 '16 at 13:59
  • Thats a shame, I agree from my reading of the documentation that should have worked (perhaps a snippet parse order thing) so yea the docs might need a boost. Let them know though! DevDemon are active on here I beleive... – Blatant Feb 23 '16 at 17:46
0

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.

| improve this answer | |
  • Sorry! I don't really understand your explanation at all. I thought images were called from Channel Images with something like <img src="{image:url:medium}" alt="{image:alt}">. What I'm trying to achieve is to 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. Maybe I'm completely off about using "images static." – edward Feb 18 '16 at 16:55
  • Hi edward, please see my edit above for a response to your comment. :) – Blatant Feb 18 '16 at 17:48
  • Thanks, that's more clear to me. Unfortunately, the {image:1:url:medium} doesn't return an image. Since I've got a working solution, I think I'll leave figuring out "images static" for another day. Thanks for your input, though! – edward Feb 18 '16 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.