[Resolved] Issue with slides not linking to external link

[Author]

Posts

[Charles]

So, when I first contact you, all images would show up, but only the first two would link out to the affiliate. Is here anyway to achieve what I'm trying to achieve? Have all images appear in the post slider as well as link out to the external link?

[Shane]

Hi Charles,

Yes it is and to do it you will need to have the image as a part of the repeatable field group instead of calling the featured image separately.

Thanks,
Shane

[Charles]

I just tried moving this code, but had no luck:

 [wpv-for-each field="wpcf-flex-slider-images"]

To get this:

<!-- Slider - start here -->
<div class="flexslider">
<img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
  <ul class="slides">
    [wpv-for-each field="wpcf-flex-slider-images"]
    <li>
      <a href="[types field='amazon-url' output='raw'][/types]"  target='_blank'>
        [wpv-post-featured-image class='img-responsive' size='original' resize='proportional']
      </a>
    </li>
    <li>
      <a href="[types field='amazon-url' output='raw'][/types]" target='_blank'>
        [types class='' field='flex-slider-images'][/types]
      </a>
    </li>
    [/wpv-for-each]
  </ul>
</div>
<!-- Slider - end here -->

[Shane]

Hi Charles,

I wasn't clear with my explanation previously 🙁

What I actually meant was to add the image itself as a part of the repeatable image fields on the backend. See Screenshot

So instead of you having to get the featured image using this shortcode [wpv-post-featured-image class='img-responsive' size='original' resize='proportional']

You can do just use this.

<ul class="slides">
    [wpv-for-each field="wpcf-flex-slider-images"]
    <li>
      <a href="[types field='amazon-url' output='raw'][/types]" target='_blank'>
        [types class='' field='flex-slider-images'][/types]
      </a>
    </li>
    [/wpv-for-each]
  </ul>

Then the final code would look like this.

 <a href="[types field='amazon-url' output='raw'][/types]" target='_blank'>
  <div class="flexslider">
 <img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
  <ul class="slides">
 [wpv-for-each field="wpcf-flex-slider-images"]
    <li>
        [types class='' field='flex-slider-images'][/types]
    </li>
    [/wpv-for-each]
  </ul>
</div>
  </a>

Thanks,
Shane

[Charles]

Sorry, but I just tried this code and the first image is still being admitted from the slide:

<a href="[types field='amazon-url' output='raw'][/types]" target='_blank'>
  <div class="flexslider">
 <img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
  <ul class="slides">
 [wpv-for-each field="wpcf-flex-slider-images"]
    <li>
        [types class='' field='flex-slider-images'][/types]
    </li>
    [/wpv-for-each]
  </ul>
</div>
  </a>

[Shane]

Hi Charles,

That is because the featured image is not added to the repeatable image field group. This image will not appear unless its added to the group of images that the [wpv-for-each] shortcode is looping through.

Please let me know if this is clear or if you'll like for me to setup an example for you.

Thanks,
Shane

[Charles]

Ok. So just add the featured image to the flex slider. I was hoping I could bypass the long road and just use the featured image, but if this is the only way, then I'll edit my flexslider code.

[Shane]

Hi Charles,

I'm sorry for the inconvenience this has cause but this is the only way I was able to get it to work on my testing locally.

Please let me know if you encounter any issues with this and i'll be more than happy to continue assisting.

Thanks,
Shane

[Charles]

All good!

Thank you for your help,
Charles,