Below, you’ll find a detailed guide on how to add the Beaf Before And After Gallery Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Beaf Before And After Gallery Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Beaf Before And After Gallery Plugin and the shortcodes it provides:
"Ultimate Before After Image Slider & Gallery – BEAF is a dynamic WordPress plugin. It effortlessly creates stunning before-and-after image sliders and galleries, enhancing your website's visual content."
- [bafg]
- [bafg_gallery]
Beaf Before And After Gallery [bafg] Shortcode
The ‘bafg’ shortcode from the Before and After Gallery plugin dynamically generates an interactive image slider. It fetches ‘before’ and ‘after’ images from the post metadata and displays them side by side.
Shortcode: [bafg]
Parameters
Here is a list of all possible bafg shortcode parameters and attributes:
id– Unique identifier for the before and after image gallery.bafg_before_image– Specifies the URL of the image to be used as the ‘before’ image.bafg_after_image– Specifies the URL of the image to be used as the ‘after’ image.bafg_image_styles– Sets the orientation of the images, either horizontal or vertical.bafg_default_offset– Determines the initial position of the slider on page load.bafg_before_label– Sets the label that appears on the ‘before’ image.bafg_after_label– Sets the label that appears on the ‘after’ image.bafg_no_overlay– Controls whether an overlay appears on the images.bafg_move_slider_on_hover– Allows the slider to move when the mouse hovers over it.bafg_click_to_move– Allows the slider to move when clicked on.skip_lazy_load– Decides whether to skip the lazy loading of images.before_img_alt– Sets the alt text for the ‘before’ image.after_img_alt– Sets the alt text for the ‘after’ image.enable_preloader– Decides whether to show a preloader while images are loading.
Examples and Usage
Basic example – Displays the before and after gallery by referencing the ID.
[bafg id=1 /]Advanced examples
Displaying the before and after gallery by referencing the ID and setting custom labels for the ‘Before’ and ‘After’ states.
[bafg id=1 before_label='Pre-Transformation' after_label='Post-Transformation' /]Displaying the before and after gallery by referencing the ID, setting custom labels for the ‘Before’ and ‘After’ states, and disabling the overlay.
[bafg id=1 before_label='Pre-Transformation' after_label='Post-Transformation' overlay='no' /]Displaying the before and after gallery by referencing the ID, setting custom labels for the ‘Before’ and ‘After’ states, disabling the overlay, and enabling the slider to move on hover.
[bafg id=1 before_label='Pre-Transformation' after_label='Post-Transformation' overlay='no' move_slider_on_hover='yes' /]Displaying the before and after gallery by referencing the ID, setting custom labels for the ‘Before’ and ‘After’ states, disabling the overlay, enabling the slider to move on hover, and allowing the slider to move on click.
[bafg id=1 before_label='Pre-Transformation' after_label='Post-Transformation' overlay='no' move_slider_on_hover='yes' click_to_move='yes' /]PHP Function Code
In case you have difficulties debugging what causing issues with [bafg] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('bafg', array( $this, 'bafg_post_shortcode' ));Shortcode PHP function:
function bafg_post_shortcode( $atts, $content = null ){
extract( shortcode_atts(array(
'id' => ''
), $atts) );
ob_start();
$b_image = get_post_meta( $id, 'bafg_before_image', true);
$a_image = get_post_meta( $id, 'bafg_after_image', true);
$orientation = !empty(get_post_meta( $id, 'bafg_image_styles', true)) ? get_post_meta( $id, 'bafg_image_styles', true) : 'horizontal';
$offset = !empty(get_post_meta( $id, 'bafg_default_offset', true)) ? get_post_meta( $id, 'bafg_default_offset', true) : '0.5';
$before_label = !empty(get_post_meta( $id, 'bafg_before_label', true)) ? get_post_meta( $id, 'bafg_before_label', true) : 'Before';
$after_label = !empty(get_post_meta( $id, 'bafg_after_label', true)) ? get_post_meta( $id, 'bafg_after_label', true) : 'After';
$overlay = !empty(get_post_meta( $id, 'bafg_no_overlay', true)) ? get_post_meta( $id, 'bafg_no_overlay', true) : 'no';
$move_slider_on_hover = !empty(get_post_meta( $id, 'bafg_move_slider_on_hover', true)) ? get_post_meta( $id, 'bafg_move_slider_on_hover', true) : 'no';
$click_to_move = !empty(get_post_meta( $id, 'bafg_click_to_move', true)) ? get_post_meta( $id, 'bafg_click_to_move', true) : 'no';
$skip_lazy_load = get_post_meta( $id, 'skip_lazy_load', true);
$before_img_alt = get_post_meta( $id, 'before_img_alt', true) ? get_post_meta( $id, 'before_img_alt', true) : '';
$after_img_alt = get_post_meta( $id, 'after_img_alt', true) ? get_post_meta( $id, 'after_img_alt', true) : '';
if( $skip_lazy_load == 'yes' ) {
$skip_lazy = 'skip-lazy';
$data_skip_lazy = 'data-skip-lazy';
}else {
$skip_lazy = '';
$data_skip_lazy = '';
}
$enable_preloader = is_array(get_option('bafg_tools')) && !empty(get_option('bafg_tools')['enable_preloader']) ? get_option('bafg_tools')['enable_preloader'] : '';
if(get_post_status($id) == 'publish' ) :
?>
<?php do_action('bafg_before_slider', $id); ?>
<div class="bafg-twentytwenty-container <?php echo esc_attr('slider-'.$id.''); ?> <?php if(get_post_meta($id, 'bafg_custom_color', true) == 'yes') echo 'bafg-custom-color'; ?>" bafg-orientation="<?php echo esc_attr($orientation); ?>" bafg-default-offset="<?php echo esc_attr($offset); ?>" bafg-before-label="<?php echo esc_attr__( $before_label,'bafg' ); ?>" bafg-after-label="<?php echo esc_attr__( $after_label,'bafg' ); ?>" bafg-overlay="<?php echo esc_attr($overlay); ?>" bafg-move-slider-on-hover="<?php echo esc_attr($move_slider_on_hover); ?>" bafg-click-to-move="<?php echo esc_attr($click_to_move); ?>">
<?php
if( is_plugin_active( 'beaf-before-and-after-gallery-pro/before-and-after-gallery-pro.php' ) ){
if( !empty( $enable_preloader ) && ! is_admin()){
?>
<!-- the preloader -->
<div class="bafg-preloader">
<div class="bafg-preloader-img"></div>
</div>
<?php
}
}
?>
<img class="<?php echo esc_attr( $skip_lazy ); ?>" <?php echo esc_attr( $data_skip_lazy ); ?> src="<?php echo esc_url($b_image); ?>" alt="<?php echo esc_attr( $before_img_alt ); ?>">
<img class="<?php echo esc_attr( $skip_lazy ); ?>" <?php echo esc_attr( $data_skip_lazy ); ?> src="<?php echo esc_url($a_image); ?>" alt="<?php echo esc_attr( $after_img_alt ); ?>">
</div>
<?php do_action('bafg_after_slider', $id); ?>
<style type="text/css">
<?php $bafg_before_label_background= !empty(get_post_meta($id, 'bafg_before_label_background', true)) ? get_post_meta($id, 'bafg_before_label_background', true) : '';
$bafg_before_label_color= !empty(get_post_meta($id, 'bafg_before_label_color', true)) ? get_post_meta($id, 'bafg_before_label_color', true) : '';
$bafg_after_label_background= !empty(get_post_meta($id, 'bafg_after_label_background', true)) ? get_post_meta($id, 'bafg_after_label_background', true) : '';
$bafg_after_label_color= !empty(get_post_meta($id, 'bafg_after_label_color', true)) ? get_post_meta($id, 'bafg_after_label_color', true) : '';
?><?php if( !empty($bafg_before_label_background) || !empty($bafg_before_label_color)) {
?>.<?php echo 'slider-'.$id.' ';
?>.twentytwenty-before-label::before {
background: <?php echo esc_attr($bafg_before_label_background);
?>;
color: <?php echo esc_attr($bafg_before_label_color);
?>;
}
<?php
}
?><?php if( !empty($bafg_after_label_background) || !empty($bafg_after_label_color)) {
?>.<?php echo 'slider-'.$id.' ';
?>.twentytwenty-after-label::before {
background: <?php echo esc_attr($bafg_after_label_background);
?>;
color: <?php echo esc_attr($bafg_after_label_color);
?>;
}
<?php
}
?>
</style>
<?php
endif;
return ob_get_clean();
}
Code file location:
beaf-before-and-after-gallery/beaf-before-and-after-gallery/before-and-after-gallery.phpBeaf Before And After Gallery [bafg_gallery] Shortcode
The ‘bafg_gallery’ shortcode is a feature of the Before and After Gallery plugin. It generates a gallery display based on the specified category, column, items, and info parameters. The shortcode allows customization of the gallery’s layout, showing the posts from a specific category or all categories. It also controls the number of columns and items shown. The ‘info’ parameter can be used to hide or display additional information about the gallery items. This shortcode is flexible and user-friendly, enhancing the website’s visual appeal.
Shortcode: [bafg_gallery]
Parameters
Here is a list of all possible bafg_gallery shortcode parameters and attributes:
category– Specifies the gallery category to displaycolumn– Sets the number of columns in the galleryitems– Defines the number of gallery items to showinfo– Controls the visibility of the gallery information
Examples and Usage
Basic example – Displays a gallery without any specific categories or items limit.
[bafg_gallery /]Advanced example 1 – Displays a gallery with a specific category and a limit on the number of items.
[bafg_gallery category="nature" items=5 /]Advanced example 2 – Displays a gallery with a specific category, limit on the number of items, and a defined number of columns.
[bafg_gallery category="nature" items=5 column=3 /]Advanced example 3 – Displays a gallery with a specific category, limit on the number of items, a defined number of columns, and hides the info by setting it to ‘true’.
[bafg_gallery category="nature" items=5 column=3 info='true' /]These shortcodes allow you to customize the display of your gallery according to your needs. You can control the category of the images shown, the number of items displayed, the number of columns in the gallery, and whether or not to display the info.
PHP Function Code
In case you have difficulties debugging what causing issues with [bafg_gallery] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('bafg_gallery', array( $this, 'bafg_gallery_shortcode' ));Shortcode PHP function:
function bafg_gallery_shortcode( $atts, $content = null ){
ob_start();
extract( shortcode_atts(array(
'category' => '',
'column' => '',
'items' => -1,
'info' => ''
), $atts) );
if( $category != '' ) {
if( $category == 'all' ){
$gallery_query = new WP_Query( array(
'post_type' => 'bafg',
'posts_per_page' => $items,
) );
}else{
$gallery_query = new WP_Query( array(
'post_type' => 'bafg',
'posts_per_page' => $items,
'tax_query' => array(
array (
'taxonomy' => 'bafg_gallery',
'field' => 'id',
'terms' => $category,
)
),
) );
}
$column = !empty($column) ? $column : '2';
switch ($column) {
case "2":
$col = '6';
break;
case "3":
$col = '4';
break;
case "4":
$col = '3';
break;
default:
$col = '6';
}
?>
<?php $gallery_id = rand(10, 200); ?>
<?php if($info != 'true'): ?>
<style>
.bafg-gallery-row.gallery-id-<?php echo esc_attr($gallery_id);
?>.bafg-slider-info {
display: none !important
}
</style>
<?php endif; ?>
<div class="bafg-row bafg-gallery-row gallery-id-<?php echo esc_attr($gallery_id); ?>">
<?php
while ( $gallery_query->have_posts() ) :
$gallery_query->the_post();
echo '<div class="bafg-col-'.$col.'">';
echo do_shortcode('[bafg id="'.get_the_id().'"]');
echo '</div>';
endwhile;
?>
</div>
<?php
wp_reset_postdata();
}
return ob_get_clean();
}
Code file location:
beaf-before-and-after-gallery/beaf-before-and-after-gallery/before-and-after-gallery.phpConclusion
Now that you’ve learned how to embed the Beaf Before And After Gallery Plugin shortcodes, 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