Custom Lightbox

This document explains how to use the Custom Lightbox Gallery option available in the Thumbnail Action section of the Content tab in the Portfolio Posts Pro plugin.

Turning on the Custom Lightbox Gallery option will reveal the Custom Field Name for Images field in the module’s settings. Here you can enter the name of the custom field that contains a single image URL or an array of image URLs. If a single image URL is provided, this image will open in a lightbox. If an array of image URLs are provided, the images will open in a lightbox gallery.

* The image URL should contain the full URL including http:// or https://. For example:
https://example.com/wp-content/uploads/2019/06/my-image.jpg

In addition to loading images from a custom field, we’ve also added a filter for more advanced functionality.

Filter adding featured image in case custom field is empty

You may have an instance when you have added images to your custom field on some posts but not others. The following filter assumes you have entered a custom field in the module’s settings. We then check if the custom field is empty for each post. If empty, show the featured image for the current post instead. If not empty, show the images in the custom field.

function dp_ppp_custom_lightbox($images) {
    if(empty($images) && has_post_thumbnail()){
        $images[] = get_the_post_thumbnail_url();
    }
    return $images;
}

add_filter('dp_ppp_custom_lightbox', 'dp_ppp_custom_lightbox', 10, 1);

ACF gallery filter

The filter below will return an array of image URLs from the Advanced Custom Fields plugin gallery field. We are assuming in this example that the Return Format for the image gallery field in ACF is “Image Array” (default). If you have changed the return format to “Image URL” or “Image ID”, you’ll need to modify the function below to account for this. More info regarding the ACF gallery field can be found here.

function dp_ppp_custom_lightbox() {
    $gallery_images = get_field('gallery');
    $size = 'full'; // (thumbnail, medium, large, full or custom size)
    
    if( $gallery_images ):
        foreach( $gallery_images as $gallery_image ):
            $images[] = wp_get_attachment_image_url( $gallery_image['ID'], $size );
        endforeach;
    endif;

    return $images;
}
add_filter('dp_ppp_custom_lightbox', 'dp_ppp_custom_lightbox');

Filter added to module with specific CSS ID

Here we are showing how you can return different images depending on the module’s CSS ID set in the Advanced tab of the module’s settings. You’ll need to replace custom_lightbox_images1 and custom_lightbox_images2 with the name of your custom fields containing the array of images.

function dp_ppp_custom_lightbox($content, $props) {
    if (isset($props['module_id']) && $props['module_id'] === 'custom-lightbox') {
        $images = get_post_meta( get_the_ID(), 'custom_lightbox_images1', false );
        return $images;
    } else {
        $images = get_post_meta( get_the_ID(), 'custom_lightbox_images2', false );
        return $images;
    }
}

add_filter('dp_ppp_custom_lightbox', 'dp_ppp_custom_lightbox', 10, 2);

In addition to using the module’s ID, you can also use the module’s Admin Label or Class.

Admin Label – found at the bottom of the module’s Content tab:

$props['admin_label']

Class – found at the top of the Advanced tab:

$props['module_class']