[Resolved] Custom Image Fields – Child Type, create slider

[Author]

Posts

[lindsayH]

I've spent many hours trying to unravel the documentation on this and I now more confused than ever, apologies. I've followed this also... https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

I have created a Child Type (called Slider Img) which has a couple of custom image fields.

I want to output this into a Content Template used on a CPT Suppliers - single page.

What I end up with is as the 'Listing Image' attached, it shows all my child posts in the slider and the one that has a couple of images added it displays one under the other. If I try and add filters based on the parent\child relationship I don't get any results - see image attached.

Is there an easy way around this? Many thanks.

[Luo Yang]

Dear lindsay,

Are you going to do this?
A image sliders: one image one slider

How do you setup the custom post types parent/child relationships?
How do you setup the custom image fields (image1, image2)?

[lindsayH]

I have set up a child relationship for the CPT Slider Img, (the parent is Supplier) and in there created a checkbox - Images for Slider? If checked separate image fields are revealed. So for example Image1 field, Image2 field etc.

This is for a Supplier CPT to add their listing, with the option to add a slider of pictures. So every single supplier has a child Slider Img CPT that has many image fields, those image fields contained in the child CPT to be used as a single slider. Any empty ones to be ignored.

If there is an easier way to set this up though I'm happy to change. Thank you for the help.

[Luo Yang]

In the Views sliders, each slider display a post, in your case, you can try one of below two options:
1) Create a slider view select Media posts
filter with:
Select posts whose parent is the current page.
use [wpv-post-body view_template="None"] as a field,

2) output all image files, and use custom JS codes to display them as slider, for example:
jquery circle,
hidden link

[lindsayH]

OK are you saying that I have to create a View like attached Slider.png... then create separate Post Types (Slider Img1 and Slider Img2) for each individual image, then likewise Individual Custom Field Groups for each image (Supplier Slider Image1 \ Supplier Slider Image2). See pictures attached? Seems very long winded so I'm wondering if I've understood incorrectly?

Got it working but seems cumbersome with the fields at the bottom of the post screen and of course they are not editable until after original post saved.... which leads me onto my next problem, how to add these fields to a the 'parent' CRED form... it doesn't seem possible but could you confirm?

I found this post here and am going to have (another) go at this solution. https://toolset.com/forums/topic/slider-from-multiple-image-types-field/

[lindsayH]

OK, I followed this https://toolset.com/forums/topic/jquery-cycle-for-use-with-images-in-a-singe-post/ as extremely clear instructions, see screen dump of my view below. This way I can also add\edit the field on a CRED form.

Slides are still together on one page... I've added the cycle2 function to my child's functions.php and included the

js jQuery('#the_images').cycle('fade');

in my view - so what am I missing??

//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');

[Luo Yang]

Since it is a custom codes problem, could you duplicate same problem in a test site, and fill below private detail box with login details and ftp access, also point out the problem page URL and view URL, I need a live website to test and debug this problem, thanks

[Luo Yang]

Thanks for the details, I make below modifications in your website:
1) Create a content template "Slider Supplier template":
hidden link
use below codes:

<div id="the_images">
[wpv-for-each field="wpcf-slider-images-field"]
[types field="slider-images-field" id=""][/types] 
[/wpv-for-each]
</div>

click "JS editor", add below JS codes:

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

2) modify the content template "Wedding Suppliers Single Page Content"
hidden link
this line from:

Slider: [wpv-view name="slider-supplier-view"]

To:

Slider: [wpv-post-body view_template="slider-supplier-template"]

Please test again, check if it is what you need.

[lindsayH]

Worked perfectly. Thank you very much... your support has been amazing.

Just for information and if useful for anyone else... although working on my Dev site, just couldn't seem to get it to run on my 'live' site. Then I realised the only difference between the two is that my main site is using https.

So I removed the http: from the Cycle Plugin in functions.php as below.

//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');