Below, you’ll find a detailed guide on how to add the Thumbnail carousel slider 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 Thumbnail carousel slider Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Thumbnail carousel slider Plugin and the shortcodes it provides:
Thumbnail carousel slider
"Thumbnail Carousel Slider is a WordPress plugin designed to add a versatile and responsive image slider to your website. It enhances visual appeal and boosts user engagement."
Included Shortcodes:
- [print_responsive_thumbnail_slider]
Thumbnail carousel slider [print_responsive_thumbnail_slider] Shortcode
The wp-responsive-thumbnail-slider shortcode is designed to display a responsive image slider on your WordPress website. It fetches images from the database, resizes them according to the settings, and displays them in a slider format. The shortcode also includes options for auto-scrolling, pausing on mouseover, and linking images to custom URLs.
Shortcode: [print_responsive_thumbnail_slider]
Examples and Usage
Basic example – Displaying the responsive thumbnail slider on a page or post.
[print_responsive_thumbnail_slider]Advanced examples
Displaying the responsive thumbnail slider with specific settings for image height, width, and auto scrolling feature.
[print_responsive_thumbnail_slider imageheight=300 imagewidth=200 auto=1]Using the shortcode to display a responsive thumbnail slider with customized settings for image margin, speed, and pause duration. The values are set to control the appearance and behavior of the slider.
[print_responsive_thumbnail_slider imageMargin=10 speed=500 pause=3000]Using the shortcode to display a responsive thumbnail slider with specific settings for minimum visible slides, maximum visible slides, and the number of slides to move on each scroll.
[print_responsive_thumbnail_slider min_visible=2 visible=5 scroll=2]Note: The above examples assume that you have the ‘wp-responsive-thumbnail-slider’ plugin installed and activated on your WordPress site.
PHP Function Code
In case you have difficulties debugging what causing issues with [print_responsive_thumbnail_slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('print_responsive_thumbnail_slider', 'print_responsive_thumbnail_slider_func' );Shortcode PHP function:
function print_responsive_thumbnail_slider_func(){
$wpcurrentdir=dirname(__FILE__);
$wpcurrentdir=str_replace("\\","/",$wpcurrentdir);
$settings=get_option('responsive_thumbnail_slider_settings');
$settings['auto']=(int)$settings['auto'];
$wpcurrentdir=dirname(__FILE__);
$wpcurrentdir=str_replace("\\","/",$wpcurrentdir);
$uploads = wp_upload_dir();
$baseurl=$uploads['baseurl'];
$baseurl.='/wp-responsive-images-thumbnail-slider/';
$baseDir=$uploads['basedir'];
$baseDir=str_replace("\\","/",$baseDir);
$pathToImagesFolder=$baseDir.'/wp-responsive-images-thumbnail-slider';
wp_enqueue_style('images-responsive-thumbnail-slider-style');
wp_enqueue_script('jquery');
wp_enqueue_script('images-responsive-thumbnail-slider-jc');
ob_start();
?><!-- print_responsive_thumbnail_slider_func --><style type='text/css' >
.bx-wrapper .bx-viewport {
background: none repeat scroll 0 0 <?php echo $settings['scollerBackground']; ?> !important;
border: 0px none !important;
box-shadow: 0 0 0 0 !important;
/*padding:<?php echo $settings['imageMargin'];?>px !important;*/
}
</style>
<div style="clear: both;"></div>
<?php $url = plugin_dir_url(__FILE__); ?>
<div style="width: auto;postion:relative;display:none" id="divSliderMain">
<div class="responsiveSlider" style="margin-top: 2px !important;">
<?php
global $wpdb;
$imageheight=$settings['imageheight'];
$imagewidth=$settings['imagewidth'];
$query="SELECT * FROM ".$wpdb->prefix."responsive_thumbnail_slider order by createdon desc";
$rows=$wpdb->get_results($query,'ARRAY_A');
if(count($rows) > 0){
foreach($rows as $row){
$imagename=$row['image_name'];
$imageUploadTo=$pathToImagesFolder.'/'.$imagename;
$imageUploadTo=str_replace("\\","/",$imageUploadTo);
$pathinfo=pathinfo($imageUploadTo);
$filenamewithoutextension=$pathinfo['filename'];
$outputimg="";
if($settings['resizeImages']==0){
$outputimg = $baseurl.$row['image_name'];
}
else{
$imagetoCheck=$pathToImagesFolder.'/'.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
$imagetoCheckSmall=$pathToImagesFolder.'/'.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.strtolower($pathinfo['extension']);
if(file_exists($imagetoCheck)){
$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
}
else if(file_exists($imagetoCheckSmall)){
$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.strtolower($pathinfo['extension']);
}
else{
if(function_exists('wp_get_image_editor')){
$image = wp_get_image_editor($pathToImagesFolder."/".$row['image_name']);
if ( ! is_wp_error( $image ) ) {
$image->resize( $imagewidth, $imageheight, true );
$image->save( $imagetoCheck );
//$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
if(file_exists($imagetoCheck)){
$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
}
else if(file_exists($imagetoCheckSmall)){
$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.strtolower($pathinfo['extension']);
}
}
else{
$outputimg = $baseurl.$row['image_name'];
}
}
else if(function_exists('image_resize')){
$return=image_resize($pathToImagesFolder."/".$row['image_name'],$imagewidth,$imageheight) ;
if ( ! is_wp_error( $return ) ) {
$isrenamed=rename($return,$imagetoCheck);
if($isrenamed){
//$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
if(file_exists($imagetoCheck)){
$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
}
else if(file_exists($imagetoCheckSmall)){
$outputimg = $baseurl.$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.strtolower($pathinfo['extension']);
}
}
else{
$outputimg = $baseurl.$row['image_name'];
}
}
else{
$outputimg = $baseurl.$row['image_name'];
}
}
else{
$outputimg = $baseurl.$row['image_name'];
}
//$url = plugin_dir_url(__FILE__)."imagestoscroll/".$filenamewithoutextension.'_'.$imageheight.'_'.$imagewidth.'.'.$pathinfo['extension'];
}
}
?>
<div class="limargin i13_thumslider">
<?php if($settings['linkimage']==true){ ?>
<a target="_blank" <?php if($row['custom_link']!=""):?> href="<?php echo $row['custom_link']; ?>" <?php endif;?> ><img src="<?php echo $outputimg; ?>" alt="<?php echo $row['title']; ?>" title="<?php echo $row['title']; ?>" /></a>
<?php }else{ ?>
<img src="<?php echo $outputimg; ?>" alt="<?php echo $row['title']; ?>" title="<?php echo $row['title']; ?>" />
<?php } ?>
</div>
<?php }?>
<?php }?>
</div>
</div>
<script>
<?php $intval= uniqid('interval_');?>
var slider;
var <?php echo $intval;?> = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(<?php echo $intval;?>);
jQuery("#divSliderMain").show();
var sliderMainHtml=jQuery('#divSliderMain').html();
slider= jQuery('.responsiveSlider').bxSlider({
<?php if( $settings['visible']==1):?>
mode:'fade',
<?php endif;?>
slideWidth: <?php echo $settings['imagewidth'];?>,
minSlides: <?php echo $settings['min_visible'];?>,
maxSlides: <?php echo $settings['visible'];?>,
moveSlides: <?php echo $settings['scroll'];?>,
slideMargin: <?php echo $settings['imageMargin'];?>,
speed:<?php echo $settings['speed']; ?>,
pause:<?php echo $settings['pause']; ?>,
touchEnabled:true,
<?php if($settings['pauseonmouseover'] and ($settings['auto']==1 or $settings['auto']==2) ){ ?>
autoHover: true,
<?php }else{ if($settings['auto']==1 or $settings['auto']==2){?>
autoHover:false,
<?php }} ?>
<?php if($settings['auto']==1):?>
controls:false,
<?php else: ?>
controls:true,
<?php endif;?>
pager:false,
useCSS:false,
<?php if($settings['show_caption']):?>
captions:true,
<?php else:?>
captions:false,
<?php endif;?>
<?php if($settings['show_pager']):?>
pager:true,
<?php else:?>
pager:false,
<?php endif;?>
<?php if($settings['auto']==1 or $settings['auto']==2):?>
auto:true,
<?php endif;?>
<?php if($settings['circular']):?>
infiniteLoop: true,
<?php else: ?>
infiniteLoop: false,
<?php endif;?>
onSlideBefore: function(slideElement){
jQuery(slideElement).find('img').each(function(index, elm) {
if(!elm.complete || elm.naturalWidth === 0){
var toload='';
var toloadval='';
jQuery.each(elm.attributes, function(i, attrib){
var value = attrib.value;
var aname=attrib.name;
var pattern = /^((http|https):\/\/)/;
if(pattern.test(value) && aname!='src' && aname.indexOf('data-html5_vurl')==-1) {
toload=aname;
toloadval=value;
}
// do your magic :-)
});
vsrc= jQuery(elm).attr("src");
jQuery(elm).removeAttr("src");
dsrc= jQuery(elm).attr("data-src");
lsrc= jQuery(elm).attr("data-lazy-src");
if(dsrc!== undefined && dsrc!='' && dsrc!=vsrc){
jQuery(elm).attr("src",dsrc);
}
else if(lsrc!== undefined && lsrc!=vsrc){
jQuery(elm).attr("src",lsrc);
}
else if(toload!='' && toload!='srcset' && toloadval!='' && toloadval!=vsrc){
$(elm).attr("src",toloadval);
}
else{
jQuery(elm).attr("src",vsrc);
}
elm= jQuery(elm)[0];
if(!elm.complete && elm.naturalHeight == 0){
jQuery(elm).removeAttr('loading');
jQuery(elm).removeAttr('data-lazy-type');
jQuery(elm).removeClass('lazy');
jQuery(elm).removeClass('lazyLoad');
jQuery(elm).removeClass('lazy-loaded');
jQuery(elm).removeClass('jetpack-lazy-image');
jQuery(elm).removeClass('jetpack-lazy-image--handled');
jQuery(elm).removeClass('lazy-hidden');
}
}
});
},
onSliderLoad: function(){
}
});
<?php if($settings['auto']==1 or $settings['auto']==2){?>
var is_firefox=navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_android=navigator.userAgent.toLowerCase().indexOf('android') > -1;
var is_iphone=navigator.userAgent.toLowerCase().indexOf('iphone') > -1;
var width = jQuery(window).width();
if(is_firefox && (is_android || is_iphone)){
}else{
var timer;
jQuery(window).bind('resize', function(){
if(jQuery(window).width() != width){
width = jQuery(window).width();
timer && clearTimeout(timer);
timer = setTimeout(onResize, 600);
}
});
}
function onResize(){
jQuery('#divSliderMain').html('');
jQuery('#divSliderMain').html(sliderMainHtml);
var slider= jQuery('.responsiveSlider').bxSlider({
<?php if( $settings['visible']==1):?>
mode:'fade',
<?php endif;?>
slideWidth: <?php echo $settings['imagewidth'];?>,
minSlides: <?php echo $settings['min_visible'];?>,
maxSlides: <?php echo $settings['visible'];?>,
moveSlides: <?php echo $settings['scroll'];?>,
slideMargin: <?php echo $settings['imageMargin'];?>,
speed:<?php echo $settings['speed']; ?>,
pause:<?php echo $settings['pause']; ?>,
touchEnabled:true,
<?php if($settings['pauseonmouseover'] and ($settings['auto']==1 or $settings['auto']==2) ){ ?>
autoHover: true,
<?php }else{ if($settings['auto']==1 or $settings['auto']==2){?>
autoHover:false,
<?php }} ?>
<?php if($settings['auto']==1):?>
controls:false,
<?php else: ?>
controls:true,
<?php endif;?>
pager:false,
useCSS:false,
<?php if($settings['show_caption']):?>
captions:true,
<?php else:?>
captions:false,
<?php endif;?>
<?php if($settings['show_pager']):?>
pager:true,
<?php else:?>
pager:false,
<?php endif;?>
<?php if($settings['auto']==1 or $settings['auto']==2):?>
auto:true,
<?php endif;?>
<?php if($settings['circular']):?>
infiniteLoop: true,
<?php else: ?>
infiniteLoop: false,
<?php endif;?>
onSlideBefore: function(slideElement){
jQuery(slideElement).find('img').each(function(index, elm) {
if(!elm.complete || elm.naturalWidth === 0){
var toload='';
var toloadval='';
jQuery.each(elm.attributes, function(i, attrib){
var value = attrib.value;
var aname=attrib.name;
var pattern = /^((http|https):\/\/)/;
if(pattern.test(value) && aname!='src' && aname.indexOf('data-html5_vurl')==-1) {
toload=aname;
toloadval=value;
}
// do your magic :-)
});
vsrc= jQuery(elm).attr("src");
jQuery(elm).removeAttr("src");
dsrc= jQuery(elm).attr("data-src");
lsrc= jQuery(elm).attr("data-lazy-src");
if(dsrc!== undefined && dsrc!='' && dsrc!=vsrc){
jQuery(elm).attr("src",dsrc);
}
else if(lsrc!== undefined && lsrc!=vsrc){
jQuery(elm).attr("src",lsrc);
}
else if(toload!='' && toload!='srcset' && toloadval!='' && toloadval!=vsrc){
$(elm).attr("src",toloadval);
}
else{
jQuery(elm).attr("src",vsrc);
}
elm= jQuery(elm)[0];
if(!elm.complete && elm.naturalHeight == 0){
jQuery(elm).removeAttr('loading');
jQuery(elm).removeAttr('data-lazy-type');
jQuery(elm).removeClass('lazy');
jQuery(elm).removeClass('lazyLoad');
jQuery(elm).removeClass('lazy-loaded');
jQuery(elm).removeClass('jetpack-lazy-image');
jQuery(elm).removeClass('jetpack-lazy-image--handled');
jQuery(elm).removeClass('lazy-hidden');
}
}
});
}
});
}
<?php }?>
}
}, 100);
window.addEventListener('load', function() {
setTimeout(function(){
if(jQuery(".responsiveSlider").find('.bx-loading').length>0){
jQuery(".responsiveSlider").find('img').each(function(index, elm) {
if(!elm.complete || elm.naturalWidth === 0){
var toload='';
var toloadval='';
jQuery.each(this.attributes, function(i, attrib){
var value = attrib.value;
var aname=attrib.name;
var pattern = /^((http|https):\/\/)/;
if(pattern.test(value) && aname!='src') {
toload=aname;
toloadval=value;
}
// do your magic :-)
});
vsrc=jQuery(elm).attr("src");
jQuery(elm).removeAttr("src");
dsrc=jQuery(elm).attr("data-src");
lsrc=jQuery(elm).attr("data-lazy-src");
if(dsrc!== undefined && dsrc!='' && dsrc!=vsrc){
jQuery(elm).attr("src",dsrc);
}
else if(lsrc!== undefined && lsrc!=vsrc){
jQuery(elm).attr("src",lsrc);
}
else if(toload!='' && toload!='srcset' && toloadval!='' && toloadval!=vsrc){
jQuery(elm).removeAttr(toload);
jQuery(elm).attr("src",toloadval);
}
else{
jQuery(elm).attr("src",vsrc);
}
elm=jQuery(elm)[0];
if(!elm.complete && elm.naturalHeight == 0){
jQuery(elm).removeAttr('loading');
jQuery(elm).removeAttr('data-lazy-type');
jQuery(elm).removeClass('lazy');
jQuery(elm).removeClass('lazyLoad');
jQuery(elm).removeClass('lazy-loaded');
jQuery(elm).removeClass('jetpack-lazy-image');
jQuery(elm).removeClass('jetpack-lazy-image--handled');
jQuery(elm).removeClass('lazy-hidden');
}
}
}).promise().done( function(){
jQuery(".responsiveSlider").find('.bx-loading').remove();
} );
}
}, 6000);
});
</script><!-- end print_responsive_thumbnail_slider_func --><?php
$output = ob_get_clean();
return $output;
}
Code file location:
wp-responsive-thumbnail-slider/wp-responsive-thumbnail-slider/wp-responsive-images-thumbnail-slider.phpConclusion
Now that you’ve learned how to embed the Thumbnail carousel slider 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