Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Show a Different Lightbox Image Using Envira Gallery

Would you like to show one image for your gallery and show a different image in the Lightbox? You can easily do this with Envira Gallery! This tutorial will walk you through the steps on how to show 1 image in the gallery view and a completely different image in the Lightbox view!

First you’ll need to either create a new gallery or edit an existing gallery. If you need any help creating your first gallery, please review our documentation here.

You’re next step will be to edit each image in your gallery to provide the correct URL the image should link to. Just find the URL to the lightbox image you wish to show from your Media Library and paste that URL in the field below.

To do this, start by clicking the blue pencil icon to edit the image. A new window will open called Edit Metadata.

Click the blue pencil icon to edit the gallery iamge

On this screen, you’ll see the image on the left and the metadata of that image on the right which contains the Title, Caption etc. Scroll down until you see the URL field.

In the URL field, type or copy and paste the URL to the Lightbox image you want the gallery image to link to.

Once you’ve finished, scroll all the way down until you see the Save Metadata button. Click Save Metadata to save the changes on this gallery image.

Using the right and left arrow keys at the top of the Edit Metadata window you can scroll through the remaining images in your gallery repeating these steps. Once you’ve finished, just click the X button to close the Edit Metadata window.

Change the URL to the image to use a different lightbox image

You’ll need to turn off the lightbox thumbnails on the Lightbox tab and the Mobile tab. Navigate to both of these tabs to uncheck the Enable Gallery Thumbnails?.

Remember to disable the lightbox thumbnails on the Mobile tab and the Lightbox tab

Finally click Publish or Update on your gallery to save your changes!

Click any image below to see this in action!

See the demo.

Would you like find out how to create an external link gallery? Check out our tutorial here on Using External Links in Envira Gallery!

A: Be sure when creating this type of gallery that you’ve went to the Lightbox Tab and the Mobile Tab and unchecked the option for Enable Gallery Thumbnails?

The Lightbox thumbnails will use the gallery image to create the thumbnail and not the Lightbox image.

A: Images with similar filenames can confuse the lightbox script. It will look at the first 10 characters of the image file, if the filenames are similar and it’s more than 10 characters, it will show the same image in the lightbox.

If you don’t want to take the time to rename the images and re-upload them, just create a custom plugin with this code:

<?php
/**
* Plugin Name: Envira Gallery - Check Filename
* Plugin URI: https://enviragallery.com
* Version: 1.0
* Author: Envira Team
* Author URI: https://enviragallery.com
* Description: Check the filenames
*/

// First few characters don't match, likely this is a different image in the same upload directory
// The number can be changed to literally anything.
if ( $pos <= apply_filters( 'envira_gallery_check_image_file_name', 25, $filename_image, $filename_link, $data ) ) {
    return $item;
}
  1. Open a text file and make sure that it is a plain text document. You can use a plain text editor like Notepad or a code editor of your choice.
  2. Next, copy and paste the code above into the file and save the file as envira-check-filename.php. Remember to set the value of the transition you desire. (5000 = 5 seconds).
  3. Once you have saved the file you can easily upload this directly to your /plugins directory on your server using FTP or you can right-click on the text document and zip (or compress).
  4. Finally, log in to your WordPress dashboard and go to Plugins » Add New » Upload Plugin and upload the .zip file you just created in the previous step.