Making and Managing Envira Galleries

The site galleries are made with a plugin called Envira Galleries.

The photo albums on the site are created with a plugin called Envira Gallery. (Again, there is a default gallery block in WordPress, but it’s very limited.)

Envira Gallery is one of the most popular WordPress plugins for creating and managing image and video galleries. With Envira Gallery, users can:

  • Create responsive and mobile-friendly galleries using a drag-and-drop builder
  • Customize the appearance and functionality of galleries with a variety of pre-built templates and add-ons
  • Easily embed their galleries into pages, using the Envira Gallery or a shortcode block.

Note: On the main mshsvt.org website we call the image collections Photo Albums. When you are working within the Envira plugin you will see that Envira Gallery calls image collections like ours “Galleries.” In this working tutorial, we use Envira’s preferred term “Gallery” in place of “Album” so you’ll get used to it. 😊 

Choose Envira Gallery from the Admin toolbar.1

Happily, we have already built the initial galleries (aka Photo Albums:-) on this site!

To add a new gallery, basically all you need to do is base it on an existing gallery and all the settings will carry over automatically! See the exact steps here.

Let’s take a look at the interface. Choose Envira Gallery from the Admin tool bar. You’ll see a list of galleries come up. This is where you organize your galleries and choose galleries to edit.

Folders Pro

The big red arrow is pointing to the small red arrow in the upper left corner that toggles folders in and out.

Envira Galleries is another area where we use Folders Pro. It’s a little different here than in the Pages and Media Library areas.

Because of the way Envira is laid out, the folders have a toggle function that displays and hides them. It is a small red button with a white arrow. You’ll find it in the upper left corner, above the Enviral Gallery logo. 

Note: it can be a little awkward sometimes because the button is very close to the Dashboard selection on the Admin bar. If your cursor approaches the button from the left side of the screen you’ll toggle the dropdown for the Dashboard,  or if you’re a quick clicker you might find yourself suddenly in the Dashboard area! Always approach the button from the right. 

You drag galleries in and out of folders using the little crossed arrows icon, just like in the pages area.

To Edit a Gallery

As in the pages area, hover your mouse over the gallery name and options will pop up. Edit is really the only option we use. 

Note: Unlike with pages, don’t begin new galleries by duplicating an existing one through this pop-up menu, as this brings in a gallery with all its images. We’ll show you better way.

On a gallery page, the name of the gallery is in the white box at the top.

Below that are two tabs:

  • Native Envira Gallery
    • This is the default tab and the one you will use
  • Galleries from Other Sources
    • This allows you to import galleries from outside sources such as Instagram. It is not currently used on the site

In the Native Envira Gallery tab is a large box denoted by a broken line. You can drag and drop files to upload from your computer here if that is your way of working. We recommend using one of the two boxes in that area: 

The box on the left allows you to upload images from your computer. The box on the right allows you to select files from the Media Library.
  • Select Files from Your Computer
    • Select this and you can choose files stored on your local computer. This automatically adds the files to the gallery and to the Media Library. 
    • If you use the optional Select a folder dropdown box above the box it will add the new files to the appropriate folder in the Media Library, saving you a step. But you can always manage folders and files directly in the Media Library later.
  • Select Files from Other Sources
    • This is oddly named. What it does is take you the Media Library so you can select files that have been previously uploaded to the site and add them to the current gallery.

Note: It’s best practice to have only one actual copy of an image file uploaded to the site and stored in the Media Library. That one file can be put in as many Envira galleries as you like, and also use it to illustrate pages and feature stories. Limiting the number of image files loaded will prevent overloading the space on the server as new images are uploaded.

Once the image files are loaded in the gallery, you will see them in the Currently in your Gallery section.

This is where you manage the appearance of the media in your gallery. Notice the blue, red and green boxes on each thumbnail. The blue box opens the media’s information or metadata. The red button removes the image from the gallery, but not from the Media Library. The green button is a toggle that makes the image visible or invisible in your gallery. When the media is visible the box is green. When the media is toggled to invisible, the box is orange. On the left are gallery options. Best leave these alone unless you know what you’re doing.

On the left you’ll see a row of settings such as Configuration, Lightbox, etc. You should not need to use these, as all of the galleries on the site have had of the important settings have been adjusted. If you do make changes, make sure you’ve studied the documentation first.

