url_title_path not linking correctly

Question

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.

Answer 1

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.