[Resuelto] Creating a Slideshow for a custom repeatable image field

[Autor]

Mensajes

[nelsonM-2]

Hello,

I have a custom post type with an Images custom field, repeatable.
The idea is to automatically display a slider with thumbnails bellow, in the custom post type single page, displaying the post Images.
Slider should open with the first image on the field Images.

I have installed Flexslider with Module Manager and installed the Slider module, but I see all images repeated in both the single slider view and the thumbnails view - can you help me find the best, most up-to-date tutorial, to do this?

I think I have seen a complete Toolset tutorial about this some time ago, but I'm not finding it now.

thanks,
Nelson

[Mohammed]

Hello,

I’m Mohammed: the Toolset support team leader.

Please accept our opologies for the late response.

One of our first tier supporters will be in touch with you as soon as possible.

Thanks.

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Nelson

I have just been taking a look at the flex slider module and it doesn't exactly do what you want. (Also it is old and not actively maintained so may have issues.)

What you describe is actually something that has been requested quite a few times and it is on our roadmap for Views, but I don't have any information about when the feature will be added.

Correct me if I am wrong but what you want is to attach several images to a single post and then display those images in a slider when viewing that post.

Fairly straightforward, but all of the slider functionality that we currently have in Views and in Layouts is for transitioning between posts, e.g. if you have 5 posts each with a featured image you can create a slider based upon those 5 posts. The flexslider module works on a similar principle albeit using a slides custom post type to hold the images.

There are a lot of slider plugins out there. When you use Types to add image fields to a post the urls for the images are stored as standard WordPress post meta, although what you need to be aware of is that Types prepends "wpcf-" to the slug, so if you have a repeating image custom field with a slug of "slide" then it would be stored in wp_postmeta with the key "wpcf-slide".

What you want is a slider plugin that will let you use image fields stored in the post meta as Types does. I don't have one to recommend (but if you find one, please report back!)

Failing that, you can use the slider plugin of your choice, and follow its instructions as to how to add the images to the post (typically using the Media Manager and built-in gallery tool).

Now, you may have a specific use case which means this doesn't suit your needs. If so, please elaborate on exactly what you are trying to achieve and I will try and help.

Btw, sorry about the delay in getting back to you, we are currently dealing with a very high volume of tickets.

[nelsonM-2]

Hello Nigel,

thank you for your explanation!
It helped clarifying what I can expect to do with Views on this regard.

I wouldn't want to have to use Advanced Custom Fields' Gallery field, which seems to solve this situation - now that I've invested on Toolset ...
But it's on your roadmap, as you said, so it should be solved soon, we hope.

As for now, I was thinking of something simple:

- A larger image on top
- All the thumbnails bellow (clicking on each swaps the above larger image)

Couldn't this be accomplished by outputting the repeatable image field with Views as thumbnail images and putting a click handler on each so they could swap the larger image above?

thanks,
Nelson

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Nelson

You could do what you describe, although you will effectively be writing your own custom slider code.

I investigated the most popular slider plugins and they have the problem that they won't take the images from the Types image custom fields attached to the post, they typically require you to manually add slide images from the media gallery.

The problem is that the slider plugins don't expect to find the images as post custom fields.

I think you will need to craft your own solution using an existing JavaScript slider library.

That's not so difficult. The flexslider comes with documentation about how to set it up here: https://woocommerce.com/flexslider/

Your view will need to generate the markup as per the documentation, and you can add the code to initialise the slider in the custom JS section of your view.

All that is missing is adding the flexslider stylesheet and script to the page. In WordPress you do that by enqueuing them from your theme's functions.php file. See the official documentation for details: https://developer.wordpress.org/themes/basics/including-css-javascript/

If you have difficulties setting this up then please ask and I will try and help.

[nelsonM-2]

Hi Nigel,

you're right, I have started to create a simple slider (I don't even need the view for displaying thumbnails, I can simply include that custom field on the custom post type template and it will generate the <img> tags for each image on that field) - but it would lack the details like more appealing transitions between slides and so on.

I'll look into that Flexslider link you sent me.

I have to specific questions:

1 - Can I affect the output of the custom repeatable image field?
To be able to format each item (image) like Flexslider requires:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

2 - I'm using Avada theme. Do you know if the sliders included all fall into that add-slide-from-media-gallery category, or if any of those could be used like Flexslider?

thanks!
Nelson

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

Let's say you have created a custom field group which has a repeatable image field (slug 'slide-images' in my test case) and assigned it to a post type (regular posts in my test), then you want to create a content template for that post type where you will add the markup for the slider.

Note that a limitation of this approach is that you will need a fixed number of images in your slider for that post type.

Your content template would look something like this:

<!-- other content... -->
<h2>Behold the slider</h2>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="[wpv-post-field name='wpcf-slide-images' index='0']" />
    </li>
    <li>
      <img src="[wpv-post-field name='wpcf-slide-images' index='1']" />
    </li>
    <li>
      <img src="[wpv-post-field name='wpcf-slide-images' index='2']" />
    </li>
  </ul>
</div>

If you wanted to handle a variable number of slides then you would be looking at writing a custom shortcode to generate the markup.

With the Avada theme it appears that it adds extra featured image fields for the slider content, but you still have to manually assign those featured images using the media browser. I could be wrong but that is my understanding.