Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Debugging Envira

If you experience issues with Envira Gallery, one of the first steps you can take is debugging the issue. Not only does this help our support team better solve your problems, but it also gives tech-savvy users a chance to resolve their issues on their own. 

We’re always working to improve Envira’s compatibility with other products, but there are a lot of plugins and themes out there. So, due to the sheer number of plugins, addons, and themes for WordPress, we cannot guarantee that the Envira Gallery will be compatible with all of them. That’s why we provide this debugging guide to help you identify some of the common issues that arise with our plugin. 

Throughout this guide, you will see repeated references to PHP, MySQL, JavaScript, debugging consoles, and so on. While some aspects of this document are geared for technically inclined users, there are several diagnostics and solutions available even for users new to WordPress. 

Requirements

If you attempt to debug any issues with Envira Gallery, it’s best to have your software and platform updated to their latest versions (accurate as of May 2020):

  • WordPress v. 5.4
  • PHP v. 7.3
  • MySQL v. 5.6 or MariaDB 10.1

Likewise, you’ll do most of your debugging through your web browser. Ensure that you have all your browser software updated as well:

  • Chrome version 80 (released 4/20)
  • Firefox version 74 (released 3/20)
  • Microsoft Edge version 45 (released 4/20)
  • Safari version 13 (updated 3/20)

This documentation shows vital steps and known issues that will get you up and running without ever submitting a support ticket.

Here’s what you need to know about debugging Envira Gallery:

If you experience an issue stemming from Envira Gallery, there are a few quick and easy steps to take before submitting a request for support. We recommend that you follow them in this order to protect your site and your data:

    1. Make a backup of your site before debugging: When you’re working with WordPress’ underlying files and code, you can easily make changes to your site that you can’t take back. That’s why we recommend making a backup of your site. Most reputable hosting service providers will give you automatic backups on their servers, but you can also make a local backup of your entire WordPress site for extra security. Learn how to backup your site.
    2. Check for any conflicts with your themes or plugins: Other plugins and themes can impact how the Envira Gallery works with your WordPress installation. If you’re seeing unexpected behavior, troubleshoot plugin and theme conflicts to locate the root of the issue. Learn how to check for a theme or plugin conflict.
    3. Check mobile compatibility. If you only experience the issue on mobile devices, make sure that the device you’re testing on is within the past two versions of iOS for iPad and iPhone.
    4. Browser Debugging: You can use your browser to check for JavaScript errors that might indicate the specific cause of the issue you’re experiencing. Learn how to browser debug.
    5. Enable debugging. PHP, the code used by WordPress to interact with the database, doesn’t necessarily come with debugging turned on by default. Learn how to enable debugging.

If after completing the above you’re unable to identify or resolve the issue, please proceed to our Getting Support guide.

Before you start debugging any issues with Envira Gallery, you’ll need to set things up to do so effectively. That means enabling debugging in PHP, understanding how to open the debugging console, and ruling out any conflicts between Envira Gallery and other plugins or themes. 

First, make sure you have a backup of your site so that you don’t lose important information. Learn how to back up your WordPress site here.

Enable Debugging

WordPress PHP doesn’t enable debugging by default. You’ll have to enable it manually in your wp-config.php file, usually located in the root folder of your WordPress website.

In wp-config.php, add the following code:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Then, at the bottom of the file, add this, as well:

ini_set('log_errors', 'On');
ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

If you have never manipulated back-end WordPress PHP files, then consult with WordPress’s guide to wp-config for best practices. Their guide will help you better understand where to insert the code. Also note that if you fear there might be errors due to this code, you can open the wp-content/debug.log file located in the wp-content folder.

Debugging in the Browser

Web browsers include tools that help you debug frontend code like JavaScript, a critical part of WordPress and Envira Gallery. We recommend using Google Chrome to debug any frontend issues or issues with your WordPress site. 

  1. Point your browser to the page where the error is occurring. 
  2. Right-click on the page (directly on the space with the error, if possible) and select Inspect Element from the popup menu. The debugging window will appear. 
  3. Click on the Console tab.

Any errors on the page will appear in red. You can use this information to solve your issue on your own or include it in a support ticket with Envira Gallery support.

