Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Creating Your First Envira Gallery

Are you ready to create your first Envira Gallery? You’ve already installed Envira and you’re ready to go! This walk-through is designed to be straight-forward and to take you step-by-step in creating and publishing your first gallery.

  1. Add New Gallery
  2. Name Your Gallery and Upload Images
  3. Editing Image Metadata (optional)
  4. Configure Your Gallery (optional)
  5. Embed your Envira Gallery

 


Step 1: Add New Gallery

To get started, select the Add New button in the Envira Gallery admin screen to create your first gallery.

Select the Add New button to begin creating your first gallery.


Step 2: Name Your Gallery and Upload Images

Now that you’ve created a new gallery, first give the gallery a proper title. We recommend you avoid using generic titles and instead try to give your galleries unique and easily identifiable titles to make it easier to manage them later on.

Give your gallery a unique title to easily identify it later on.

Next, you can begin adding images to your gallery. You can add images to your gallery two ways:

Upload images from your computer

You can upload images from your computer directly to your Envira Galleries.

Note: If you upload new images from your computer, they are handled by and stored in the WordPress Media Library so you can add those same images other places in your site without having to upload them again! All images uploaded to your Envira Galleries are stored in the /wp-content/uploads/ directory of your site, same as any other image uploaded to a post, page or directly through the Media Library.

Add images previously uploaded to your WordPress site from the Media Library

You can select images already uploaded to your WordPress site to insert into your Envira Galleries.

In this example we’ll be adding images to our gallery from the Media Library. A popup window will appear and you can select any image(s) already present in the Media Library.

Select the images you want to add to your gallery from the Media Library.

Note: If you want the images you add from the Media Library to show the original image in Lightbox view, be sure the Attachment Display Settings are set to link to the Media File. You can adjust this setting if you don’t use Lightbox functionality and want to link to the Media Page, or a custom URL when the user clicks the image.

Be sure to set the Link To field to Media File when adding images from the Media Library to automatically link them to their image file to show in Lightbox view.

Once you’ve chosen the images you want to add to your gallery from the Media Library, select the Insert Into Gallery button.

Select the Insert Into Gallery button to add images from the Media Library.


Step 3: Editing Image Metadata (optional)

Editing the metadata allows you to customize the image Title, Caption, Alt Text (recommended for SEO and for visitors using screen readers), and edit the URL each image links to as well as many other settings depending on the Envira addons you have installed and activated.

To edit the metadata for a photo, select the pencil icon on the top left of an image’s thumbnail:

To edit the metadata for each gallery image select the pencil icon for that image's thumbnail.

This will open the Edit Metadata popup window. Modify any of the fields you desire for each image and select the Save Metadata button for each image you edit to save those changes.

Edit the metadata for your image and save the changes.

You can easily use the right and left arrows in the top right-hand corner of the pop up to edit each image in your gallery and repeat these steps for each image.

Step 4: Configure Your Gallery (optional)

Congratulations, you’re almost finished with creating your first Envira Gallery!

The next thing you’ll want to do is configure the options of the Envira Gallery to fit your needs. On the Images tab, you can configure the sorting options:

Select the Images tab for your gallery to edit the sorting options.

Setting Name Setting Description Setting Options
Sorting Choose to sort the images in a different order than displayed on the Images tab. No Sorting, Random, Published Date, Filename, Title, Caption, Alt, URL

Select the Config tab and make any changes that you need as well:

Select the Config tab for your gallery to edit the appearance options.
Within the Config tab you’ll find the following options:

