[Resolved] Best approach to have a slider on every custom post type

[Author]

Posts

[simonV-3]

Tell us what you are trying to do? I like to have a slider with images (they needs to be able to edit/add per user (external users) - between 3 to 5 images (max 5).

hidden link

Is there any documentation that you are following? I try to follow this: https://toolset.com/forums/topic/custom-image-fields-child-type-create-slider/

But I am not sure where I should start. I created a separate custom post type and trying to create a relationship - but not sure if this is the easiest way. It just should be an easy slider.

hidden link

Instead of one image, I like to have a slider.

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

What could be a best approach. I not use WordPress Blocks!

What is the link to your site?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Your understanding is correct and I'll also recommend adding a custom post type for this. You can name the custom post type something like "User Profiles".

When a new user registers, you can include a "Add new user profile" form on the page that they see after logging in. And for every user, you'll need to have exactly one user profile post, where that user is the post author.

Next, you can add a repeating image type field with this new post type, so that users can upload their images while creating their user profile.

Once you have the images in a custom field, you'll be able to show them in a slider using the slider block.

Here are some useful guides on the topic:
https://toolset.com/lesson-placement/lesson-placements-1824663-1598997/
https://toolset.com/2020/07/how-to-create-wordpress-sliders-for-static-and-dynamic-content/

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[simonV-3]

Dear Waquar

To let You understand - this with the users I am doing later.

The main custom post type are Muay Thai Gym's. Each of them will have then up to 5 images. So You advise to add a Repeatable Group? Like this: hidden link

As I wrote earlier: I not use WordPress Blocks! So I might just need to do a view? And add this view in my template?

Regards,

Simon

[Waqar]

I apologize that I missed that you're not using the Blocks editor.

Without the Blocks, you'll need some custom code to create an image slider that you're looking for.

You'll find a good example with steps in this reply from another thread:
https://toolset.com/forums/topic/image-slider-with-thumbnail-carousel/#post-1338789

Note: The screenshot that you share, is showing the repeatable field group. The solution that I'm sharing doesn't involve that. It just involves an image type field, that is set to have multiple instances.
( screenshot attached )

[simonV-3]

Dear Waqar

I can use any slider script. Correct?
Are I am also able to put it together in function.php and create a short code? I like to do some conditional output logic, if there aren't any images, it should use the featured image.

Regards,

Simon

[simonV-3]

Dear Waqar

I tried to add it...

hidden link

But I not get anything. It should be under the main text. I am not sure what I am doing wrong...

Regards,

Simon

[simonV-3]

Dear Waqar

I am getting close to there, where I like to be...

hidden link

Next step is, to have a conditional logic, so whenever there are no additional images for the slider, it should show the featured image. How do I add the conditional output?

In the contant templae I am having this:

<link type="text/css" rel="stylesheet" href="[wpv-bloginfo show='url']/wp-content/themes/Impreza-child/dist/css/lightslider.css" />                  
<script src="[wpv-bloginfo show='url']/wp-content/themes/Impreza-child/dist/js/lightslider.js"></script>

<ul id="imageGallery">
[wpv-for-each field="wpcf-my-slider-images"]
<li data-thumb="[types field='my-slider-images' url='true' size='thumbnail'][/types]">
    <img src="[types field='my-slider-images' url='true' size='full'][/types]" />
</li>
[/wpv-for-each] 
</ul>

and in the js editor below:

jQuery(document).ready(function() {
    jQuery('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:true,
        thumbItem:9,
        slideMargin:0,
        enableDrag: false,
        currentPagerPosition:'left',
    });  
});

Addditional, it would be great, if can have the slider automatic sliding.

Regards,

Simon

[Waqar]

Hi Simon,

Thanks for the update and glad that my message helped.

Yes, you can use any slider script and you just have to include the images in that script's supported HTML structure.

For the conditional check, you can use the conditional out feature, as explained here:
https://toolset.com/documentation/legacy-features/views-plugin/conditional-html-output-in-views/

Example:

// Use images from the "my-slider-images" field, if they exist
[wpv-conditional if="( $(wpcf-my-slider-images) ne '' )"]
<ul id="imageGallery">
[wpv-for-each field="wpcf-my-slider-images"]
<li data-thumb="[types field='my-slider-images' url='true' size='thumbnail'][/types]">
    <img src="[types field='my-slider-images' url='true' size='full'][/types]" />
</li>
[/wpv-for-each] 
</ul>
[/wpv-conditional]

// Use featured image when no image exists in "my-slider-images" field
[wpv-conditional if="( $(wpcf-post-images) eq '' )"]
<ul id="imageGallery">
<li data-thumb="[wpv-post-featured-image output='url']">
    <img src="[wpv-post-featured-image size='full' output='url']" />
</li>
</ul>
[/wpv-conditional]

And to enable the automatic sliding, you can set the "auto" option to "true":

jQuery(document).ready(function() {
    jQuery('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:true,
        auto: true,
        thumbItem:9,
        slideMargin:0,
        enableDrag: false,
        currentPagerPosition:'left',
    });  
});

regards,
Waqar

[simonV-3]

My issue is resolved now. Thank you!