Below, you’ll find a detailed guide on how to add the Envira Gallery Lite Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Envira Gallery Lite Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Envira Gallery Lite Plugin and the shortcodes it provides:
"Gallery Plugin for WordPress – Envira Photo Gallery is a user-friendly tool that creates stunning and responsive photo galleries on your site. The slug is envira-gallery-lite."
- [envira-gallery]
Envira Gallery Lite [envira-gallery] Shortcode
The Envira Gallery Lite plugin shortcode is used to generate and display a gallery within a WordPress post or page. It fetches the gallery based on the ID or slug provided in the attributes. It also allows customization of the gallery display order and limits the number of images shown. If no attributes are passed, it pulls the gallery from the current post. The plugin also supports lazy loading and various gallery and lightbox themes.
Shortcode: [envira-gallery]
Parameters
Here is a list of all possible envira-gallery shortcode parameters and attributes:
id
– The unique identifier of the gallery.slug
– The unique slug of the gallery.limit
– Limits the number of images displayed in the gallery.lazy_loading
– Enables or disables lazy loading of images.gallery_theme
– Sets the visual theme of the gallery.lightbox_theme
– Sets the theme for the lightbox effect.columns
– Defines the number of columns in the gallery.description_position
– Sets the position of the gallery description.justified_row_height
– Sets the row height for the justified gallery layout.justified_gallery_theme
– Sets the theme for the justified gallery layout.
Examples and Usage
Basic example – Displaying a gallery by referencing its ID.
[envira-gallery id="123" /]
Advanced example – Displaying a gallery by referencing its slug, limiting the number of images displayed, and customizing the gallery data.
[envira-gallery slug="my-gallery" limit="10" custom_attr="value" /]
Using the shortcode to display a gallery by referencing both ID and slug. The gallery will first try to load by ID, but if not found, it will try to load by slug.
[envira-gallery id="123" slug="my-gallery" /]
Using the shortcode to display a gallery with a specified limit on the number of images. If the ‘limit’ attribute is set and is a numeric value, the gallery will only display that number of images.
[envira-gallery id="123" limit="5" /]
Using the shortcode to display a gallery and applying a custom filter to the gallery data. The ‘custom_gallery_data’ attribute allows you to manipulate the gallery data from a custom source.
[envira-gallery id="123" custom_gallery_data="my_custom_data" /]
PHP Function Code
In case you have difficulties debugging what causing issues with [envira-gallery]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'envira-gallery', [ $this, 'shortcode' ] );
Shortcode PHP function:
function shortcode( $atts ) {
if ( is_admin() ) {
return;
}
global $post;
// If no attributes have been passed, the gallery should be pulled from the current post.
$gallery_id = false;
if ( empty( $atts ) ) {
$gallery_id = $post->ID;
$data = is_preview() ? $this->base->_get_gallery( $gallery_id ) : $this->base->get_gallery( $gallery_id );
} elseif ( isset( $atts['id'] ) ) {
$gallery_id = (int) $atts['id'];
$data = is_preview() ? $this->base->_get_gallery( $gallery_id ) : $this->base->get_gallery( $gallery_id );
} elseif ( isset( $atts['slug'] ) ) {
$gallery_id = $atts['slug'];
$data = is_preview() ? $this->base->_get_gallery_by_slug( $gallery_id ) : $this->base->get_gallery_by_slug( $gallery_id );
} else {
// A custom attribute must have been passed. Allow it to be filtered to grab data from a custom source.
$data = apply_filters( 'envira_gallery_custom_gallery_data', false, $atts, $post );
$gallery_id = $data['config']['id'];
}
// Change the gallery order, if specified.
$data = $this->maybe_sort_gallery( $data, $gallery_id );
// Limit the number of images returned, if specified.
// [envira-gallery id="123" limit="10"] would only display 10 images.
if ( isset( $atts['limit'] ) && is_numeric( $atts['limit'] ) ) {
$images = $data['gallery'];
$images = array_slice( $data['gallery'], 0, absint( $atts['limit'] ), true );
$data['gallery'] = $images;
}
// Allow the data to be filtered before it is stored and used to create the gallery output.
$data = apply_filters( 'envira_gallery_pre_data', $data, $gallery_id );
// If there is no data to output or the gallery is inactive, do nothing.
if ( ! $data || empty( $data['gallery'] ) || isset( $data['status'] ) && 'inactive' === $data['status'] && ! is_preview() ) {
return;
}
$this->gallery_data = $data;
// Get rid of any external plugins trying to jack up our stuff where a gallery is present.
$this->plugin_humility();
// Prepare variables.
$this->data[ $data['id'] ] = $this->gallery_data;
$this->index[ $data['id'] ] = [];
$gallery = '';
$i = 1;
// If this is a feed view, customize the output and return early.
if ( is_feed() ) {
return $this->do_feed_output( $data );
}
$lazy_loading_delay = isset( $this->gallery_data['config']['lazy_loading_delay'] ) ? intval( $this->gallery_data['config']['lazy_loading_delay'] ) : 500;
// Load scripts and styles.
wp_enqueue_style( $this->base->plugin_slug . '-style' );
wp_enqueue_style( $this->base->plugin_slug . '-lazyload' );
wp_enqueue_style( $this->base->plugin_slug . '-fancybox' );
wp_enqueue_style( $this->base->plugin_slug . '-jgallery' );
wp_enqueue_script( 'jquery-masonry' );
wp_enqueue_script( $this->base->plugin_slug . '-script' );
// If lazy load is active, load the lazy load script.
if ( $this->get_config( 'lazy_loading', $data ) === 1 ) {
wp_localize_script( $this->base->plugin_slug . '-script', 'envira_lazy_load', [ 'true' ] );
wp_localize_script( $this->base->plugin_slug . '-script', 'envira_lazy_load_initial', [ 'false' ] );
wp_localize_script( $this->base->plugin_slug . '-script', 'envira_lazy_load_delay', [ (string) $lazy_loading_delay ] );
}
// Load custom gallery themes if necessary.
if ( 'base' !== $this->get_config( 'gallery_theme', $this->gallery_data ) && $this->get_config( 'columns', $this->gallery_data ) > 0 ) {
// if columns is zero, then it's automattic which means we do not load gallery themes because it will mess up the new javascript layout.
$this->load_gallery_theme( $this->get_config( 'gallery_theme', $this->gallery_data ) );
}
// Load custom lightbox themes if necessary.
if ( 'base' !== $this->get_config( 'lightbox_theme', $this->gallery_data ) ) {
$this->load_lightbox_theme( $this->get_config( 'lightbox_theme', $this->gallery_data ) );
}
// Load gallery init code in the footer.
add_action( 'wp_footer', [ $this, 'gallery_init' ], 1000 );
// Run a hook before the gallery output begins but after scripts and inits have been set.
do_action( 'envira_gallery_before_output', $this->gallery_data );
// Apply a filter before starting the gallery HTML.
$gallery = apply_filters( 'envira_gallery_output_start', $gallery, $this->gallery_data );
// Build out the gallery HTML.
$gallery .= '<div id="envira-gallery-wrap-' . sanitize_html_class( $this->gallery_data['id'] ) . '" class="' . $this->get_gallery_classes( $this->gallery_data ) . '" itemscope itemtype="https://schema.org/ImageGallery">';
$gallery = apply_filters( 'envira_gallery_output_before_container', $gallery, $this->gallery_data );
// Description.
if ( isset( $this->gallery_data['config']['description_position'] ) && 'above' === $this->gallery_data['config']['description_position'] ) {
$gallery = $this->description( $gallery, $this->gallery_data );
}
$opacity_insert = false;
if ( $this->get_config( 'columns', $this->gallery_data ) === 0 ) {
$opacity_insert = ' style="opacity: 0.0" ';
}
// add justified CSS?
$extra_css = 'envira-gallery-justified-public';
$row_height = false;
$justified_gallery_theme = false;
if ( $this->get_config( 'columns', $this->gallery_data ) > 0 ) {
$extra_css = false;
} else {
$row_height = $this->get_config( 'justified_row_height', $this->gallery_data );
$justified_gallery_theme = $this->get_config( 'justified_gallery_theme', $this->gallery_data );
}
$gallery .= '<div' . $opacity_insert . ' data-row-height="' . $row_height . '" data-gallery-theme="' . $justified_gallery_theme . '" id="envira-gallery-' . sanitize_html_class( $this->gallery_data['id'] ) . '" class="envira-gallery-public ' . $extra_css . ' envira-gallery-' . sanitize_html_class( $this->get_config( 'columns', $this->gallery_data ) ) . '-columns envira-clear' . ( $this->get_config( 'isotope', $this->gallery_data ) ? ' enviratope' : '' ) . ( $this->get_config( 'css_animations', $this->gallery_data ) ? ' envira-gallery-css-animations' : '' ) . '" data-envira-columns="' . $this->get_config( 'columns', $this->gallery_data ) . '">';
// Start image loop.
foreach ( $data['gallery'] as $id => $item ) {
// Add the gallery item to the markup.
$gallery = $this->generate_gallery_item_markup( $gallery, $this->gallery_data, $item, $id, $i );
// Increment the iterator.
$i++;
}
// End image loop.
$gallery .= '</div>';
// Description.
if ( isset( $this->gallery_data['config']['description_position'] ) && 'below' === $this->gallery_data['config']['description_position'] ) {
$gallery = $this->description( $gallery, $this->gallery_data );
}
$gallery = apply_filters( 'envira_gallery_output_after_container', $gallery, $this->gallery_data );
$gallery .= '</div>';
$gallery = apply_filters( 'envira_gallery_output_end', $gallery, $this->gallery_data );
// Increment the counter.
$this->counter++;
// Remove any contextual filters so they don't affect other galleries on the page.
if ( $this->get_config( 'mobile', $this->gallery_data ) ) {
remove_filter( 'envira_gallery_output_image_attr', [ $this, 'mobile_image' ], 999, 4 );
}
// Add no JS fallback support.
$no_js = '<noscript>';
$no_js .= $this->get_indexable_images( $this->gallery_data['id'] );
$no_js .= '</noscript>';
$gallery .= $no_js;
// Return the gallery HTML.
return apply_filters( 'envira_gallery_output', $gallery, $this->gallery_data );
}
Code file location:
envira-gallery-lite/envira-gallery-lite/includes/global/shortcode.php
Conclusion
Now that you’ve learned how to embed the Envira Gallery Lite Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply