Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Using Envira Galleries and Page Builder Tabbed Content

Share This Post!

Would you like to add your Envira galleries into a tabbed content created using a page builder? This tutorial will help walk you through how to get your galleries to reload when the tab containing the gallery is active.

This tutorial is a bit more technical than our other docs, but we’ll walk you through the process step by step. In order to create your galleries in tabbed content areas, we’ll need to create and upload a basic WordPress plugin.

Creating the Plugin

The method you use depends on which page builder you’re using. First, you’ll create the plugin and then you’ll choose the code that references your specific page builder plugin shown below.

If you’re unsure how to create a plugin file, follow these steps below:

  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 shown below that matches the page builder you’re using into the file and save the file as envira-tabbed-content.php
  3. Once you’ve 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.

For Visual Composer, use the following code:

<?php
/**
* Plugin Name: Envira Gallery - Envira Tabbed Content
* Plugin URI: http://enviragallery.com
* Version: 1.0
* Author: Envira Gallery Team
* Author URI: http://enviragallery.com
* Description: Register a click handler to reload Envira Gallery layouts when using the Visual Composer tabs.
*/
/**
* Reload Enviratope on item click
*/
function envira_gallery_reload_enviratope_vc( $data ) {
    ?>
    
    // Modify '.vc_tta-tab a' to the class or id of your tab output
    $(document).on("click", '.vc_tta-tab a', function(e) {
        envira_container_<?php echo $data['id']; ?>.enviratope('reloadItems').enviratope();

    });

    <?php
}
add_action( 'envira_gallery_api_enviratope', 'envira_gallery_reload_enviratope_vc' );

For Beaver Builder, use the following code:

<?php
/**
* Plugin Name: Envira Gallery - Envira Tabbed Content
* Plugin URI: http://enviragallery.com
* Version: 1.0
* Author: Envira Gallery Team
* Author URI: http://enviragallery.com
* Description: Register a click handler to reload Envira Gallery layouts when using the Beaver Builder tabs.
*/
/**
* Reload Enviratope on item click
*/
function envira_gallery_reload_enviratope_bb( $data ) {
    ?>
    
    // Modify '.fl-tabs-label' to the class or id of your tab output
    $('.fl-tabs-label').on("click", function(e) {
        envira_container_<?php echo $data['id']; ?>.enviratope('reloadItems').enviratope();

    });

    <?php
}
add_action( 'envira_gallery_api_enviratope', 'envira_gallery_reload_enviratope_bb' );

For Elementor, use the following code:

<?php
/**
* Plugin Name: Envira Gallery - Envira Tabbed Content
* Plugin URI: http://enviragallery.com
* Version: 1.0
* Author: Envira Gallery Team
* Author URI: http://enviragallery.com
* Description: Register a click handler to reload Envira Gallery layouts when using the Elementor tabs.
*/
/**
* Reload Enviratope on item click
*/
function envira_gallery_reload_enviratope_el( $data ) {
    ?>
    
    // Modify '.elementor-tab-title' to the class or id of your tab output
    $('.elementor-tab-title').on("click", function(e) {
        envira_container_<?php echo $data['id']; ?>.enviratope('reloadItems').enviratope();

    });

    <?php
}
add_action( 'envira_gallery_api_enviratope', 'envira_gallery_reload_enviratope_el' );

Activate the Plugin

Your next step is to activate the plugin you just uploaded. Simply navigate to the Plugins from within your WordPress dashboard and activate the Envira Gallery – Lightbox Linking plugin.

Activate the plugin to reload the gallery inside a tabbed content area

And that’s it! When you click the tab that contains the gallery, your gallery will show correctly in your tabbed content area.

If you would like to extend Envira galleries in other ways, check out this tutorial on how to add an Featured images for your galleries and albums.


FAQs

Q: What should I do if my page builder plugin isn’t listed?

A:┬áDon’t worry, if your page builder isn’t listed in this tutorial, please contact our support and we’ll be happy to help update this documentation as we add more page builders. In most cases we’ll be able to update the code used and target the page builder you’re currently using.


Share This Post!