[Resolved] Creating and Image Slider with the Custom Values

[Author]

Posts

[theW]

Tell us what you are trying to do?

I created a Custom Post Type named: "Projects"
I created 3 Custom Fields:
Photo 1,
Photo 2,
Photo 3,
and also have a Featured Image.

I created a Layout for the Single "Project" Page

Following the Tutorial –
I created a View wich I would want to use as a Slider.

The Slider will display the 4 images only, no other data.
BUT each image should be one slide, totaling only 4 slides.

I think I need to add a Filter, that queries only those 4 Values of the current Single Custom Post.
Haven't found it yet...

Then, How can I set the slider to have 4 slides according to the only 4 images associated with it?

Is there any documentation that you are following?
Yes:
#1
hidden link
#2
https://toolset.com/documentation/beyond-the-basics/showcase-content-using-post-sliders/

Is there a similar example that we can see?
hidden link

What is the link to your site?
Currently on LocalHost

[Shane]

Hello,

Thank you for contacting our support forum.

What you need to do is to download the plugin below.
hidden link

The flexslider plugin that I made.

Then add this to your content template.

<div class="flexslider">
  <ul class="slides">
  <li>Shortcode for image 1</li>
  <li>Shortcode for image 2</li>
  <li>Shortcode for image 3</li>
  <li>Shortcode for featured image</li>

  </ul>
</div>

Then add this to the js section of your template.

jQuery(window).load(function() {
   jQuery('.flexslider').flexslider();
 });

Please me know if this helps.
Thanks,
Shane

[theW]

Thank you so very much for the quick and easy to follow response Shane.

I have successfully installed and added your provided code on my content template:

<div class="flexslider">
  <ul class="slides">
  <li>[wpv-post-featured-image size="custom" width="1280" height="275"]</li>  
  <li>[types field='picture-1' title='%%TITLE%%' alt='%%ALT%%' align='center' size='custom' width='1280' height='275' resize='proportional'][/types]</li>
  <li>[types field='picture-2' title='%%TITLE%%' alt='%%ALT%%' align='center' size='custom' width='1280' height='275' resize='proportional'][/types]</li>
  <li>[types field='picture-3' title='%%TITLE%%' alt='%%ALT%%' align='center' size='custom' width='1280' height='275' resize='proportional'][/types]</li>
  </ul>
</div>

After changing a few settings and removing some code from the tutorial the slider seems to work perfectly.

I might have done something wrong... Only the filtering aspect remains unsolved:

The Images should be quarried by each single Custom Post.

For example:

If I create a Custom Post Called "Dogs",
I upload the 4 images to it,
when I VIEW the Single Custom Post Page for that specific post,
(www.localhost.com/project/dogs)
only the Dogs pictures should appear in that slider.

If I create Second Custom Post named "Butterflies",
I upload the 4 images to it,
when I VIEW the Single Custom Post Page for that specific post,
(www.localhost.com/project/butterflies)
only the Butterflies pictures should appear in that slider.

So on and so on, each Single Custom Posts should only display it's own Images.

For some reason right now, the Butterfly pictures are showing in the Dogs Custom Post as well.

Any idea of how to fix this?

[Shane]

Hello,

What you need to do now is to add a query filter to your view for the Post ID. See Screenshot

Then set it for the option where the view is placed.

Thanks,
Shane

[theW]

Could you please expand on
"set it for the option where the view is placed" ?

There are only 3 options after selecting Filter by Post iD.

Please see attached.

[Shane]

Hello,

Pardon my misinformation on this one.

What you need to do is to select the option with the shortcode attribute. See my screenshot

Then when you add the view to a page then you pass the shortcode attribute into the view shortcode.

Example.

[wpv-view name="test" ids='[wpv-post-id]']

This should pass the current post ID into the view to filter it.

Please let me know if this helps.
Thanks,
Shane

[theW]

Got it! Thank you so much!
Now the slider displays the correct images per custom post!