Skip Navigation

[Resolved] Slider from multiple image types field.

This support ticket is created 9 years, 1 month 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
- 8:00 – 17:00 8:00 – 17:00 8:00 – 17:00 8:00 – 17:00 8:00 – 17:00 -
- - - - - - -

Supporter timezone: America/Sao_Paulo (GMT-03:00)

This topic contains 8 replies, has 7 voices.

Last updated by Vito Peleg 9 years, 1 month ago.

Assigned support staff: Adriano.

Author
Posts
#209353

Ok all, I'm now entirely frustrated as this is the third time I think I've had this problem.

Making a slider from Types and Views is a massive pain in the ass. All I want to do is create an image field, called "slides", that allows multiple-instances of the field.
This field will appear on a few custom post types.

On the output for those post types, ex: single-post type.php, I want to display the images the user has entered as a slider. Not a slider of posts in the category, or pages, or woo commerce entries, just the entered images from the single post. Each post should have its own set of images, and its own slider. Why does Types/Views make this so hard?

Please, some help would be great.
~ Aaron

#209373

Dear Aaron,

Views can be used slide from one post content to another post content. However It is not designed to slide from within repeating images of the same page. To do this, can use jQuery cycle plugin. I manage to have a working example on this.This is assuming you have a post type "page" with each page content containing several images using repeating image fields. And you already have the images set for each page content. This is how I do it:

1) In the slider View (the View that is designed to slide from one post content to another), I set the pagination to manual and add pagination controls. The purpose is just let the user click on the pagination links if to see another set of slider images. For example when the page loads, the user is presented only with the first page content. This content has a slider of images (using jQuery cycle plugin). If the user wants to view another set of slider images, in this case belonging to another page content. The user will simply click the pagination link. View will navigate to the next page content and show another set of slider images belonging to this page. You can easily implement this by adding the code below to your "Filter HTML":

[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
[wpv-pagination][wpv-pager-current-page style="link"][/wpv-pagination]
[wpv-filter-end]

2) In your functions.php (if you are using a child theme, add this to your child theme functions.php), add the jQuery Cycle JS plugin:

//Add the jQuery Cycle Plugin
function add_cycle_plugin_wp_test() {
    wp_enqueue_script('jquery_cycle_test', '<em><u>hidden link</u></em>',array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'add_cycle_plugin_wp_test');

3) In your View layout meta HTML, I simply have this:

[wpv-layout-start]
    [wpv-items-found]
    <!– wpv-loop-start –>     
        <wpv-loop> 
          <div id="the_images">
          [wpv-for-each field="wpcf-slider-images"]
          [types field="slider-images" id=""][/types] 
          [/wpv-for-each]
          </div>
        </wpv-loop>
    <!– wpv-loop-end –>
    [/wpv-items-found]
    [wpv-no-items-found]
        [wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
    [/wpv-no-items-found]
[wpv-layout-end]

See how I use wpv-for-each to display the repeating image fields. Another thing that is important is that I enclosed these images with with a div using id "the_images", I will use for the jQuery cycle implementation.

4) Finally click "Open JS editor" below the View layout meta HTML editor, to add the jQuery cycle JS code (the ID selector used is the div id of the repeating images – "the_images"):

$('#the_images').cycle('fade');

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

#209625

Thanks for this. I appreciate the help!
Looking over your support forms it seems like this might be a feature to implement within the Views framework eh?

Thanks again,
~ Aaron

#209639

You are welcome.

#333723

I Agree, a repeating field should be able to be used as a 'slider'. *VOTE*

#349547

I too have spent weeks on this, trying to get a slider to show from a single post field. Then I asked for help, and realized this ^. Please add this as a standard feature, it's ruining my dream of No Writing Code 🙁

#352423

I also appreciate this as a feature. Why not Types consider repeating image field as post attachments?

#414062

That seems logical to me.

#498119
screenshot-alehmitzvah.org 2017-03-07 20-42-33.png

Hi guys
I followed the exact steps above but have this result (See screenshot)
The images are just listed.

Anything you can do to help?

Live link: hidden link