Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Display the Tags Filter List as a Dropdown

Would you like to display your Envira Tags in a dropdown instead of a list? Envira will help you easily create something custom on your site that will do exactly that. This guide will show you how to display tags as a dropdown instead of a list.

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 display the tags in a dropdown, we’ll need to create and upload a basic WordPress plugin.

First, you’ll need to install and activate the Envira Tags Addon.

Please follow our instructions on how to install and activate addons.

You’ll first need to create a new gallery or edit an existing one. You can follow along with our documentation for creating your first gallery.

In the next step we’ll be tagging your gallery images.

There are multiple ways to tag your images with Envira Tags.

You can easily tag your images from any Envira gallery by editing your gallery images.

Select the blue pencil icon at the top of a gallery image.

Edit your gallery images by clicking the blue pencil icon

The Edit Metadata window will open and here you’ll enter the tags on your gallery images on the Tags field.

Add tags to individual images in your gallery through the Edit Metadata window.

Be sure to select the Save Metadata button after each image to save the changes.

When you’re finished adding your tags, close the Edit Metadata window by clicking the X button in the top right corner.

Then click Update on your gallery.

You can also add Envira Tags right from the WordPress Media Library.

To start, navigate to Media » Library and select the image you want to tag.

In the Envira Tags field, just type in your tag and click Update to save your changes after each image you edit.

Add your Envira tags to your gallery images

Finally, enable the Tags for your gallery. Click the Tags tab and check the box to Enable Tag Filtering?

Enable Tag Filtering so you can use Envira gallery tags list to display your tags list as a dropdown

To display the Envira Tags as a dropdown instead of a list, just add the following code to a new file at wp-content/plugins/envira-tags-as-dropdown.php.

<?php
/**
* Plugin Name: Envira Gallery - Display Tags as Dropdown
* Plugin URI: https://enviragallery.com
* Version: 1.0.0
* Author: Envira Gallery Team
* Author URI: https://enviragallery.com
* Description: Displays your Envira Tags list as a dropdown.
*/
add_action( 'wp_footer', 'envira_tags_dropdown', 100 );
function envira_tags_dropdown() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function() {
        jQuery(function() {
                jQuery('ul.envira-tags-filter-list').each(function() {
                        var $select = jQuery('<select class="envira-tags-dropdown" />');
 
                        jQuery(this).find('a').each(function() {
                                var $option = jQuery('<option />');
                                $option.attr('value', jQuery(this).attr('href')).html(jQuery(this).html());
                                $select.append($option);
                        });
                        jQuery(this).replaceWith($select);
                });
 
        });
        jQuery('.envira-gallery-wrap').change(function() {
        window.location = jQuery(':selected',this).attr('value')});
        });
    </script>
<?php
}
In the above code you can see class="envira-tags-dropdown". This adds the class envira-tags-dropdown to your dropdown for easy styling. You can change that class to whatever you wish before saving the file.

Not sure how to do that? Just follow these steps:

  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-tags-as-dropdown.php
  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.

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 – Display Tags as Dropdown plugin.

Activate Tags Dropdown

Here’s what the tags list looked like before the plugin was activated:

Tags as a List

And now we can see what the tags looks like after installing the plugin and changing it into a dropdown:

Tags Dropdown Closed

Tags Dropdown Open

And that’s it! You are have now changed Envira Tags into a dropdown. Now that you’ve completed this, take a look at how to limit the caption length in your Base lightbox themes.

A: Your dropdown style may be affected by your theme or other plugins. No worries! You can add the following CSS (and even customize it further to fit your styling needs) to Appearance » Customize » Additional CSS or your theme’s style.css for a more uniform look and feel:

select.envira-tags-dropdown{
    -webkit-appearance: menulist;
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    max-width: 100%;
    margin: 10px 0;
}