Envira Gallery Demonstration

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:

• Galleries – a collection of images, each image can have a title and caption
• Lightboxes – once the web visitor clicks on an image in a gallery, it loads a lightbox, which can be shown in fullscreen, or running in a slideshow and with thumbnails along the bottom
• Albums – allows the visitor to go to one page and see all the galleries in one place. Each gallery is a block that can be clicked and the visitor is sent to that gallery

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: 

• Dashboard – this has summary of WordPress activities
• Media – This shows all the images of the website, it is easier to work with Envira Gallery directly with images, but you can see all the images of your website here
• Profile – this is your profile and where you would make changes to your personal information
• Envira Gallery – this is where we are going to spend our time

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:

• Add New button, that is if you want to add an entirely new gallery
• Below that we see the Native Envira Gallery area – where you can upload your images to add to the gallery
• And below that is a Working area
  • Along the left you see a variety of tabs, these mostly contain the properties that I set when we designed how your galleries work. 
  • The main area is here…where it shows the images that are in that gallery.

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

• Quick Edit, this allows editing of  some select properties of a gallery.  These have already been configured during the development of your website per your selections, so you will generally not need to worry about these settings
• Trash – this throws a gallery in the trash, not something you generally want to do
• Edit – this is the one you will use the most, but we will get to the edit screen another way
• View – this will move you to the public web page that shows that particular gallery. This is handy when you have made a change and want to see what it looks like.  Notice since I am logged into WordPress, there is a bar along the top that gets you back to the administration pages, I can click Edit Envira Gallery and edit it directly

Let’s start by adding a new image.  

• Let’s go back to the list of galleries, and find the Fauna gallery.
• If we hover over the gallery name, in this case Fauna and click Edit, this brings us to that same gallery administration page we saw earlier
• Next let’s click the button “Select Files from Your Computer”, which then allows us to find the image on the computer and load it
• I am going to add this image of a Puffin.
• Now it appears in the gallery listing

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.

Other Articles