Skip Navigation

[Resolved] Create a slider with multiple images from Image fields.

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.

This topic contains 6 replies, has 2 voices.

Last updated by jonathanW-2 4 years, 11 months ago.

Assigned support staff: Nigel.

Author
Posts
#445909

I am trying to create a slideshow from multiple image fields in a "Property" Post Type. I have tried the Flexslider thread here (https://toolset.com/forums/topic/flexslider-tutorial-or-example-please/), but can't seem to make it work. Is there a more simple solution?

Thanks!

#446104

Nigel
Supporter

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

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

Hi Jonathan

Unfortunately there is no simple solution that doesn't require a certain amount of getting your hands dirty with code.

The flexslider module isn't actively maintained and client feedback suggests it is not working as is.

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.

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 and their featured images.

Pretty much every slider plugin I have tested expects you to manually add slides from the media gallery.

You want the slider to automatically pick up the Types image custom fields attached to a post.

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.

The view loop output (whether you enter it directly in the view or via a content template added to the view loop) would look something like this, assuming your image custom field had a slug of 'slide-images':

<!-- other content... -->
<h2>Here comes 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>

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/

That is the kind of thing that is required. Let me know how you get on.

#446233

Hello Nigel,

That actually worked! However, I am not sure how many images will be added to each post (property). So, how would that work? I see you have a place for 3 images, but I could have 5, 10, or more.

Thanks for your help this far!

#446258

Nigel
Supporter

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

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

Hi Jonathan

That's great that you have it working, it comes up quite often and it is good to know it is a viable solution.

Yes, in my example I assumed a fixed number of image fields, but it is quite straightforward to modify your output section to accommodate a variable number using the wpv-for-each shortcode (https://toolset.com/documentation/views-shortcodes/#wpv-for-each).

There is an example there which should give you the idea, but if you need help let me know.

#446260

Ok great! I got that to work too! Thanks again!

Now I am noticing that when I load a page with that slider, the image shows very big, then goes to the correct size after the page loads. Here is the site: hidden link

It happens really fast, so don't blink! 🙂

#446477

Nigel
Supporter

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

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

Hi Jonathan

Your link is locked behind maintenance mode so I can't see the effect.

However, it sounds as if the image is loading moments before the relevant CSS rules do (or maybe the CSS is being applied via JS that runs after the image has loaded).

Once the page has loaded and the image looks normal, I would use the browser dev tools to inspect that part of the site and try and identify one or two CSS rules which determine the correct image size (they may be set on the image itself or on a container div) and then add those same rules as custom CSS in that view.

Even though they just duplicate what will be applied anyway, they will get printed directly into the page markup so should constrain the images as they load.

#447965

Hey Nigel!

That worked like a dream. Thanks for your help! ?