There are three key steps to enable this properly for EACH site using Envira gallery:
- Enable the Plugins listed below plus the Addons (and optional Addons as appropriate) to each site
- Under Envira > Settings, you add the License Key (from EnviraGallery.com/account) to activate the Addon features including automatic updates
- Add the Domain (development and live) to the EnviraGallery.com “Manage Sites” Account settings. We have unlimited sites with our Gold annual license.
PLUGINS to Enable
(These are NOT Network Enabled by Default)
- Envita Gallery
- Envira Gallery – Standalone Addon – Enable Archives and Featured Image
ENVIRA ADD-ONS
(via Envira > Addons in Dashboard)
- Defaults Addon — You must then disable lightboxes for desktop/mobile and adjust other appropriate settings per site to avoid any repetitive per-gallery work. This is done via the “Envira Defaults” gallery that is automatically created by the Addon.
- Standalone Addon
- Featured Content Addon
- Albums Addon
- Optional: Social Addon – For “Social” be sure to set a Facebook App ID that MUST include the site’s URL to enable social sharing of photos, as well as adding the Twitter username of the site/department. This is under the Envira menu, “Settings > Social”. There’s not a huge advantage using it for individual photos, default should normally be disabled.
To browse other Addons that may be useful on a per site basis, visit http://enviragallery.com/categories/docs/addons/
Custom Snippets Added to System
A custom code snippet has been added manually to the plugin’s file structure to enable Featured Images with galleries, following the instructions here as of June 23, 2016. This will ensure featured images are available per gallery to show up in site search results and when sharing.
http://enviragallery.com/docs/enable-archives-for-standalone-addon/
Default Gallery Settings
These are the minimum default settings that should be used when creating a gallery for the first time. The needs of the client can dictate differences in these settings, but these are certainly starting points. Note: Please ensure the above add-ons are installed and activated before proceeding.
The basic configuration settings are shown below.
Check the box to enable lightbox settings. These are the basic settings needed to ensure the lightbox functions accurately. Note: If you change the lightbox theme you will likely get different settings.
Basic mobile settings are set below. Note: In order to see the “Pagination Settings” for mobile, you will need to have set the Gallery Pagination settings.
Leave the Template settings as “Default”
The minimum pagination settings are below. The number of images per page can vary based on clients needs and what looks good. Note: This needs to be set before manipulating the mobile pagination options.
Edit the “Custom Gallery CSS”. This controls the styles applied to the gallery pagination as well as the Subtle Theme lightbox style. If you are using another lightbox theme, ensure the CSS calls are appropriate to that theme.
CSS Style
/*styles the pagination on the /
.envira-pagination a.page-numbers:hover {
background-color: #ccc;
color: #fc7f05;
}
span.page-numbers.dots {
display: inline-block;
padding: 10px;
background-color: #000;
border-radius: 3px;
color: #fc7f05;
}
.envira-pagination a.page-numbers {
display: inline-block;
padding: 10px;
background-color: #000;
border-radius: 3px;
text-decoration: none;
transition: all 0.2s ease-in 0s;
color: #fc7f05;
}
.envira-pagination span.page-numbers.current {
display: inline-block;
padding: 10px;
background-color: #ccc;
border-radius: 3px;
color: #fc7f05;
}
.envira-gallery-wrap .envira-pagination {
margin: 0 0 20px 0;
text-align: center;
}
/*styles the Subtle lightbox Theme*/
.envirabox-skin.envirabox-theme-subtle {
background: #fc7f05 !important;
border: 1px solid #fc7f05 !important;
}
#envirabox-thumbs ul li {
border: 3px solid #fc7f05 !important;
}
Customizing Envira Pagination CSS
Below you will find the code for modifying the placement of, and the look of the gallery pagination in Envira. You simply need to modify the hex color’s to match your site’s color theme. Once the code has been modified, it needs to be added to the Misc. tab for a gallery in the “Custom Gallery CSS” box.
Note: Once you make the CSS change to one gallery, you can apply it to all galleries rather easily using the “Apply Settings from Another Gallery” tool under the “Bulk Edit” drop-down from the Main Galleries Page.
[dt_code]
.envira-pagination {
text-align: center;
}
/* styles the pagination on the page */
span.page-numbers.dots {
display: inline-block;
padding: 10px;
background-color: #730707;
border-radius: 3px;
color: #f2c832;
}
.envira-pagination a.page-numbers {
display: inline-block;
padding: 10px;
background-color: #730707;
border-radius: 3px;
text-decoration: none;
transition: all 0.2s ease-in 0s;
color: #f2c832;
}
.envira-pagination a.page-numbers:hover {
background-color: #f2c832;
color: #730707;
}
.envira-pagination span.page-numbers.current {
display: inline-block;
padding: 10px;
background-color: #f2c832;
border-radius: 3px;
color: #730707;
}
/* styles the previous and next links */
.envira-pagination a.prev.page-numbers,
.envira-pagination a.next.page-numbers{
display: inline-block;
padding: 10px;
background-color: #730707;
border-radius: 3px;
text-decoration: none;
transition: all 0.2s ease-in 0s;
color: #f2c832;
}
.envira-pagination a.prev.page-numbers:hover,
.envira-pagination a.next.page-numbers:hover{
background-color: #f2c832;
color: #730707;
}
[/dt_code]