Below, you’ll find a detailed guide on how to add the Parallax Image 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 Parallax Image Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Parallax Image Plugin and the shortcodes it provides:
"Parallax Image is a dynamic WordPress plugin designed to add depth and motion to your website. It transforms static images into interactive parallax backgrounds, enhancing user engagement."
- [dd-parallax]
Parallax Image [dd-parallax] Shortcode
The ‘dd-parallax’ shortcode allows you to create a parallax effect on images. It accepts parameters for image source, parallax speed, image height, z-index, mobile image source, image position, offset, and text position. The PHP function ‘duck_parallax_shortcode’ processes these parameters, enqueues necessary scripts and styles, and handles mobile detection. It also provides a fallback for mobile devices, where it uses a separate image if specified. The function then generates the HTML structure for the parallax effect, inserting the user’s content where specified. The output is a visually appealing parallax section, enhancing the user experience on your WordPress site.
Shortcode: [dd-parallax]
Parameters
Here is a list of all possible dd-parallax shortcode parameters and attributes:
img– the main image URL or filename for the parallax effectspeed– speed of the parallax effect, default is 2height– height of the parallax section in pixelsz-index– sets the stack order of the parallax sectionmobile– alternative image URL or filename for mobile devicesposition– horizontal position of the parallax image, default is leftoffset– enables or disables parallax offset, default is falsetext-pos– position of the text over the parallax image, default is top
Examples and Usage
Basic example – Displays a parallax image with default settings.
[dd-parallax img='your_image_url_here']Your content here[/dd-parallax]Advanced examples
Display a parallax image with customized speed and height. The speed is set to 3 and the minimum height is set to 500px.
[dd-parallax img='your_image_url_here' speed='3' height='500']Your content here[/dd-parallax]Display a parallax image with a different image for mobile devices. The mobile image URL is specified separately.
[dd-parallax img='your_desktop_image_url_here' mobile='your_mobile_image_url_here']Your content here[/dd-parallax]Display a parallax image with customized text position. The text position is set to ‘bottom’.
[dd-parallax img='your_image_url_here' text-pos='bottom']Your content here[/dd-parallax]Display a parallax image with offset set to true. This will enqueue the ‘duck-px-offset’ script.
[dd-parallax img='your_image_url_here' offset='true']Your content here[/dd-parallax]PHP Function Code
In case you have difficulties debugging what causing issues with [dd-parallax] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('dd-parallax', 'duck_parallax_shortcode');Shortcode PHP function:
function duck_parallax_shortcode($atts, $content = null){
$atts = shortcode_atts(
array(
'img' => '',
'speed' => '2',
'height' => '',
'z-index' => '0',
'mobile' => '',
'position' => 'left',
'offset' => false,
'text-pos' => 'top',
), $atts, 'duck-parallax' );
/* Enqueue only for shortcode */
wp_enqueue_script('duck-parallax');
wp_enqueue_style('duck-parallax');
if ( ( null !== $atts['offset'] ) && ( $atts['offset'] == 'true' ) ) {
wp_enqueue_script('duck-px-offset');
}
if ( !$atts['img']) {return;}
// Detect Mobile
$detect = new Mobile_Detect;
// If Mobile Image isn't set
if ($atts['mobile'] !== ""){
$mobile_img = $atts['mobile'];
}
else {
$mobile_img = $atts['img'];
}
$args = array(
'post_type' => 'attachment',
'post_mime_type' =>'image',
'post_status' => 'inherit',
'posts_per_page' => -1,
);
$query_images = new WP_Query( $args );
if (strpos($atts['img'], 'http') === 0){
$image_url = esc_url($atts['img']);
}
else {
if ( $query_images->have_posts() ) {
foreach ( $query_images->posts as $item) {
$filename = wp_basename($item->guid);
if($atts['img'] == $filename) {$image_url = $item->guid;}
}
}
}
if ($atts['speed'] < 10) {
$speed = '.'.$atts['speed'];
}
else {
$speed = 1;
}
$zindex = $atts['z-index'];
wp_reset_postdata();
if ( $detect->isMobile() ) {
if (strpos($mobile_img, 'http') === 0){
$image_path = esc_url($mobile_img);
}
else {
if ($query_images->have_posts() ) {
foreach ($query_images->posts as $item) {
$filename = wp_basename($item->guid);
if($mobile_img == $filename) {
$mobile_img = $item->guid;
$image_path = get_attached_file($item->ID);
}
}
}
}
list($width, $height) = getimagesize($image_path);
$factor = $height / $width;
$divID = preg_replace('/\\.[^.\\s]{3,4}$/', '', $atts['img']);
$textPos = strtolower($atts['text-pos']);
switch($textPos){
case 'top':
$align = "top: 0;";
break;
case 'bottom':
$align = "bottom: 0;";
break;
default:
$align = "top: 50%;transform:translate(0,-50%)";
break;
}
$output ='<div class="px-mobile-container" id="#'.$divID.'" data-factor="'.$factor.'" data-height="'.$height.'"><div class="parallax-mobile">';
$output .='<img src="'. $mobile_img .'" class="px-mobile-img" />';
$output .= '<div class="parallax-content" style="'.$align.'">';
$output .= do_shortcode($content);
$output .= '</div>';
$output .='</div></div>';
}
else{
$textPos = strtolower($atts['text-pos']);
switch($textPos){
case 'top':
$align = "flex-start;";
break;
case 'bottom':
$align = "flex-end;";
break;
default:
$align = "center";
break;
}
$output = '<section class="parallax-section">';
$output .= '<div class="parallax-window" data-z-index="'.$zindex.'" data-position-x="'.$atts['position'].'" data-parallax="scroll" data-speed="'.$speed.'" data-image-src="'.$image_url.'"';
$output .= ' style="align-items: ' . $align .';';
if ($atts['height'] !== '') $output .= 'min-height: '.$atts['height'].'px;';
$output .='">';
$output .= '<div class="parallax-container parallax-content">';
$output .= do_shortcode($content);
$output .= '</div></div></section>';
}
return $output;
}
Code file location:
parallax-image/parallax-image/assets/shortcode.phpConclusion
Now that you’ve learned how to embed the Parallax Image 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