Divi image gallery code

The Divi theme is a popular WordPress theme that includes a built-in image gallery module. This module allows you to create beautiful image galleries on your website. To add an image gallery using the Divi theme, you can use the following code snippet:

<?php
function wpsnippets_divi_image_gallery() {
    ob_start();
    ?>
    <div class="et_pb_gallery">
        <!-- Add your gallery images here -->
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('divi_image_gallery', 'wpsnippets_divi_image_gallery');
?>

To use this code snippet, you need to add it to your theme’s functions.php file or a custom plugin file. After adding the code, you can use the [divi_image_gallery] shortcode in your WordPress editor to display the image gallery.

This code snippet creates a custom shortcode called divi_image_gallery that generates the HTML markup for the image gallery. You can customize the gallery by adding your own images and modifying the HTML structure as needed.

Note: This code assumes that you have the Divi theme installed and activated on your WordPress website.

Examples

Example 1: Creating a Divi image gallery using the built-in module

This example demonstrates how to create a Divi image gallery using the built-in module. The code below shows how to add images to the gallery and customize its appearance.

Explanation: The shortcode is used to create an image gallery in Divi. The ids attribute specifies the image IDs to be included in the gallery. The columns attribute determines the number of columns in the gallery grid. The size attribute sets the image size to be displayed.

Example 2: Creating a custom Divi image gallery with custom styling

This example demonstrates how to create a custom Divi image gallery with custom styling. The code below shows how to use a custom PHP function to generate the gallery HTML and apply custom CSS styles.

function wpsnippets_custom_divi_gallery() {
    $gallery = get_post_gallery( get_the_ID(), false );
    $ids = explode( ',', $gallery['ids'] );

    ob_start();
    ?>
    <div class="custom-gallery">
        <?php foreach ( $ids as $id ) : ?>
            <?php $image = wp_get_attachment_image_src( $id, 'medium' ); ?>
            <img src="<?php echo esc_url( $image[0] ); ?>" alt="">
        <?php endforeach; ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'custom_divi_gallery', 'wpsnippets_custom_divi_gallery' );

Explanation: The wpsnippets_custom_divi_gallery() function retrieves the image IDs from the gallery associated with the current post. It then loops through the IDs and generates the HTML markup for the custom gallery. The add_shortcode() function is used to register the custom shortcode [custom_divi_gallery] that can be used to display the gallery.

Example 3: Adding a lightbox effect to the Divi image gallery

This example demonstrates how to add a lightbox effect to the Divi image gallery, allowing users to view larger versions of the images. The code below shows how to use a JavaScript library, such as Magnific Popup, to achieve this.

function wpsnippets_add_lightbox_to_divi_gallery() {
    wp_enqueue_script( 'magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ), '1.1.0', true );
    wp_enqueue_style( 'magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css', array(), '1.1.0' );

    ob_start();
    ?>
    <script>
    jQuery( document ).ready( function( $ ) {
        $( '.gallery-item a' ).magnificPopup( {
            type: 'image',
            gallery: {
                enabled: true
            }
        } );
    } );
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode( 'lightbox_divi_gallery', 'wpsnippets_add_lightbox_to_divi_gallery' );

Explanation: The wpsnippets_add_lightbox_to_divi_gallery() function enqueues the necessary JavaScript and CSS files for the Magnific Popup library. It also outputs a script that initializes the lightbox effect on the gallery images. The add_shortcode() function is used to register the custom shortcode [lightbox_divi_gallery] that can be used to display the gallery with the lightbox effect.