Below, you’ll find a detailed guide on how to add the Twenty20 Image Before-After 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 Twenty20 Image Before-After Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Twenty20 Image Before-After Plugin and the shortcodes it provides:
"Twenty20 Image Before-After is a unique WordPress plugin that allows you to showcase the comparison between two images in a creative way. With Twenty20, visually demonstrating changes is a breeze."
- [twenty20]
Twenty20 Image Before-After [twenty20] Shortcode
The Twenty20 shortcode is designed to create a responsive before-and-after picture effect on WordPress. It uses two images and overlays them, allowing users to compare the before and after by sliding over the image.
Shortcode: [twenty20]
Parameters
Here is a list of all possible twenty20 shortcode parameters and attributes:
img1– The first image to be compared in the Twenty20 plugin.img2– The second image for comparison in the Twenty20 plugin.offset– The starting position of the slider, default is 0.5 (middle).direction– Sets the orientation of the slider, either horizontal or vertical.width– Determines the width of the Twenty20 container, default is 100%.align– Sets the alignment (left or right) of the Twenty20 container.before– Label for the ‘before’ image in the slider.after– Label for the ‘after’ image in the slider.hover– If set to true, the slider moves on hover, default is false.
Examples and Usage
Basic example – A simple usage of the twenty20 shortcode to compare two images. The images are referenced by their attachment ID in the WordPress media library.
[twenty20 img1=10 img2=20 /]Advanced examples
Using the shortcode to compare two images, with a vertical comparison direction, an offset of 0.6, and a hover effect enabled. The images are referenced by their attachment ID in the WordPress media library.
[twenty20 img1=10 img2=20 direction="vertical" offset="0.6" hover="true" /]Using the shortcode to compare two images, with a horizontal comparison direction, alignment to the right, a specific width, and custom before and after labels. The images are referenced by their attachment ID in the WordPress media library.
[twenty20 img1=10 img2=20 direction="horizontal" align="right" width="60%" before="Before" after="After" /]These examples illustrate the flexibility that the twenty20 shortcode provides in creating engaging, interactive image comparisons in WordPress.
PHP Function Code
In case you have difficulties debugging what causing issues with [twenty20] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'twenty20', 'twenty20_shortcode_init' );Shortcode PHP function:
function twenty20_shortcode_init( $atts) {
extract( shortcode_atts(
array(
'img1' => '',
'img2' => '',
'offset' => '0.5',
'direction' => 'horizontal',
'width' => '',
'align' => '',
'before' => '',
'after' => '',
'hover' => false
), $atts )
);
static $i = 1;
$t20ID = "twenty20-" . $i;
$isVertical = "";
$data_vertical = "";
$isLeft = "";
$isRight = "";
if ($align == "right"){
$isRight = " float: right; margin-left: 20px;";
if (empty($width)){ $width = "width: 50%;"; }
}
if ($align == "left"){
$isLeft = " float: left; margin-right: 20px;";
if (empty($width)){ $width = "width: 50%;"; }
}
if( is_numeric( $width ) ){
if (empty($width)){
$width = "width: 100% !important; clear: both;";
}else{
$width = "width: " . $width . '%;';
}
}else{
$width = "width: 100% !important; clear: both;";
}
if($direction == "vertical"){
$isVertical = ' data-orientation="vertical"';
$data_vertical = ", orientation: 'vertical'";
}
if( $hover === "true"){
$isHover = ',move_slider_on_hover: true';
$yesHover = "t20-hover";
}else{
$isHover = '';
$yesHover = '';
}
if(!empty($img1) && !empty($img2)){
$img1_alt = get_post_meta( $img1, '_wp_attachment_image_alt', true);
$img2_alt = get_post_meta( $img2, '_wp_attachment_image_alt', true);
if($img1_alt){
$img1_alt = ' alt="' . esc_attr( $img1_alt ) . '" title="'. esc_attr( $img1_alt ) .'"';
}else{
$img1_alt = '';
}
if($img2_alt){
$img2_alt = ' alt="' . esc_attr( $img2_alt ) . '" title="'.esc_attr( $img2_alt ).'"';
}else{
$img2_alt = '';
}
$output = '<div id="'.esc_attr($t20ID).'" class="twenty20" style="'. esc_attr($width . $isLeft . $isRight) . '">';
$output .= '<div class="twentytwenty-container '. esc_attr( $t20ID . ' ' . $yesHover ) .'"' . esc_attr( $isVertical ) . '>';
$output .= '<img class="skip-lazy" src="'. wp_get_attachment_url( $img1 ) .'"'.$img1_alt.' />';
$output .= '<img class="skip-lazy" src="'. wp_get_attachment_url( $img2 ) .'"'.$img2_alt.' />';
$output .= '</div>';
$output .= '<script>jQuery( document ).ready(function( $ ) {';
if($direction == "vertical"){
$output .= '$(".twentytwenty-container.'.esc_js($t20ID).'[data-orientation=\'vertical\']").twentytwenty({default_offset_pct: ' . sanitize_xss_offset(esc_js($offset . $data_vertical . $isHover)) . '});';
}else{
$output .= '$(".twentytwenty-container.'.esc_js($t20ID).'[data-orientation!=\'vertical\']").twentytwenty({default_offset_pct: '. sanitize_xss_offset(esc_js($offset . $isHover)) .'});';
}
if($before){
$output .= '$(".' . sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-before-label").html("'. sanitize_xss_offset(esc_js($before)) .'");';
}else{
$output .= '$(".' . sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-overlay").hide();';
}
if($after){
$output .= '$(".' . sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-after-label").html("'. sanitize_xss_offset(esc_js($after)) .'");';
}else{
$output .= '$(".' . sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-overlay").hide();';
}
$output .= '});</script></div>';
}else{
$output = '<div class="twenty20" style="color: red;">Twenty20 need two images.</div>';
}
$i++;
return $output;
}
Code file location:
twenty20/twenty20/inc/twenty20-shortcode.phpConclusion
Now that you’ve learned how to embed the Twenty20 Image Before-After 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