Below, you’ll find a detailed guide on how to add the Image Slider Slideshow 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 Image Slider Slideshow Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Image Slider Slideshow Plugin and the shortcodes it provides:
"Image Slider Slideshow is a versatile WordPress plugin that allows users to create stunning, responsive slideshows. With this tool, you can easily showcase your images in a captivating way."
- [img-slider]
Image Slider Slideshow [img-slider] Shortcode
The Image Slider shortcode is a powerful tool that enables the display of image galleries in a slider format on your WordPress site. It works by fetching the gallery post associated with the specified ID. If no gallery is found, it returns an error message. The shortcode also checks if the post is an old image slider or a new one. If it’s old, it adjusts the ID to match the new format. The shortcode then retrieves the gallery settings and images, preparing them for display. If no settings or images are found, an error message is returned. It also enqueues necessary scripts and styles for the slider’s functionality. Finally, the shortcode generates the gallery CSS and loads the image-slider.php template, returning the final HTML for the slider.
Shortcode: [img-slider]
Parameters
Here is a list of all possible img-slider shortcode parameters and attributes:
id– Specifies the unique id of the image slider gallery.align– Determines the alignment of the image slider on the page.
Examples and Usage
Basic example – The following shortcode displays an image slider by referencing the ID of the image slider post.
[img-slider id=1 /]Advanced examples
Displaying an image slider by referencing both ID and alignment. The image slider will load by ID and will align according to the specified alignment attribute. If the alignment attribute is not specified, it will follow the default alignment.
[img-slider id=2 align="center" /]Using the shortcode to display an image slider by referencing the ID and setting a custom alignment. The image slider will load by ID and will align according to the specified custom alignment.
[img-slider id=3 align="right" /]Displaying an image slider by referencing the ID and setting alignment to left. The image slider will load by ID and will align to the left.
[img-slider id=4 align="left" /]PHP Function Code
In case you have difficulties debugging what causing issues with [img-slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'img-slider', array( $this, 'img_slider_shortcode_handler' ) );Shortcode PHP function:
function img_slider_shortcode_handler( $atts ) {
$default_atts = array(
'id' => false,
'align' => '',
);
$atts = wp_parse_args( $atts, $default_atts );
if ( ! $atts['id'] ) {
return esc_html__( 'Gallery not found11', 'img-slider' );
}
/* Generate uniq id for this gallery */
$gallery_id = 'rpg-' . $atts['id'];
// Check if is an old image slider post or new.
$gallery = get_post( $atts['id'] );
if ( 'img_slider' != get_post_type( $gallery ) ) {
$gallery_posts = get_posts( array(
'post_type' => 'img_slider',
'post_status' => 'publish',
'meta_query' => array(
array(
'key' => 'slider-id',
'value' => $atts['id'],
'compare' => '=',
),
),
) );
if ( empty( $gallery_posts ) ) {
return esc_html__( 'Gallery not found12', 'img-slider' );
}
$atts['id'] = $gallery_posts[0]->ID;
}
/* Get gallery settings */
$settings = get_post_meta( $atts['id'], 'img-slider-settings', true );
$default = Img_Slider_WP_CPT_Fields_Helper::get_defaults();
$settings = wp_parse_args( $settings, $default );
$pre_gallery_html = apply_filters( 'img_slider_pre_output_filter_check', false, $settings, $gallery );
if ( false !== $pre_gallery_html ) {
// If there is HTML, then we stop trying to display the gallery and return THAT HTML.
$pre_output = apply_filters( 'img_slider_pre_output_filter','', $settings, $gallery );
return $pre_output;
}
/* Get gallery images */
$images = apply_filters( 'img_slider_before_shuffle_images', get_post_meta( $atts['id'], 'slider-images', true ), $settings );
$images = apply_filters( 'img_slider_images', $images, $settings );
if ( empty( $settings ) || empty( $images ) ) {
return esc_html__( 'Gallery not found13', 'img-slider' );
}
do_action('portfolio_extra_scripts',$settings);
// Main CSS & JS
$necessary_scripts = apply_filters( 'img_slider_necessary_scripts', array( 'img-slider' ),$settings );
$necessary_styles = apply_filters( 'img_slider_necessary_styles', array( 'img-slider' ), $settings );
if ( ! empty( $necessary_scripts ) ) {
foreach ( $necessary_scripts as $script ) {
wp_enqueue_script( $script );
}
}
if ( ! empty( $necessary_styles ) ) {
foreach ( $necessary_styles as $style ) {
wp_enqueue_style( $style );
}
}
$settings['gallery_id'] = $gallery_id;
$settings['align'] = $atts['align'];
$template_data = array(
'gallery_id' => $gallery_id,
'settings' => $settings,
'images' => $images,
'loader' => $this->loader,
);
ob_start();
/* Config for gallery script */
$js_config = array(
/*"margin" => absint( $settings['margin'] ),*/
/*'type' => $type,*/
'columns' => 12,
'gutter' => isset( $settings['gutter'] ) ? absint($settings['gutter']) : 10,
);
$template_data['js_config'] = apply_filters( 'img_slider_settings', $js_config, $settings );
$template_data = apply_filters( 'img_slider_template_data', $template_data );
echo $this->generate_gallery_css( $gallery_id, $settings );
$this->loader->set_template_data( $template_data );
$this->loader->get_template_part( 'image', 'slider' ); //load image-slider.php
$html = ob_get_clean();
return $html;
}
Code file location:
image-slider-slideshow/image-slider-slideshow/includes/public/class-img-slider-shortcode.phpConclusion
Now that you’ve learned how to embed the Image Slider Slideshow 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