How to integrate Spotlight gallery library into your WordPress website [no plugin] 5 (2)

Introduction

Today I am going to explain to you how I integrated Spotlight gallery library into a WordPress website, without any plugin, just coding.

Note on WordPress

If you’re developing a website with WordPress, you must be able to modify any sort of code (PHP, HTML/CSS/JS) in order to avoid an enormous load of plugins, and the consequent slowness of your website. I noticed that a lot of people define themself as “WordPress developers”, but they can only work within the WordPress interface. Beyond that, they are pretty lost! Database, hosting, and code: there is a ton of knowledge to get before you can master the web.

At best, we are speaking about a specialist of the platform, not a developer. I recently crossed the path of a business owner that uses WordPress for his e-commerce. This poor e-commerce is a WordPress instance with Woocommerce installed on it. In the beginning, this project was built by 3 designers, then by an IT systems engineer… This installation was bloated with almost 90 plugins! Page speed on mobile was 2… I spent most of the time removing stuff, and add/move code into the child theme or whatever.

So, back to our gallery: what is your next step if you want to integrate a new gallery into your WordPress instance? Probably you’ll seek a plugin. Then you’ll spend hours integrating the plugin and reading the documentation, and probably this ends up covering 70% of what you were expecting. For that reason, if you master the programming language you can achieve better results.

What is Spotlight

According to its Github, Spotlight is the web’s most easy-to-integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies. A time ago I was looking for a light gallery solution to implement it onto a demo website for Digital Mastiff and I opted for this library because at a glance it was really promising.

Integrate Spotlight into WordPress

Now we know what’s Spotlight, but how can we integrate it into our WordPress? First of all, we need to enqueue the style and the script of the library. Spotlight is basically a 2 files library: spotlight.min.css and spotlight.min.js. You can also use the bundle, but for this tutorial, I will use single files.

So, in your child theme you must add the action wp_enqueue_scripts, like that:

function child_theme_enqueue_styles() 
{
    /* CSS */
    wp_enqueue_style( 'spotlight-css', get_stylesheet_directory_uri() . '/css/spotlight.min.css' );

    /* JS */
    wp_enqueue_script( 'spotlight-js', get_stylesheet_directory_uri() . '/js/spotlight.min.js', array(), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

We use lowercase letters in action and function names (never camelCase), separating words via underscores as it is stated by the WordPress PHP Coding Standards.

Add a new gallery

First, edit the post or page where you want to add the image gallery. On the post edit screen, click on the Add New Block icon (+ icon) and select the Gallery block. This will add the Gallery block to your WordPress editor where you can click on the ‘Upload’ button to upload photos from your computer or select from previously uploaded photos in the media library. Here the documentation.

Add a class to your images

In order to activate the Spotlight on your images, you need to add the class “spotlight” on your images. You can achieve this goal in two ways: using PHP or Javascript.

Add a class to your images with PHP

We can get the content of the page (or post) using the WP filter the_content, and then we can easily add the new class “spotlight” to all the images. The code is commented so you can get the logic used for each row.
You can improve the function and trigger it only when needed.

add_filter( 'the_content', 'add_spotlight_class_to_gallery_image' );

function add_spotlight_class_to_gallery_image( $content ) 
{
    // Get the post object
    global $post;

    // Create a new DOMDocument object
    $doc = new \DOMDocument();

    // Load the content of the post/page
    $doc->loadHTML( $post->post_content );

    // Get all the images and loop over them
    $imgs = $doc->getElementsByTagName( 'img' );
    foreach ($imgs as $img) 
    {
        // Get the current class of the img
        $class = $img->getAttribute( 'class' );

        // Add a new class the the current one
        $img->setAttribute( 'class', $class . ' spotlight' );
    }

    // Save the new post content
    $post->post_content = $doc->saveXml();

    // Return the content 
    return $content;
}

Add a class to your images with Javascript and JQuery

More simple than the PHP code above, we can add a new class with Javascript or JQuery. Below:

// Javascript
if( document.querySelector( '.wp-block-gallery' ))
{
    Array.from(document.querySelectorAll( '.wp-block-gallery img' )).forEach(( element,index ) =>
    {

         element.classList.add( 'spotlight' );
    });
}

// JQuery
if( jQuery( '.wp-block-gallery' ).length > 0 )
{
    jQuery( '.wp-block-gallery img' ).addClass( 'spotlight' );
}

And that’s it! Open your gallery page with a browser, and click the images.

Conclusion

You can find the Spotlight library on Github.
This gallery is very simple to integrate on WordPress or whatever technologies you are using for your website (static PHP website, Laravel/Symfony views, etc). It’s a frontend library actually, then you just need your basic HTML!
And remember: once you’re getting confident with PHP and Javascript, WordPress will not have any secrets anymore.

Here you can see the library in action: https://staging.digitalmastiff.com/artist-demo/gallery/

Thanks for your time, I hope you got some new information about WordPress and Spotlight. Let me know what do you think about this article through the comments or send me a message!

Read more…