[Resolved] Wrap flexslider in custom url

[Author]

Posts

[Charles]

Support,

Is it possible to wrap a flexslider in a custom URL?

I tried this but it kicked out the URL.

Screenshot (note URL ontop, outside of slider): hidden link

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

Thanks,
Chuck

[Nigel]

Hi Chuck

I think you need to add the link tags to the images themselves rather than around the containing ul tag.

That is complicated in your code above because of how you have added the images, using a single types shortcode to output each of the repeating image fields and setting the separator attribute to close and re-open the li tags.

That's a neat, compact solution, but it doesn't allow you to add links around the individual images.

Here is the code I normally use to achieve the same, which loops over the repeating image fields using the wpv-for-each shortcode. In this example, the link is simply to the full sized image itself, but in your case you would replace that with your amazon link.

<div class="flexslider">
  <ul class="slides">
    [wpv-for-each field="wpcf-slides"]
    <li>
      <a href="[types field='slides' size='large' url='true' resize='proportional' separator=', '][/types]" alt="" title="">
        [types field='slides' alt='Alt: %%ALT%%' title='Title: %%TITLE%%' size='large' align='none' resize='proportional' separator=', '][/types]
      </a>
    </li>
	[/wpv-for-each]
  </ul>
</div>

Because you are using the featured image as the first slide you would manually add a link around that, too, which would appear before the wpv-for-each shortcode.

[Charles]

I tried modifying the code you provided, but had no luck:

<div class="flexslider">
  <ul class="slides">
    [wpv-for-each field="wpcf-slides"]
    <li>
      <a href="[types field='amazon-url' target='_blank' output='raw'][/types]">
        [wpv-post-featured-image class='img-responsive' size='original' resize='proportional']
      </a>
    </li>
    <li>
      <a href="[types field='amazon-url' target='_blank' output='raw'][/types]">
        [types class='' field='flex-slider-images' separator='</li><li>'][/types]
      </a>
    </li>
    [/wpv-for-each]
  </ul>
</div>

Not sure why it's not working, but it didn't like the second

that shows the additional flexslider images.

Any other suggestions?

Thanks,
Chuck

[Nigel]

Hi Chuck

Can you try this?

<div class="flexslider">
  <ul class="slides">
    <li>
      <a href="[types field='amazon-url' target='_blank' output='raw'][/types]">
        [wpv-post-featured-image class='img-responsive' size='original' resize='proportional']
      </a>
    </li>
    [wpv-for-each field="flex-slider-images"]
    <li>
      <a href="[types field='amazon-url' target='_blank' output='raw'][/types]">
        [types class='' field='flex-slider-images'][/types]
      </a>
    </li>
    [/wpv-for-each]
  </ul>
</div>

Note that I moved the featured image outside the wpv-for-each shortcode because it should be output only once, not for every iteration. Also the field name on that shortcode was from my sample, you needed to edit it to match your Types field slug.

Note the documentation for the wpv-for-each shortcode, which is used to iterate over repeating fields: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

That looks to me like it should work, if you could try again.

[Charles]

Nigel,

Your code was close. I was able to modify it and it's working properly!

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

Thank you!
Chuck

[Charles]

Spoke to soon. The target'_blank' attribute is not working. It opens into itself. Any ideas?

[Charles]

Also, I'm noticing that it works well with posts that only have two images (featured and additional flex images), but if it has three, it tends to stack photos, link: hidden link

Thanks,
Chuck

[Nigel]

Hi Chuck

Looks like you didn't use the code I suggested, you are still using the separator attribute on the types field shortcode, you need to remove that.

I hadn't spotted the target blank problem, you need to set this yourself on the a tag when output the raw url, like this:

<a href="[types field='amazon-url' output='raw'][/types]" target='_blank'>

I think that is it now, if you could please update and confirm, thanks.

[Charles]

Nigel,

The target problem has been resolved. Your solution worked.

I'm still having trouble with flexslider showing images. When I use this code, it takes away the arrows and slide feature and only shows the featured image:

<!-- Slider - start here -->
<div class="flexslider">
<img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
  <ul class="slides">
    <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>
    [wpv-for-each field="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>
</div>
<!-- Slider - end here -->

Thanks,
Chuck

[Nigel]

Hi Chuck

It looks okay to me, I can't see what the issue is.

Could I get up-to-date credentials for your site to double-check how it is set up and do some testing if necessary?

[Charles]

Nigel,

The flexslider within each post is not working correctly.

Here is a link to one of the post that I'm having problems with: hidden link

The issue I'm having is not being able to link each slide to the custom URL ([types field='amazon-url' output='raw'][/types]).

Thanks,
Chuck

[Nigel]

Hi Chuck

We seem to have stumbled across a bug.

Your use-case is somewhat atypical, because you are inserting the Content Template for the sliders directly into each post, rather than creating a Content Template that includes the code for your posts, which you can't because that is not currently supported for your theme/page builder.

And it seems that the wpv-for-each shortcode doesn't work as expected in this case.

I'm reporting the issue and escalating this thread so that it can be investigated, and hopefully a fix identified soon.

I'll keep you posted.

[Charles]

Nigel,

I appreciate the update,. Glad you were able to label this as a "bug". Hopefully a solution can be found.

Best,
Chuck

[Nigel]

Hi Chuck

Turns out it is not a bug. The context for the wpv-for-each shortcode is only Content Templates and the Loop Output section of a View, and we are trying to use it on a single post. (I'm not sure why it wouldn't work on a single post, and I've requested it be reviewed so that it does.)

We can still get this to work, but need to carefully craft the separator argument of our Types image field.

I've tried to do that for you below, can you please test and verify that it works:

<!-- Slider - start here -->
<div class="flexslider">
<img class="loading" src="<em><u>hidden link</u></em>" alt="Loading...">
  <ul class="slides">
    <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 field='flex-slider-images' separator='</a></li><li><a href="[types field='amazon-url' output='raw'][/types]" target='_blank'>'][/types]</a>
	</li>
  </ul>
</div>
<!-- Slider - end here -->

[Charles]

Nigel,

I've tried your code. It's stacking images, not inserting them into a slider, but the links work when I click on each image.

Screenshot: hidden link
URL: hidden link

Thanks,
Chuck