Check for Plugin or Theme Conflicts

The reality of a project like WordPress is that with so many themes and plugins, it’s inevitable that some of them might conflict with one another. This is just as true for a plugin like Envira Gallery. 

Before debugging your problem, double-check to see that there isn’t a conflict with your theme or other installed plugins:

  1. Disable (don’t uninstall) your other plugins. Keep Envira Gallery activated.
  2. Switch your WordPress theme to a default theme like Twenty-Sixteen, Twenty-Nineteen, or Twenty-Twenty.
  3. Clear the cache and refresh your browser.
  4. Point your browser to the page(s) that had problems. Try in multiple browsers to see if the issue is uniform across all of them. 
  5. If you see that the problem has disappeared, then reactivate each of your plugins one at a time and check the issue until you see which plugin or theme was causing the issue.

These issues are more technical, in that they typically impact the functioning of the backend of the plugin:

Most likely this error is due to an unsupported version of PHP. 

Resolution

Check your browser console and look for an error that says:

Uncaught SyntaxError: Unexpected token <

This could be due to the version of PHP on your server, specifically if it is older than version 5.6. Note: WordPress recommends using at least PHP 7+.

Additionally, this could be an issue related to the Gallery Slug. Go to the Miscellaneous Tab and ensure there are no special (non-letter or non-number) characters in the slug field. Spaces in WordPress slugs are represented by hyphens.

Also please be sure that each slug name is unique. You should use the same slug name with anything in WordPress including Envira galleries and albums: 

2. The Settings menu isn’t available

The most likely issue is that you haven’t activated your paid Envira Gallery license. If you are running Envira Gallery Lite, you’ll need to buy a paid license and activate your plugin. 

If you’re using the X Theme, you’ll need to follow their documentation for enabling the Settings menu item to be visible before you can verify your Envira Gallery license key and access the Addons menu screen.

Resolution

Check out the X theme documentation as relates to the Envira Gallery.

Also, add the following line of PHP code to your functions.php file:

1 function x_envira_gallery_remove_license_functionality() { return true; }

Remember, it could also be that you haven’t yet activated the Paid version of Envira. If you’re still running the Lite version,  please follow these guidelines for upgrading from Envira Lite to the Paid version of the plugin.

3. The Addons menu isn’t available

Like the above issue, you most likely haven’t enabled your paid Envira Gallery license.  

Resolution

Purchase your paid version of Envira Gallery and enter your verification key. Clear the Envira Gallery cache and refresh the page. You should now see the Addons tab in the left-hand WordPress menu. 

4. Plugin updates are not matching up with site updates

This happens when your WordPress system doesn’t pick up the fact that we have released a new update. 

Resolution

Go to the Plugins page in your WordPress Dashboard and refresh the page. When you refresh this page, it manually forces WordPress to check for updates. Envira will be added into those updates if there is indeed an available update to the plugin (or Addons).

5. I get the Error set_time_limit

Envira manually sets server timeout settings to optimize image processing and loading. If the server host restricts this action, you’ll see a set-time-limit error that looks like this:

Warning: set_time_limit(): Cannot set max execution time limit due to system policy...
Resolution

Resolving this issue requires you to contact your host provider and convince them to give you permissions to modify set_time_limit. Once this is enabled on your server, the error will no longer display.

6. My standalone page shows a 404 error

Problems can occur if your Envira Gallery slug is the same as the slug for a standalone post or page. This prevents your galleries and albums from loading. 

Resolution

We suggest changing the slug for your Envira Gallery. Best practices include meaningful words that refer to the elements in the gallery and are unique to that gallery. In addition to resolving this error, such practices will also increase the SEO for your albums and galleries.

If you are still having the issue, you can flush permalink rewrite rules in the WordPress dashboard. Just go to Settings » Permalinks from your WordPress admin and simply click Save again to flush out the rewrite rules used for finding permalinks in WordPress:

