Below, you’ll find a detailed guide on how to add the Image Carousel 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 Image Carousel Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Image Carousel Plugin and the shortcodes it provides:
"Image Carousel is a versatile WordPress plugin that allows users to create stunning, responsive photo slideshows. Enhance your website's visual appeal with this user-friendly tool."
- [icp_widget_carousel]
Image Carousel [icp_widget_carousel] Shortcode
The Image Carousel Plugin (ICP) shortcode is a tool that activates the image carousel functionality on your WordPress site. This shortcode checks if the global carousel is active. If not, it applies frontend filters, generates a carousel using the gallery shortcode, and adds a filter for image attributes. If the adaptive height option is set to ‘false’, it nullifies the image srcset metadata.
Shortcode: [icp_widget_carousel]
Examples and Usage
Basic example – Display the image carousel with default settings.
[icp_widget_carousel]Advanced examples
Customize the image carousel by specifying the ID of the images to be displayed. Here, the images with IDs 1, 2, and 3 will be displayed in the carousel.
[icp_widget_carousel id="1,2,3"]Further customize the image carousel by specifying the size of the images to be displayed. In this example, the images will be displayed in ‘medium’ size.
[icp_widget_carousel id="1,2,3" size="medium"]For even more customization, you can specify the number of images to be displayed at a time in the carousel. Here, 3 images will be displayed at a time.
[icp_widget_carousel id="1,2,3" size="medium" items="3"]Note: These examples assume that you have images with IDs 1, 2, and 3 in your media library, and that ‘medium’ is a valid image size in your WordPress settings.
PHP Function Code
In case you have difficulties debugging what causing issues with [icp_widget_carousel] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'icp_widget_carousel', 'icp_widget_shortcode' );Shortcode PHP function:
function icp_widget_shortcode( $attrs )
{
if ( trim( icp_get_option( 'icp_global_carousel_active' ) ) != 'active' ) {
if ( has_filter( 'icp_frontend_filter' ) ) {
apply_filters( 'icp_frontend_filter', '' );
}
//Generate Carousel
return icp_gallery_shortcode( $attrs );
//bfi_thumb
add_filter( 'wp_get_attachment_image_attributes', 'icp_bfi_thumb' );
if ( trim( icp_get_option( 'icp_carousel_adapt_height' ) ) == 'false' ) {
add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );
}
}
}
Code file location:
image-carousel/image-carousel/image-carousel.phpImage Carousel Shortcode
The Image Carousel Plugin shortcode is designed to create a dynamic image gallery with a carousel effect. It utilizes the ‘gallery’ shortcode to fetch images attached to a post and display them in a carousel format. The PHP function ‘icp_gallery_shortcode’ processes attributes like ‘order’, ‘orderby’, ‘columns’, and ‘size’. It also checks if a lightbox effect is enabled. The gallery can be customized to display images in a specific order, size, and number of columns. The shortcode also uses ‘apply_filters’ to allow for further customization. It ensures valid ‘orderby’ statements and forces the use of ‘full’ type for size. The output is a carousel-style image gallery that enhances the visual appeal of your WordPress site.
Shortcode:
Parameters
Here is a list of all possible gallery shortcode parameters and attributes:
order– Defines the sequence of the images, can be set to ascending (ASC) or random (RAND).orderby– Specifies the parameter to order the images by, such as menu order or ID.id– The ID of the post to get the images from.itemtag– HTML tag to use for each item in the gallery.icontag– HTML tag to use for each icon in the gallery.shadowbox– If set to true, a shadow box effect is added to the images.captiontag– HTML tag to use for the caption of each image.columns– Number of columns in the carousel, default is 3.size– The size of the images, default is ‘full’.include– Specific images to include in the gallery, based on their IDs.exclude– Specific images to exclude from the gallery, based on their IDs.link– Determines where the images link to, default is ‘file’.
Examples and Usage
Basic example – Displaying a gallery with a specific set of images.
Advanced examples:
Displaying a gallery with a specific set of images, ordered by the author’s preference and with full size images.
Displaying a gallery with a specific set of images, excluding certain images, and linking to the file. The images are displayed in three columns with the order of images randomized.
Displaying a gallery with a specific set of images, with captions displayed, and images linked to the file. The images are displayed in three columns with the order of images by menu order and ID.
PHP Function Code
In case you have difficulties debugging what causing issues with shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'gallery', 'icp_gallery_shortcode' );Shortcode PHP function:
function icp_gallery_shortcode( $attr )
{
$post = get_post();
$params = icp_frontend_option_loader();
$instance = uniqid();
$the_class = ( icp_get_option( 'icp_carousel_use_lightbox' ) == 'yes' && icp_glg_supported_version() ? 'ghozylab-gallery' : 'ghozylab-gallery-nolightbox' );
if ( ! empty( $attr['ids'] ) ) {
// 'ids' is explicitly ordered, unless you specify otherwise.
if ( empty( $attr['orderby'] ) ) {
$attr['orderby'] = 'post__in';
}
$attr['include'] = $attr['ids'];
}
// Allow plugins/themes to override the default gallery template.
$output = apply_filters( 'post_gallery', '', $attr );
if ( $output != '' ) {
return $output;
}
// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( ! $attr['orderby'] ) {
unset( $attr['orderby'] );
}
}
// We're trusting author input too, but for this time we need to force to use 'full' type for size :(
if ( isset( $attr['size'] ) ) {
$attr['size'] = 'full';
if ( ! $attr['size'] ) {
unset( $attr['size'] );
}
}
extract( shortcode_atts( array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post ? $post->ID : 0,
'itemtag' => 'dl',
'icontag' => 'dt',
'shadowbox' => false,
'captiontag' => 'dd',
'columns' => 3, /* @since 1.0.0.23 :: Ability to set carousel columns */
'size' => 'full',
'include' => '',
'exclude' => '',
'link' => 'file',
), $attr, 'gallery' ) );
$id = intval( $id );
if ( 'RAND' == $order ) {
$orderby = 'none';
}
if ( ! empty( $include ) ) {
$_attachments = get_posts( array( 'include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif ( ! empty( $exclude ) ) {
$attachments = get_children( array( 'post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
} else {
$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
}
if ( empty( $attachments ) ) {
return '';
}
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment ) {
$output .= icp_wp_get_attachment_link( $att_id, $size, true, false, false )."\n";
}
return $output;
}
$itemtag = tag_escape( $itemtag );
$captiontag = tag_escape( $captiontag );
$icontag = tag_escape( $icontag );
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[$itemtag] ) ) {
$itemtag = 'dl';
}
if ( ! isset( $valid_tags[$captiontag] ) ) {
$captiontag = 'dd';
}
if ( ! isset( $valid_tags[$icontag] ) ) {
$icontag = 'dt';
}
$selector = "gallery-{$instance}";
$gallery_style = $gallery_div = '';
if ( apply_filters( 'use_default_gallery_style', true ) ) {
ob_start();
}
wp_enqueue_script( 'icp-carousel' );
wp_enqueue_script( 'icp-easing' );
wp_enqueue_style( 'icp-carousel-style' );
wp_enqueue_style( 'icp-carousel-theme' );
?>
<!-- Carousel Style & Script for <?php echo $selector; ?> -->
<script type="text/javascript">
// <![CDATA[
/* START --- <?php echo ICP_ITEM_NAME; ?> --- */
jQuery(document).ready(function($) {
<?php
if ( icp_get_option( 'icp_fancy_caption' ) == 'true' ) {?>
$('.<?php echo $params['main_class']; ?> img').each(function(i) {
$alt = $(this).attr('alt');
// Replace default title to more fancy :)
$(this).attr('alt', $alt.replace(/-|_/g, ' '));
$altnew = $(this).attr('alt').toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
$(this).attr('alt', $altnew);
// Compatibility with Zoom Lite Theme Image LazyLoad
$(this).removeAttr('data-lazy-src');
});
<?php }
?>
$('#icppreloader-<?php echo $selector; ?>').fadeOut(300, function() {
$('#<?php echo $selector; ?>').fadeIn(300);
var slider<?php echo $instance; ?> = $('#<?php echo $selector; ?>').bxSlider({
auto: <?php echo $params['auto']; ?>,
pause: <?php echo $params['interval']; ?>,
autoHover: true,
moveSlides: <?php echo $columns; ?>,
minSlides: <?php echo $columns; ?>,
maxSlides: <?php echo $columns; ?>,
slideWidth: <?php echo $params['s_width']; ?>,
slideMargin: <?php echo $params['margin']; ?>,
startSlide: 0,
infiniteLoop: true,
captions: <?php
if ( $params['captionStyle'] == 'default' || $params['captionStyle'] == '' ) {echo $params['caption'];} else {echo 'false';}
?>,
captionsMode: 'alt',
adaptiveHeight: <?php echo $params['autoHeight']; ?>,
useCSS: <?php
if ( $params['easing'] == 'none' ) {echo 'true';} else {echo 'false';}
?>,
pager: <?php echo $params['pager']; ?>,
easing: '<?php echo $params['easing']; ?>',
speed: <?php
if ( $params['easing'] == 'none' ) {echo 100;} else {echo $params['transition_speed'];}
?>,
preloadImages: 'all',
onSlideBefore: function() {
<?php
if ( $params['caption_effect'] == 'true' ) {?>
$('#<?php echo $selector; ?> .bx-caption').slideUp();
<?php }
?>
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
<?php
if ( $params['auto'] == 'true' ) {?>
slider<?php echo $instance; ?>.stopAuto();
slider<?php echo $instance; ?>.startAuto();
<?php }
if ( $params['caption_effect'] == 'true' ) {?>
$('#<?php echo $selector; ?> .bx-caption').slideDown();
<?php }
?>
}
});
});
});
/* END --- <?php echo ICP_ITEM_NAME; ?> --- */
// ]]>
</script>
<style type="text/css">
<?php
echo '.markup-'.$selector.' .carousel-item img {width: 100%;margin: 0 auto;border:none !important;border-radius: 0px !important;box-shadow:none !important;}';
echo '.markup-'.$selector.' .bx-controls-direction a {display: none;}';
echo '.markup-'.$selector.' .bx-wrapper:hover .bx-controls-direction a {display: block;}';
if ( $params['permanent_nav'] == 'true' ) {
echo '.markup-'.$selector.' .bx-controls-direction a { display: block !important;}';
}
if ( $params['nav_color'] == 'white' ) {
echo '.markup-'.$selector.' .bx-wrapper .bx-prev {background: url("'.ICP_URL.'/css/images/controls_white.png") no-repeat 0 -32px;}';
echo '.markup-'.$selector.' .bx-wrapper .bx-next {background: url("'.ICP_URL.'/css/images/controls_white.png") no-repeat -43px -32px;}';
}
if ( $params['pager'] == 'false' ) {
echo '.markup-'.$selector.' .bx-wrapper { margin-bottom: 15px !important;}';
}
if ( $params['autoHeight'] == 'false' ) {
echo '.markup-'.$selector.' .bx-viewport { height: auto !important;}';
}
if ( $shadowbox ) {
echo '.markup-'.$selector.' .bx-wrapper .bx-viewport {-moz-box-shadow: 0 0 5px #ccc;-webkit-box-shadow: 0 0 5px #ccc;box-shadow: 0 0 5px #ccc;border: 3px solid #fff;background: #fff;}';
}
if ( $params['hide_nav_on_mobile'] == 'false' ) {
echo ' @media only screen and (max-width : 480px) {.markup-'.$selector.' .bx-controls, .markup-'.$selector.' .bx-controls-direction a { display: block !important;}}';
}
echo apply_filters( 'icp_styles_filter', true );
?>
</style>
<?php
$gallery_style = ob_get_clean();
$size_class = sanitize_html_class( $size );
$gallery_div = "<div id='icppreloader-$selector' class='icpsliderpreloader'></div><div class='markup-".$selector."'><div style='display:none;' id='$selector' class='".$the_class." galleryid-{$id} gallery-size-{$size_class}'>";
$output = apply_filters( 'gallery_style', $gallery_style."\n\t\t".$gallery_div );
$i = 0;
foreach ( $attachments as $id => $attachment ) {
$image_output = icp_wp_get_attachment_link( $id, $size, true, false, false );
$output .= "<div class='carousel-item'>{$image_output}</div>";
}
$output .= "
</div></div>\n";
return apply_filters( 'icp_carousel_custom_markup', $output, $attachments, $gallery_style, $gallery_div, $size );
}
Code file location:
image-carousel/image-carousel/inc/functions/icp-functions.phpConclusion
Now that you’ve learned how to embed the Image Carousel 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