Below, you’ll find a detailed guide on how to add the Image Hover Effects – WordPress 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 Hover Effects – WordPress Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Image Hover Effects – WordPress Plugin and the shortcodes it provides:
"Image Hover Effects is a WordPress plugin designed to enhance your site's visuals. It provides dynamic hover effects for images, adding an interactive touch to your web pages."
- [image-caption-hover]
Image Hover Effects [image-caption-hover] Shortcode
The Image Caption Hover shortcode is a dynamic tool for displaying image captions on hover. It fetches stored captions and displays them in a grid layout. The shortcode allows customization of image effects, style, and direction. It also provides options for adding a link to the image, customizing the caption’s header and description, and altering their color. In essence, this shortcode enhances the visual appeal and interactivity of image captions on your WordPress site.
Shortcode: [image-caption-hover]
Parameters
Here is a list of all possible image-caption-hover shortcode parameters and attributes:
id– specifies the unique identifier of the image hover effect.
Examples and Usage
Basic example – Display an image hover effect by referencing the ID.
[image-caption-hover id=1 /]Advanced examples
Display multiple image hover effects by referencing their IDs. The plugin will first try to load the images by their IDs.
[image-caption-hover id=1,2,3 /]Using the shortcode to display an image hover effect by referencing both ID and title. The plugin will first try to load by ID, but if not found, it will try to load by title.
[image-caption-hover id=1 title="My Hover Effect" /]PHP Function Code
In case you have difficulties debugging what causing issues with [image-caption-hover] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'image-caption-hover', array($this,'render_caption_hovers') );Shortcode PHP function:
function render_caption_hovers($atts){
$saved_captions = get_option( 'la_caption_hover' );
if (isset($saved_captions['posts'])) {
$total_cols = 0;
ob_start(); ?>
<div class="image-hover-page-container animatedParent">
<div class="row">
<?php foreach($saved_captions['posts'] as $key => $data): ?>
<?php foreach($data['allcapImages'] as $key => $data2): ?>
<?php if ($atts['id']== $data2['shortcode']): ?>
<?php
wp_enqueue_style( 'wdo-ihe-hover-css', plugins_url( 'css/image-hover.min.css',__FILE__ ));
wp_enqueue_script( 'wdo-hover-front-js', plugins_url( 'js/front.js', __FILE__ ), array('jquery'));
$total_cols+= $data2['cap_grid'];
?>
<div class="col-lg-<?php echo esc_html($data2['cap_grid']); ?> col-sm-6">
<!-- normal -->
<div class="ih-item <?php echo esc_html($data2['cap_style']); ?> <?php echo esc_html($data2['cap_effect']); ?> <?php if ($data2['cap_effect']=='effect6' && $data2['cap_style']=='circle') {
echo "scale_up";
} elseif($data2['cap_effect']=='effect8' && $data2['cap_style']=='square') {
echo "scale_up";
}elseif($data2['cap_effect']=='effect1' && $data2['cap_style']=='square' && $data2['cap_direction']=='left_to_right'){
echo "left_and_right";
}else{
echo esc_html($data2['cap_direction']);
}
?>">
<a class="taphover" href="<?php echo ( $data2['cap_link'] != '' ) ? esc_html($data2['cap_link']) : 'javascript:void(0)'; ?>">
<?php if($data2['cap_effect']=='effect1'&& $data2['cap_style']=='circle') {
echo "<div class='spinner'></div>";
} ?>
<div class="img"><img style="height:100%;" src="<?php if ($data2['cap_img']!='') {
echo $data2['cap_img'];
} else {
echo "http://www.gemologyproject.com/wiki/images/5/5f/Placeholder.jpg";
}
?>" alt="img">
<?php if($data2['cap_effect']=='effect4' && $data2['cap_style']=='square')
echo "<div class='mask1'></div><div class='mask2'></div>";
?>
</div>
<?php if ($data2['cap_effect']=='effect8') { ?>
<div class="info-container">
<div class="info">
<h3 style="color:<?php echo $data2['cap_headcolor']; ?>;<?php echo ( $data2['cap_head'] == '' ) ? 'opacity:0;' : '' ; ?>"><?php if ($data2['cap_head'] !='') {
echo stripcslashes(esc_html($data2['cap_head']));
} else {
echo "";
}
?></h3>
<p style="color:<?php echo $data2['cap_desccolor']; ?>"><?php if ($data2['cap_desc'] != '') {
echo esc_html($data2['cap_desc']);
} else {
echo "";
}
?></p>
</div>
</div>
<?php } elseif($data2['cap_effect']=='effect1' || $data2['cap_effect']=='effect5' || $data2['cap_effect']=='effect13' || $data2['cap_effect']=='effect18' || $data2['cap_effect']=='effect20' || $data2['cap_effect']=='effect9') { ?>
<div class="info" style="height:inherit;">
<div class="info-back">
<h3 style="color:<?php echo $data2['cap_headcolor']; ?>;<?php echo ( $data2['cap_head'] == '' ) ? 'opacity: 0;' : '' ; ?>"><?php if ($data2['cap_head'] !='') {
echo stripcslashes(esc_html($data2['cap_head']));
} else {
echo "";
}
?></h3>
<p style="color:<?php echo $data2['cap_desccolor']; ?>"><?php if ($data2['cap_desc'] != '') {
echo esc_html($data2['cap_desc']);
} else {
echo "";
}
?></p>
</div>
</div>
<?php } else{ ?>
<div class="info">
<h3 style="color:<?php echo $data2['cap_headcolor']; ?>;<?php echo ( $data2['cap_head'] == '' ) ? 'opacity: 0;' : '' ; ?>" >
<?php if ($data2['cap_head'] !='') {
echo stripcslashes(esc_html($data2['cap_head']));
} else {
echo "";
}
?></h3>
<p style="color:<?php echo $data2['cap_desccolor']; ?>"><?php if ($data2['cap_desc'] != '') {
echo esc_html($data2['cap_desc']);
} else {
echo "";
}
?></p>
</div>
<?php }
?>
</a>
</div>
<!-- end normal -->
</div>
<?php endif ?>
<?php if ($total_cols == 12): ?>
</div><div class="row">
<?php endif ?>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
<!-- Row End -->
</div>
<!-- Container Rnd -->
<?php
}
return ob_get_clean();
}
Code file location:
image-hover-effects/image-hover-effects/plugin.class.phpConclusion
Now that you’ve learned how to embed the Image Hover Effects – WordPress 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