Skip Navigation

[Resolved] Wrap flexslider in custom url

This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 16 replies, has 2 voices.

Last updated by Charles 6 years, 11 months ago.

Assisted by: Nigel.

Author
Posts
#594276

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

#594314

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

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.

#594479

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

  • #594511

    Nigel
    Supporter

    Languages: English (English ) Spanish (Español )

    Timezone: Europe/London (GMT+00:00)

    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.

    #594521

    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

    #594522

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

    #594548

    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

    #594689

    Nigel
    Supporter

    Languages: English (English ) Spanish (Español )

    Timezone: Europe/London (GMT+00:00)

    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.

    #594863

    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

    #595099

    Nigel
    Supporter

    Languages: English (English ) Spanish (Español )

    Timezone: Europe/London (GMT+00:00)

    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?

    #595144

    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

    #595640

    Nigel
    Supporter

    Languages: English (English ) Spanish (Español )

    Timezone: Europe/London (GMT+00:00)

    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.

    #595652

    Nigel,

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

    Best,
    Chuck

    #596793

    Nigel
    Supporter

    Languages: English (English ) Spanish (Español )

    Timezone: Europe/London (GMT+00:00)

    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 -->
    
    #596948

    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