Envira Gallery Known Issues: Frontend

  1. Images aren’t being cropped, even though cropping is enabled.
  2. Lightbox is enabled but images don’t open in lightbox view.
  3. Gallery images opening in two lightboxes on same page.
  4. Lightbox settings are not being applied.
  5. Lightbox thumbnails are black or missing.
  6. [Object object] has no method ‘enviratope’ or [Object object] has no method ‘envirabox’.
  7. Loading icon gets stuck and gallery doesn’t appear.
  8. Pinterest buttons don’t show when enabled.
  9. Image size changes aren’t being applied.
  10. The requested content cannot be loaded.
  11. Enfold Hover Styles don’t work.
  12. Duplicate or triplicate lightbox images occur.
  13. Fullsize gallery images repeat under gallery.
  14. Envira doesn’t load on the page.
1. Images are not being cropped when Crop Images is Selected

WordPress sometimes loads full-size images even when you’ve cropped the images on the platform using Envira Gallery. This typically happens when you’re using the Jetpack Performance and Speed (formerly Photon) module to load images more efficiently. This module uses a global Content Delivery Network (CDN) to serve images, which may interfere with loading. 

Resolution

Disable the global CDN operation in Jetpack by clicking on JetPack » Settings » Performance & Speed and unselecting the CDN option.

Keep in mind that, when using any CDN to serve your images, Envira does not have the correct permission to create any cropped images for you. This includes the Envira Watermarking Addon.

2. Images don’t open in Lightbox even when it is enabled

Images don’t display properly in Lightbox if the image links don’t trigger. This happens when the Link To field for an image is set to something other than None or Attachment Page. 

Resolution

You’ll want to open the image in the Envira Gallery Metadata editor and edit the metadata to properly reflect the Link To data.

Point your browser to the Envira Gallery page on which your image is located. Click on the Blue Pencil icon to edit the image metadata:

Click the Media File button to populate the URL information for the image into the metadata, then click the Save Metadata button:

Update your gallery, then clear browser cache. Try reloading the gallery page to see if your images show up in the Lightbox displays.

Note that if you are using the Salient theme or a child theme of Salient, Animated Page Transitions are automatically enabled, which affect the Lightbox. Disable Animated Page Transitions in the Salient » Page Transitions screen.

See our guide to manipulating metadata or to creating your first Envira Gallery to learn more.

3. Gallery images open in two lightboxes on the same page

You may find your images opening in multiple Lightboxes if you have multiple plugins using Lightbox functionality. 

Resolution

Disable the Lightbox being loaded by a third-party plugin or active theme on your site so it doesn’t load them for images in your Envira Gallery. Instructions for each plugin will vary, so consult each plugin’s documentation.

In Avada, for instance, you can disable the theme’s lightbox by navigating to Avada Theme Options » Lightbox and turning the lightbox feature off.

If you cannot disable Lightbox functions for a plugin, then disable the third-party plugin to see if it solves the problem. If so, then you’ll have to decide on whether or not you want to attempt to use it in the future. 

4. Lightbox settings are not applied to the images in my gallery

This happens when you apply Lightbox settings through Envira Gallery and they don’t apply to your live galleries. This could also happen because multiple of your WordPress plugins are using Lightbox.

Resolution

Disable Lightbox functionality in third-party plugins like described above. 

5. Lightbox thumbnails don’t appear or show up as black boxes

When WordPress serves thumbnails for Lightbox galleries, it gets that information from the server databases. If you aren’t seeing thumbnails, or see black boxes instead of thumbnails, WordPress is most likely experiencing a delay in retrieving information from the server. There are a few additional problems that could cause the issue as well.

Resolution
  1. Envira Gallery uses the Imagick rendering library to create and adjust image sizes based on settings and screen resolution. Contact your web hosting company to confirm that they have Imagick installed.
  2. Check your CDN plugin if you use a CDN. CDNs can serve older images to your media library, which can impact how WordPress and Envira Gallery process them.
  3. As a last-ditch check, make sure that your file permissions are set so that WordPress can access them. For tech-savvy folks, you’ll want to set permissions to 644 or 755. If you aren’t sure what file permission is or even how to check them, contact your hosting provider for information and assistance. You can also take a look at this article from our friends at WPBeginner.
6. Envira Gives an error saying [Object object] has no method ‘enviratope’ or [Object object] has no method ‘envirabox’

When Envira loads images, it does so through a series of scripts. This error means that a script has a bug that prevents it from loading. Solving this issue requires some browser debugging to determine the source of the error. 