Setting Name Setting Description Setting Options
Number of Gallery Columns Determines the number of columns in the gallery. For example, if you choose Three Columns, your images will be displayed across three columns.  If you would like a Justified layout, simply select ‘Automatic’. Read more about Justified Layouts here.
Note: On smaller screen resolutions, Envira is responsive and will automatically display in 3 or 1 column for the best optimised layout.
Automatic (Justified), One Column (1), Two Columns (2), Three Columns (3), Four Columns (4), Five Columns (5), Six Columns (6)
Enable Lazy Loading? Enables or disables lazy loading, which helps with performance by loading thumbnails only when they are visible. Enabled / Disabled
Lazy Loading Delay Set a delay when new images are loaded (in milliseconds) Integer
Display Gallery Description? Choose to display a description above or below this gallery’s images. Do Not Display, Display Above Galleries, Display Below Galleries
Gallery Description Available only if Display Gallery Description is set to display above or below galleries. The Description you want to display above or below your gallery. String
Enable CSS Animations Enable this option to use CSS Animations – these wait for the images to load, and then fade them all in. In conjunction with Enable Isotope, this effect looks awesome! Enabled / Disabled
Enable Title/Caption Below Image? With these options you can choose to display the Title and/or the Caption below the image on any gallery that uses the column count. Please note this is not available on the Automatic layout. Enable Title and/or Caption
Image Opacity Available only if CSS Animations are enabled. The opacity to display images at when loading the main gallery images using CSS animations (between 1 and 100%). Integer, in percentage
Image Size Define the maximum image size for the Gallery view. Default will use the below Image Dimensions; Random will allow you to choose one or more WordPress image sizes, which will be used for the gallery output. Default, Random, Outputs all image sizes created by WordPress and current WordPress theme
Image Dimensions Based on the Number of Gallery Columns setting, and the maximum width of the area that your gallery will be displayed in within your web site, you should set the Image Dimensions to a suitable size. For example, if your gallery fills a 1024px wide area, and you have 3 columns selected, you would use 340px x 340px for square images, or perhaps 340px x 240px for rectangular images. Note: This does not affect the full size lightbox images when the visitor clicks on a gallery image to view the full size version.
Crop Images? If enabled, forces images to exactly match the sizes defined above for Image Dimensions and Mobile Dimensions. If disabled, images will be resized to maintain their aspect ratio. Enabled / Disabled
Set Dimensions on Images? Enables or disables the width and height attributes on the img element. Only needs to be enabled if you need to meet Google Pagespeed requirements. Enabled / Disabled
Gallery Theme Sets the theme for the gallery display.
Note: for additional themes you’ll need a Plus or higher license and install the Gallery Themes Addon.
Base, additional options with the Gallery Themes Add-on and with the Automatic Layout (Justified) themes
Column Gutter Width Sets the space between each column, in pixels. Integer, in pixels
Margin Below Each Image Sets the space below each image, in pixels. Integer, in pixels
Enable Isotope? Enable this option to use Isotope transitions – these pack the images into a neat grid (masonry-style) without any large vertical spaces. Has no effect on gallery display if image cropping is enabled. Enabled / Disabled

There are additional menus that you can edit, but some of those menus depend on your license and installed Addons. Therefore, for now, we will make our changes to the Config settings and be done. Once you have changed your settings, select the Publish or Update button (“Update” appears after the first time you publish your gallery.)


Step 5: Embed your Envira Gallery

Once you publish your gallery, you’ll see the available shortcode and template tag options to embed your gallery in the sidebar below the Update button.

Once you've published your gallery for the first time, the gallery edit screen will show you the available shortcode and template tags for that individual gallery.

Let’s go ahead and add this new gallery to a new page on our site. Envira automatically displays an Add Gallery button above the Post and Page editor:

Select the Add Gallery Button when editing your posts or pages to insert a gallery.

When you select the Add Gallery button a popup screen will appear where you can select a gallery you want to insert into your Post or Page. Choose the gallery you want to add and then select the Insert button.

You can easily add galleries to your Posts and Pages using the Add Gallery button.

Publish your new Page and view it on the front-end of your site to see the new gallery you’ve created.

Once you've embedded your gallery on a Post or Page you can view it on the front-end of your site.

Congratulations, you have now completed your first Envira Gallery!  Feel free to go and tweak your gallery as you see fit to best meet your needs. Enjoy!

Now that you’ve completed your first gallery, be sure to check out our blog for new tips!