Documentation, Reference Materials and Tutorials for 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.
- Add New Gallery
- Name Your Gallery and Upload Images
- Editing Image Metadata (optional)
- Configure Your Gallery (optional)
- Embed your Envira Gallery
To get started, select the Add New button in the Envira Gallery admin screen to create your first gallery.
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.
Next, you can begin adding images to your gallery. You can add images to your gallery two ways:
/wp-content/uploads/directory of your site, same as any other image uploaded to a post, page or directly through the Media Library.
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.
Once you’ve chosen the images you want to add to your gallery from the Media Library, select the Insert Into Gallery button.
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:
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.
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:
|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:
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.)
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.
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:
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.
Publish your new Page and view it on the front-end of your site to see the new gallery you’ve created.
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!