How to create a WordPress image and video slider from WordPress media library IDs

Last updated on

Product:

Wonder Slider Version 13.3 or above

Tutorial:

This tutorial will guide you how to create a WordPress image and video slider from a list of WordPress media library IDs using the premium plugin Wonder Slider.

A demo is as follows:

Step 1 - Create a slider in Wonder Slider

In Wonder Slider, create a new slider. You don't have to add any images or videos to the slider, because we will populate the slider using media IDs in the shortcode. But if you add any images or videos, they will be added to the beginning of the slider.

Step 2 - Add media IDs to the shortcode

To add media IDs to the slider, in the slider shortcode, you can add a list of media IDs to an attribute mediaids. The media IDs must be separated with commas, for example:

[wonderplugin_slider id=64 mediaids="4314,4315,4308,12833"]

If you want to enable the lightbox effect, you can add a data option data-lightbox="true" to the shortcode, for example:

[wonderplugin_slider id=64 mediaids="4314,4315,4308,12833" data-lightbox="true"]

If you enable the lightbox effect, for videos in the slider, in the WordPress Media Library, that's, in your WordPress dashboard, go to the left Media -> Library, you need to edit the video and add a featured image to the media. The featured image will be used as the poster image in the slider for the video.

By default, the slider plugin will use the default image URL, that's, the full sized image URL in the slider, you can add a data option data-mediaimagesize to the shortcode to specify the image size, for example:

[wonderplugin_slider id=64 mediaids="4314,4315,4308,12833" data-lightbox="true" data-mediaimagesize="medium"]

The available sizes are thumbnail, medium, large and full.

The image dimensions of these sizes are defined in the WordPress Media Library. In your WordPress dashboard, you can go to the left menu Settings -> Media to view the settings.

Please note, if you change the size in the media settings page, it will only affect future images. The images that have already been added to media library will not be affected. You need to re-upload the images so the media library can resize them, or you can use a third-party plugin to resize all images according to your new settings.