In Envira, your images will appear as thumbnails. There are some controls along the top.

  • The Select All button will:
    • Select all thumbnails
    • Allow you to bulk edit the images
    • Move images to another gallery
    • Delete the images from the gallery (they will remain in the Media Library)
  • The filter button allows you to enter a search term to filter by
  • The sorting button gives you several sorting options
    • On this site we choose no sorting. This allows you to arrange the thumbnails manually by dragging and dropping.
    • The sort order is only important with one of the automatic sorting options
    • The last two box icons toggle between a grid and list view of the icons. 

Each thumbnail has three tools:

  • The blue pencil box allows you to edit the image metadata, which is information associated with the file such as title, caption and the file’s location, etc.
  • The red trash can icon deletes the image from the gallery
  • The Green box with an eye is a visibility toggle
    • If the box is green, the image is published in the gallery
    • If the box is orange, the image stays in the gallery, but is not visible in the online gallery

Choose the pencil box on a thumbnail to open the editor.

The metadata editor window.

From top to bottom and back to the top again:

  • The Status dropdown is the same as the Green box, it allows you to publish or unpublish the image. 
  • Title: this is what will appear below the image in the gallery
  • Caption: This will be visible in the Lightbox slide show
    • Note: both the Title and Caption sections will accept HTML markup for things like, bold italics, and links. The caption section has a little toolbox to help non-techies do these things.
  • Alt Text. Essential for Accessibility. See the tips for writing Alt Text.
  • URL: Normally this is the address of the image in the Media Library. The only time you edit this field is when posting a newsletter in the gallery
  • Open URL in New Window. Leave unchecked.
  • Tags. In certain galleries, such as the Families gallery and the Newsletter gallery, we use tags to help users quickly navigate to what they want to see.
  • Save Metadata: this button saves the changes you’ve made.
  • Use the X at the top right to return to the gallery editing page

Publishing and Updating Your Gallery

Update is like the save button. It makes your changes live on the website. Note, that when a gallery is new the button will say Publish.

On the far right of the editing page from top to bottom.

  • Publish
    • The first time you create a gallery the option here will be Publish
    • For existing galleries, the option is Update.
    • You can also delete a gallery here, though we prefer doing this from the main Envira page.
  • Important: Note, as you make changes it important to remember to Update often. Also, if you navigate away without updating you may lose your changes.
  • Envira Categories: Not used.
  • Envira Codes
    • This is the shortcode for publishing the gallery on a page.
    • In practice you will seldom use these, as there is an Envira Block that allows you to choose galleries from a dropdown.

Note: While Envira Galleries can be viewed directly using the Permalink URL found below the title, we  do not do this on this site. Instead, we create a page for each Photo Album in the Pages section, and call up the gallery using an Envira Block. This allows us to add whatever text or headlines we’d like at the top of the page. 

To Create a New Gallery

To create a new gallery: 

  • Go to the Envira Gallery section of the Admin Tools and select Add new.
  • Rather than use the “Default Gallery” option. Choose a gallery that you know is currently working and online and base your choice on this. The plugin will create a new, empty gallery with those settings applied.
  • That’s it. Follow all the directions for editing a gallery.
  • Remember to Publish and Update.

Newsletters

Newsletters have two parts, a thumbnail for display in the gallery and on pages and the Pdf itself. Both are stored in separate folders in the media library.

The site uses an Envira Gallery to display the Newsletter Archive. The procedure is much that same as editing a regular Photo Album gallery, but there are a few extra steps.

  • First you need to make a jpeg of the first page of the newsletter. Envira does not display pdfs.
    • If you have Acrobat Reader, open the newsletter and choose Save As and select jpeg.
    • If you’re on a Mac and use Preview, open the newsletter and choose Export
  • Add the thumbnail you created to the Newsletter Archive.
    • Edit the title to reflect the naming formula of the other editions
    • Drag the thumbnail into the correct position.
    • Update the Newsletter archive gallery to save it
  • Go to the Media Library
    • Upload the actual Pdf to the Media Library
    • Put both the thumbnail (which should already be there) and the Pdf to their appropriate folders
    • Open the Pdf (Not the thumbnail!) in the Media Library editor. Highlight and copy the File URL/
  • Go back to Envira.
    • Open the metadata editor on the thumbnail
    • Replace the URL with the File URL
    • X out and Update to Save
  • There are two more steps: Go to the Newsletter folder in the Pages section
    • Choose Newsletter
    • Replace the the image with the new thumbnail from the Media Library
    • Update to save
    • Go to the Latest Issue page
    • Open up the List view on the left. Choose the Image Bloc
    • Replace the Image with the new thumbnail from the Media Library
    • Write a short description of the highlights in the new issue
    • Go to the very last block, the File Block
    • Highlight the File Block and choose Replace from the Block Tools
    • Enter the new File URL
    • Update to save