Resolution
  1. Clear your browser cache. Sometimes a browser will load a faulty script with old errors or load the script incorrectly due to the order that scripts are loaded in. Clearing the cache might help clear out the issue.
  2. Use your browser console to check for errors. This can show you if the problem is with an Envira Gallery script or if it involves the theme or another WordPress plugin.
  3. If the problem arises from problems with a theme or plugin, disable the package and contact that theme or plugin’s technical support to alert them of the issue.
7. Galleries don’t load, and the browser gets stuck on the loading icon

The Envira script loading the gallery has had an error. 

Resolution

Much like any scripting error with Envira, there are a couple of basic steps to take:

  1. Clear your browser cache completely. That means clearing all cache available in whatever browser you are using. If you have plugins that use cache (like Envira Gallery or CDN plugins) flush the cache for those as well.
  2. Use the browser console to check for any issues with third-party themes or plugins. You can also disable themes and plugins to see if they are causing any conflicts with Envira Gallery scripts. 
8. I enabled Pinterest buttons but they aren’t appearing in my gallery

This problem arises when Envira Gallery interacts with the Yoast SEO plugin. If you have the Yoast plugin installed, you’ll need to enter a Meta Description field for Envira galleries to trigger the Pinterest buttons to load.

Resolution

Edit the Meta Description for your Envira galleries. You can do this by navigating to your Envira Gallery Edit Screen, clicking on Configuration and adding a Gallery Description:

9. Image sizes don’t change as expected

Images resizing can get hung up during page loading for a few reasons, some of which are relatively simple to fix. 

Resolution

If you find that your images aren’t resizing properly, try to clear your browser cache and clear your Envira Gallery cache, as well as clearing CDN cache if you use a CDN plugin. 

If that doesn’t resolve the issue, then check the dimensions of the images in question. Some large images cannot be arbitrarily reduced to any size and having too many large images can slow down image processing and have an impact on image resize. 

This happens when you link to images outside of your website while trying to use the Enable Lightbox functionality. 

Resolution

If you disable Lightbox for that gallery you may see results. Otherwise, review our tutorial on external links with Envira Gallery.

11. Enfold Hover Styles are not working

If you use the Enfold WordPress theme, you may have issues with hover styles that can be rectified with some additional PHP code. 

Resolution

Add the following code to the functions.php file:

12. I’m seeing duplicate or triplicate Lightbox images

Sometimes, you may see multiple images in your Lightbox that force you to click many times to navigate through your gallery.

Resolution

This happens when you use a page builder to insert Envira Gallery shortcode into your site. Using a page builder can cause issues with how the gallery is rendered in HTML code. If you are using a page builder, then look for an option to add automatic paragraphs, then deselect it.

If the builder doesn’t have that option, check to see if they have support for shortcode instead of or alongside a plain text editor.

A conflict with Lazy Load between your plugins or server and the <noscript> HTML tag are typically the source of this issue.

Resolution

If your service or another plugin runs Lazy Load alongside Envira Gallery, you’ll need to disable lazy loading in the other services to let Envira run properly.

For example, if you use JetPack’s Performance & Speed (formerly called Photon) module with the Lazy Load option enabled, try disabling the JetPack Lazy Load.

To do this, go to JetPack » Settings » Performance & Speed.

Alternatively, you could follow the steps in our tutorial here so that you could use JetPack and Envira Lazy Load together!

14. Frontend: Envira Doesn’t Load on the Page

This is due likely to a JS error caused by your theme or a third party plugin.

Resolution
  • Make sure that there is only one copy of jQuery being loaded on your site. If more than one copy of jQuery is being loaded, it will overwrite previous jQuery objects and discard anything attached to the previous. It will also slow down your site, so you should remove it anyway. For more information, read this article about managing third-party plugins and themes.
  • Check your Chrome console for errors. There is likely a JS syntax or parsing error somewhere on the page. Try to resolve the issue by figuring out what script is causing the issue and where it is loaded from (either your theme or another plugin).
  • Make sure that your theme has this somewhere in the footer.php file (typically located just before the </body> tag):
wp_footer();

Now that you’ve covered our debugging guide, it’s time to check out our Getting Support guide!