0

I'm going nuts with this. I'm new to EE and Channel Images and just cant see why this is not working.

Gallery page with a bunch of thumbs:

<div id="thumbContainer">
  {exp:channel:entries channel="some_images" limit="20"}
    {exp:channel_images:images entry_id="{entry_id}"}
      <div class="galleryGrid">
        <a class="gallery" href="{url_title_path='portfolio/myview'}"><img src="{image:url:thumb}" /></a>
      </div>
    {/exp:channel_images:images}
  {/exp:channel:entries}
</div>

The thumbs link to the main image on another page:

{exp:channel:entries channel="some_images" limit="1"}
  <section class="wrapper">
    <div class="backToPortfolio"><a href="{path='portfolio/gallery'}"><span class="fa fa-angle-double-left"></span>Back To Portfolio</a></div>
    <div class="stage">

      {exp:channel_images:images entry_id="{entry_id}" limit="1"}
        <img class="mainImage" src="{image:url}" alt="{image:title}" />
      </div>
        <article class="description">
          <h2>{image:title}</h2>
          <h6>{image:field:1}</h6>
          <p>{image:description}</p>
      {/exp:channel_images:images}

      <div class="imageNavLeft">
        <a href="{path='portfolio/myview'}"><span class="fa fa-chevron-circle-left"></span></a>
      </div>

      <div class="imageNavRight">
        <a href="{path='portfolio/myview'}"><span class="fa fa-chevron-circle-right"></span></a>
      </div>

    </article>
  </section>    
{/exp:channel:entries}

No matter which thumb I click on it only ever displays the first gallery image. The 'myview' page displays ok but with the wrong image. Its like url_title_path is not working. Seems like I'm missing something very basic but too tired and not enough knowledge to see it! Frustratingly I had it working perfectly until I involved Channel Images and I broke it somehow.

Any help gratefully appreciated.

1 Answer 1

0

I've never been a fan of the EE path and prefer to use more traditional linking, like this:

PS. Never used channel images so using {file:id} as a segment marker as well as the curl_title of the channel entry itself.

<div id="thumbContainer">
  {exp:channel:entries channel="some_images" limit="20"}
    {exp:channel_images:images entry_id="{entry_id}"}
      <div class="galleryGrid">
        <a class="gallery" href="/portfolio/myview/{url_title}/{file:id}"><img src="{image:url:thumb}" /></a>
      </div>
    {/exp:channel_images:images}
  {/exp:channel:entries}
</div>


{exp:channel:entries channel="some_images" limit="1" url_title="{segment_3}"}
  <section class="wrapper">
    <div class="backToPortfolio"><a href="{path='portfolio/gallery'}"><span class="fa fa-angle-double-left"></span>Back To Portfolio</a></div>
    <div class="stage">
      //
      //Added file_id="{segment_4}" to make sure this single view page targets correct image
      //
      {exp:channel_images:images entry_id="{entry_id}" file_id="{segment_4}" limit="1"}
        <img class="mainImage" src="{image:url}" alt="{image:title}" />
      </div>
        <article class="description">
          <h2>{image:title}</h2>
          <h6>{image:field:1}</h6>
          <p>{image:description}</p>
      {/exp:channel_images:images}

      <div class="imageNavLeft">
        <a href="/portfolio/myview/{url_title}/{file:id}"><span class="fa fa-chevron-circle-left"></span></a>
      </div>

      <div class="imageNavRight">
        <a href="/portfolio/myview/{url_title}/{file:id}"><span class="fa fa-chevron-circle-right"></span></a>
      </div>

    </article>
  </section>    
{/exp:channel:entries}

Basically without seeing your destination page, I'm including the file:id + the EE entries {url_title} in the link so on the destination page you can target {segment_3} & {segment_4} to implicitly call the EE entry and the corresponding CI image.

htttp://ansite.com/portfolio/my_entries_url_title/channel_images_entry_id

Disclaimer: Never used channel images and am unsure of how an uploaded images are output individually. I always thought Channel images was specifically for displaying multiple images on one page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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