Dynamically add Items to Video Slider Module

|

Divi comes with a video slider module that lets uses select from a collection of videos. Normally, you have to add these videos within the video slider module settings. If you instead want to dynamically populate the video slider from a list of video URLs, here's how to do it.

Step 1: Add PHP Code

First, we'll add some PHP code that will do the heavy lifting for us. You only need to add it once, and shouldn't need to modify it. It's main function is to scan the content of the page for Divi's video slider shortcode and add a video slide item for each of an array of videos.

class DBCDynamicVideoSlider {

    public function __construct($id, array $videos) {
        $this->id = $id;
        $this->videos = $videos;
    }

    public function init() {
        add_filter('the_content', array($this, 'modify_slider'));
    }

    function modify_slider($content) {
        return preg_replace_callback(
            '/(\[et_pb_video_slider [^]]*module_id="'.preg_quote($this->id, '/').'"[^]]*\])(.*?)(\[\/et_pb_video_slider\])/is', 
            array($this, 'add_slides'), 
            $content
        );
    }

    function add_slides($match) {
        $items = array();
        foreach($this->videos as $url) {
            $items[] = str_replace(
                ' src="https://www.youtube.com/watch?v=FkQuawiGWUw"', 
                ' src="'.esc_attr($url).'"',
                $match[2]
            );
        }
        return $match[1].implode('', $items).$match[3];
    }
}

Step 2: Set up the Video Slider Module

First, add a video slider module to your page. It should by default have a single video, called "New Item" configured with the URL for a video about Divi, i.e.:

Leave that video configured as is. You can style it if you like, but leave the Divi video in place. Our code below will use the item as a template. Don't delete the "New Item" video, or add any other items.

Now give the Video Slider module a CSS ID of (for example) "dynamic-slider" at:

Video Slider Settings > Advanced > CSS ID & Classes > CSS ID

Like so:

Step 3: Load the Videos via PHP

Now we need to call our earlier PHP code with the CSS ID of our slider and a list of videos to use. Here I'm just specifying the videos in a PHP array directly, but in a more realistic scenario these might be pulled in from a custom field, or retrieved from an external API.

$videos = array(
    'https://www.youtube.com/watch?v=cbP2N1BQdYc', // cat video #1
    'https://www.youtube.com/watch?v=lZqqMtW87hU', // cat video #2
    'https://www.youtube.com/watch?v=jk0is7dZrK0', // cat video #3
    'https://www.youtube.com/watch?v=uHKfrz65KSU', // cat video #4
);

(new DBCDynamicVideoSlider('dynamic-slider', $videos))->init();

Step 4: View the Result

If all is well, we should now see our videos displayed in the video slider on the front-end, e.g.:

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published.