[Resolved] WordPress thumbnail slider

[Author]

Posts

[FelipeP5703]

Tell us what you are trying to do?

I followed the instructions here: https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/how-to-create-a-wordpress-thumbnail-slider-in-minutes/#how-to-create-a-wordpress-thumbnail-slider-using-toolset

I installed the Module Manager, imported the content (which by the way the images didn't import and are not showing). Went to View click in edit Portfolio slider with Thumbnails, changed the Content Selection to Anuncios.

I don't know which filter to use, so I clicked on ID and chose Posts with IDs set by this URL parameter.

Went to template for this View and changed the slug to "fotos-para-anuncio"

Added the View to Elementor's Theme Builder Template to test... and this is what it shows - hidden link

I was expecting something along the lines of what I already have on this template for the Images... only showing the images of that custom post.

So I'm totally lost on how to do this. Help pls

Thank you!

[Nigel]

Hi Felipe

People mean different things when they talk about sliders and there is a crucial point that needs clarifying before describing how to do this.

That is, is your slider supposed to transition between posts, i.e. each slide shows fields from one post, or is your slider supposed to transition between fields belonging to the same post.

So if you have an image field that can have multiple values, the slider should rotate through those images of a single post.

The techniques are very different depending on which of these you are aiming for. (The example you linked to is to rotate between different posts.)

[FelipeP5703]

Hey Nigel,

What I want is very similar to what I have currently with Elementor. I want to show the images of the custom posts as a slider. The slug for the multiple images custom field is fotos-para-anuncio.

What method should I be using?

If I can replace Elementor's slider then I can use Toolset's Template and make my life easier.

Btw, is the Layout being deprecated since the use of Glutenberg styling method?

[FelipeP5703]

Hey Nigel,

I was reading the Bootstrap 4 document here: hidden link

And it seems that they have a carousel that is very similar to the one I currently have with Elementor.

My question is this:
1) Correct me if I'm wrong but Toolset already loads Bootstrap 4 CSS files, right?
2) If so, I can basically use this Bootstrap 4 carousel instead of Elementor's one, right?
3) If so, how do I put my multiple image custom field into Bootstrap 4 html code to get the images from the post to display?
4) And how do I control the dimension of the images?

Thanks for your help. If you have any other solution where I can create a carousel similar to Elementor's without using another plugin, I'm open for suggestions.

[FelipeP5703]

Sorry Nigel, I'm all over the place.... I decided not to use Bootstrap 4 but instead to use this: hidden link

I read your instructions here: https://toolset.com/forums/topic/how-to-display-the-pics-i-uploaded-as-a-slider/#post-518295
But the arrows are not working properly as you can see it here: hidden link

But how do I get the same look as the flexslider website? With the thumbnails and the arrows?

Thank you in advance

[Nigel]

Hi Felipe

OK, when displaying one post you want to display the images belonging to a custom field of that post as a slider, got it.

The instructions you started out with refer to the different kind of slider, where each slide comes from a different post.

When I visit your latest link, I notice that you have a JavaScript error in the console, arising from using $ for jQuery when the shortcut hasn't been assigned yet.

You should change '$' to 'jQuery' in such code, or set it up like so so that you can continue to use $:

( function( $ ) {
	$( document ).ready( function(){
		// Your code here

	});
})( jQuery );

Now, I notice that the arrows are working (when you hover the main image) but they have styling issues.

I suspect that is because of a clash in the flexslider CSS and the Bootstrap 4 CSS. If you go to Toolset > Settings and disable Bootstrap you may find the problem with the arrows fixed. If you want to be able to continue to use Bootstrap 4 you would need to use your browser dev tools to examine the CSS rules being applied to identify what you can change to fix the problem.

As for the absence of the thumbnails the most likely explanation is you didn't include the JS option for thumbnails when initialising the flexslider, as described at the bottom of the example page at hidden link

[FelipeP5703]

I had the code correctly like yours: hidden link

I can't disable Bootstrap 4 because I'm using for other things. Is it possible to use Bootstrap arrows then?

About the thumbnails - I added them - hidden link - but they are still not showing. And now the images are not showing.

Here is my html code:

<div class="col-sm-4 flexslider">
          <ul class="slides">
              [wpv-for-each field="wpcf-fotos-para-anuncio"]
              <li data-thumb='[wpv-for-each field="wpcf-fotos-para-anuncio"][types field='fotos-para-anuncio' align='center' size='thumbnail' resize='proportional' separator=', '][/types][/wpv-for-each]'>
                [types field='fotos-para-anuncio' align='center' size='custom' width='400' height='600' resize='pad' padding_color='#ffffff' separator=', '][/types]
              </li>
              [/wpv-for-each]
          </ul>
      </div>

I'm not sure if I put it correctly for the thumbnail images. I'm not a coder.

And here is the JS code:

( function( $ ) {
    $( document ).ready( function(){
 
      $('.flexslider').flexslider({
        animation: "slide",
    	controlNav: "thumbnails"
      });
 
    });
})( jQuery );

[Nigel]

Hi Felipe

I'm not sure what you are intending by adding that data-thumb attribute, that's what has broken your slider.

The correct markup would be:

<div class="col-sm-4 flexslider">
    <ul class="slides">
        [wpv-for-each field="wpcf-fotos-para-anuncio"]
        <li>
            [types field='fotos-para-anuncio' align='center' size='custom' width='400' height='600' resize='pad' padding_color='#ffffff' separator=', ' ][/types]
        </li> 
        [/wpv-for-each]
    </ul>
</div>

The JS looks correct and seem to be working.

Can you check that?

[FelipeP5703]

Well I changed because you said that it was not the correct html in order to show the thumbnail, so I went to: hidden link

And noticed that the

tag had it:

<li data-thumb="slide1-thumb.jpg">
      <img src="slide1.jpg" />
    </li>

Thus my assumption was that I was missing the data-thumb in order to show the thumbnail. So I just repeated but using the shortcode wpv for each and type.

I also noticed that after adding this code below to JS, the dots below that showed how many pictures disappeared.

controlNav: "thumbnails"

I still can't see the thumbnails: hidden link

How do I add them like the site?

[FelipeP5703]

I gave up on flexslider. I'll keep using Elementor's slider instead. My issue is resolved now. Thank you!