[Resolved] how to display the pics I uploaded as a slider

[Author]

Posts

[Jeffrey]

I am now using Avada and Toolset to build my project, and want to display the uploaed images onto top of front end at posts. I have tried to use loop cell, but I do not know how to make images as a slider. thanks!

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

Hi Jeffrey

Views has a slider functionality, but it is for transitioning between posts rather than rotating through images attached to the same post.

The Avada theme comes with built-in sliders, but these require you to manually upload the images to the sliders, you cannot have them pull the images that are attached to the post as custom fields.

There is no ready-made solution for what you want to do, it will require some work on your part to add a slider that take the images from the custom fields of the current post.

I have described what's involved before, so let me link to that here: https://toolset.com/forums/topic/how-can-i-use-views-query-filter-to-display-slides-only-from-current-post/#post-498371

If you try to set this up and run into problems, let me know.

[Jeffrey]

Hi Nigel, thank you for your detailed response, but it is so difficult for me to set up the code actually. because I do not have any foundation on coding. could you please help me to set up this function to my post? thanks

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

Hi Jeffrey

Let me walk you through the steps and hopefully you will be able to do this on your site.

Firstly, you are going to need to add a little PHP code to your site, which you can add to the end of your theme's functions.php file, but if you are not comfortable editing that you can use a plugin such as Code Snippets and add (and activate) a snippet with the code there.

The PHP code is needed to add the flexslider library code and CSS to your site.

Go to hidden link and use the download button.

That will download a zip file, which you need to expand. We only need two files: jquery.flexslider-min.js and flexslider.css. Go to the folder for your theme (e.g. wp-content/themes/twentyseventeen) and make a new folder called flexslider and copy those 2 files into that folder.

Now add the following PHP:

function enqueue_flexslider(){

	if ( !is_admin() ) {

		wp_enqueue_script( 'flexslider-js', get_theme_file_uri( '/flexslider/jquery.flexslider-min.js' ), array( 'jquery' ), '1.0' );
		wp_enqueue_style( 'flexslider-css', get_theme_file_uri( '/flexslider/flexslider.css' ), array(), '1.0' );

	}

}
add_action( 'wp_enqueue_scripts', 'enqueue_flexslider' );

If you are using Code Snippets, make a new Snippet and give it a title (e.g. "Enqueue flexslider files"), specify it is only required on the front end and save and activate.

If you were to visit the front-end of your site you should find that the two flexslider files above have been added to the page.

So now your task is to create the output of the image fields used for the slider so that it has the required format to work with flexslider.

On my local test site I have a custom post type of Projects and I created a custom field group for Projects which includes a repeating image field ('slides') so that I can add multiple images to a Project to be displayed in the slider. You can see an example post where I have added several images in the screenshot slides.png.

So now I create a Content Template for single Projects.

The template looks like this:

[wpv-post-body view_template="None"]

<h2>Project images as a slider</h2>
<div class="flexslider">
    <ul class="slides">
        [wpv-for-each field="wpcf-slides"]
        <li>
            [types field='slides' alt='%%ALT%%' title='%%TITLE%%' size='large' align='none' resize='proportional' separator=', '][/types]
        </li>
        [/wpv-for-each]
    </ul>
</div>

Note my image field is called slides and so I'm using 'wpcf-slides' in the Views shortcodes above, you will need to edit these for the slug of your image field.

That will output the images with the required markup, so all that is left is to initialise the flexslider code.

In the JS editor of your content template add the following code:

( function( $ ) {
	$( document ).ready( function(){

      $('.flexslider').flexslider({
        animation: "slide"
      });

    });
})( jQuery );

Now when you view your posts on the front end the images will be displayed in the slider.

When you look at the flexslider page at hidden link you will see that you can modify the options for how the slider looks and works, and there are examples of how to change the options on those pages which you can use to modify the Javascript we added in the last section.

Good luck!

[Jeffrey]

thank you for your detailed introduction, I will try it in a couple days, if everything is going well, I wil let you know, thanks again 🙂

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

Hi Jeffrey

No problem, keep me posted.

[miguelG-5]

Hi Nigel

Can you please give me the link to download Flexslider ? (Go to hidden link and use the download button.)

Is this Flexslider from woothemes ?

Thanks in advance

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

Yes, it is the woothemes flexslider, correct: http://flexslider.woothemes.com/

[andresG-3]

Hi im following this thread because i have the same use case.

Where can i put this code js.code?

( function( $ ) {
$( document ).ready( function(){

$('.flexslider').flexslider({
animation: "slide"
});

});
})( jQuery );

Im using content templates with beaver builder theme
I Cant find JS editor of my content template to add the code

thanks in advance