← Back to Blog

Envira Gallery Demonstration

Written by: Katie Ayres

November 30, 2020

This is a demonstration of the Envira Gallery WordPress plug-in and some of their best options. 

Website demonstrated in video: https://1happygallery.com/. 1 Happy Gallery shows different sample Envira Galleries to help in the discussions of your selections.

Many thanks to the talented photographers from https://unsplash.com,

Envira Galleries have three concepts:

The WordPress plugin allows for extensive customizations. This video will help you determine which features you would like implemented for your website. 

Script

Today I am going to talk about the WordPress plugin Envira Gallery, what it does and the different options that it offers to configure your galleries and lightboxes.

Hello! My name is Katie Ayres, and I’m a web developer and owner of 1 Happy Place, and I am going to demonstrate the features of Envira Gallery

What is Envira Gallery?

It is a WordPress plugin that provides photo and video galleries for websites.  It is built by a small company that writes software that plugs into WordPress. I have carefully selected them as a provider for this feature as their software is robust and provides a massive amount of customization for web developers like me. 

Demonstration

Let’s take a look at 1happygallery.com.  This is a demonstration website I built with WordPress using EnviraGallery.  This website shows the different styles of galleries that EnviraGallery provides.  I use this website to help my clients select the style of gallery and lightbox they want on their website. 

On the menu you see a selection of curated Gallery styles, Lightbox styles and an example album.  Let’s go through each one.

Galleries

The first gallery is the Masonry gallery.  It shows the thumbnail images without cropping them.  The columns are the same width and the height of each thumbnail depends on the aspect ratio of the image allowing the full height to be shown. 

Next is the Mosaic gallery.  This is very similar to the masonry gallery, only the rows are a set height, and the full width of each thumbnail is displayed with no cropping.

Cropped is a grid of thumbnails that are all the same height and width.  In order to achieve that uniformity, each thumbnail is cropped to fit into the static size of each cell.

Lastly, let’s go to the gallery with tags.  You can tag each image with one or more tags.  Those tags appear along the top, and the web visitor can click on each one to see the images that are tagged with that phrase.

Lightboxes

When the web visitor clicks on a thumbnail, the image is blown up to fit the entire screen.  This is called a lightbox. There are a lot of choices on how the lightbox will work.  I have created a few to demonstrate the different features that come with the Envira Gallery software.

Let’s look at the clean lightbox.  When the visitor clicks on the thumbnail, the lightbox is opened.

The web visitor can then move through all the graphics with the left and right arrows. You can also decide whether you want just a title, a title and a caption, or neither. There is also a full screen button.  When it is pressed, the image fills the entirety of the physical screen.  I can’t show you this because it would expand outside the screen recording field. When the visitor is done, they can click the close button to return to the website.

Next let’s look at the slideshow feature.  When the web visitor opens up the lightbox, it will move to the next image automatically after some predefined set of time (in this case, 5 seconds). The visitor can click the pause button anytime to linger on an image longer.  They can also hover over the image to pause the automated scrolling.  

Lastly, let’s use the thumbnail feature. When the lightbox is opened, it provides small thumbnails along the bottom and the visitor can move around the images as they wish.  If they click this grid button along the top, the thumbnails  will disappear.  

All of these galleries have the protection feature turned on, so the visitor cannot download images.

Albums

The last menu item shows an album.  An envira gallery album is a collection of galleries, allowing the web visitor to navigate an extensive portfolio that needs extra organization. When we click on the Flora gallery, we load up that gallery.  We can then use breadcrumbs to move back up to the album and load another gallery, such as the Fauna gallery.

This covers the features of galleries and lightboxes provided by the Envira Gallery software.  Let me know if you have any questions about the different configurations, I’d be happy to answer them!

Hey thanks for watching!  Be sure to subscribe to my channel to learn more about my work developing websites for artists.

Training

Hello 1 Happy Place clients!  This video is for you and is part of a series that trains you on the day-to-day activities that you will be doing administratively with your website.  This video focuses on updating your portfolio.   

So let’s get started.

Hello! My name is Katie Ayres, and I’m a web developer and owner of 1 Happy Place, and today I am going to demonstrate how you can update your portfolio.

Your website is built with WordPress, so to start the entire process, you need to log onto your WordPress website, but what does that really mean to log on to your website?

Imagine you own a corner drugstore.  The store would have a front door for customers to walk in and then browse your products.  When you log onto your WordPress website, you are essentially going in through the back door, the one that leads to the back storage room and eventually behind the counter. Customers are not allowed to go into those areas of the store, but as the store owner, you can, and this is where you would manage your store.

In the web world, the equivalent of going through the backdoor is logging into WordPress. Your customers, aka your website’s visitors, don’t ever see this view of your website.  It is where you can make changes to your website that will go live as soon as you publish.

We are working with 1happygallery.com, a demonstration website that shows the variety of ways you can use the EnviraGallery plugin.

If you haven’t seen the Envira Gallery Demonstration video, I suggest you watch that video first to get you oriented on what Envira Gallery is and how it works.

I have logged onto 1happygallery.com which brings me to the Administration dashboard (or the back storage room).  Along the left is a menu and you can see the following menu items: 

When you hover over the Envira Gallery menu item, a submenu appears.  Let’s click on the Envira Gallery submenu..  This screen summarizes all the galleries loaded on the website.  

We see the:

If we hover over one of the gallery names, a little menu appears, let’s look at each one:

Let’s start by adding a new image.  

Notice how each image has three icons.  One is to edit, another to delete the image and one to keep it, but keep out of public view,.

Let’s edit the information shown on the image, by clicking the edit button. I am going to change the title and caption information.  Press the Save MetaData button before closing. Notice how the title changed on this listing of images, which is handy when you are trying to find an image later.  

Let’s view the gallery and verify the new photograph is there. But before you do that, it is important to always press the Update button for the gallery.  Once we have done that, click the View Envira Gallery button to see what the public would see.  The puffin is now there. If we open the lightbox, we will see the new title and caption as well.

Notice that the puffin is the first image, let’s change the order.  Click the Edit Envira Gallery button along the top to get back to the gallery page.  Simply drag the Puffin to where you would like it, in this case, I will drag it into the second spot.  Click the Update button again, one note here, the Envira Gallery software does autosave and keeps your changes, but it is best to hit this button to ensure it is saved.

Press View Envira Gallery again, and you will see the Puffin is now second. If we open the lightbox, we will see it shown as the second image.

Finally, let’s remove the Puffin.  Click the Edit Envira Gallery button again. On the Puffin, click the Trash icon.  You will be prompted to ensure that you really meant to delete it.  Now let’s verify that is gone.  Yup, it is gone, but it such a nice photograph, that I promise to put it back once I am done making this video.

You have seen how to add, remove and update images in your galleries. Below this video in the description, the steps are laid out for each activity to help you if you get stuck. 

I am always ready to assist you if you have any problems, or something goes wrong.  Don’t forget, as part of your hosting, there are backups made of your website, if we ever need it!

Hey thanks for watching!  Be sure to subscribe to my channel to learn more about my work developing websites for artists.


Comments

Post a comment

Your email address will not be published. Required fields are marked *