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 one image in the gallery view and a completely different image in the Lightbox view!

• Requirements
• Setup
  1. Create or Edit Your Gallery
  2. Edit your gallery images
  3. Disable the Lightbox Thumbnails
  4. Publish or Update Your Gallery
• FAQ
  • Why are my lightbox thumbnails still showing the gallery image and not the lightbox image?
  • Why is it still showing the same image?

---

Requirements

• Ultra, Pro, Plus, or Basic Envira license. You can read how to upgrade to one of these licenses here.
• WordPress 4.9+
• Envira Gallery 1.8.0+

Setup

Step 1 – Create or Edit Gallery

First, you’ll need to either create a new gallery or edit an existing gallery. If you need any help, check out our guide on creating your first gallery.

Step 2 – Edit Gallery Images

The 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.

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 to 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.

Step 3 – Disable the Lightbox Thumbnails

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?.

Step 4 – Publish or Update the Gallery

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 to find out how to create an external link gallery? Check out our tutorial here on Using External Links in Envira Gallery!

---

FAQs

Q: Why are my Lightbox thumbnails still showing the gallery image and not the Lightbox image?

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 to Enable Gallery Thumbnails?

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

---

Q: Why is it still showing the same 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.