Before and After Image Shortcode

before-after-shortcode.php

<?php
/**
 * function wpmark_add_before_after_shortcode()
 * adds the shortcode to output the before and after image
 */
function wpmark_add_before_after_shortcode( $attr ) {
	
	$attr = wp_parse_args(
		$attr,
		array(
        	'before_image'	=> '',
			'after_image'	=> ''
		)
	);
	
	/* get the attachment urls for the before and after images */
	$before_image = wp_get_attachment_image_src( $attr[ 'before_image' ], 'cta' );
	$before_image = $before_image[0];
	
	$after_image = wp_get_attachment_image_src( $attr[ 'after_image' ], 'cta' );
	$after_image = $after_image[0];
	
	/* check we have before and after image urls */
	if( empty( $before_image ) && empty( $after_image ) ) {
		return false;
	} 
	
	ob_start();
	
	?>
	
	<div class="before-after" id="before-after-<?php echo esc_attr( $attr[ 'before_image' ] ); ?>">
		
		<?php
			
			/* check if we have a title to output */
			if( ! empty( $attr[ 'title' ] )	) {
				
				/* output the title */
				echo apply_filters( 'wpmark_before_after_title', '<h3 class="before-after-title">' . esc_html( $attr[ 'title' ] ) . '</h3>' );
				
			}
			
		?>
		
		<div class="before-image">
			<img src="<?php echo esc_url( $before_image ); ?>" alt="Before Image" />
		</div>
		
		<div class="after-image">
			<img src="<?php echo esc_url( $after_image ); ?>" alt="After Image" />
		</div>
		
		<a href="javascript:void(0);" class="before-after-toggle">Toggle Before/After</a>
		
		<?php
			
			/* check we have a description for this before after */
			if( ! empty( $attr[ 'description' ] ) ) {
				
				/* output the description */
				echo apply_filters(
					'wpmark_before_after_description',
					'<div class="description">' . wpautop( $attr[ 'description' ] ) . '</div>'
				);
				
			}	
			
		?>
		
	</div><!-- // before-after -->
	
    <?php
	
	return ob_get_clean();
	
}

add_shortcode( 'before_after_image', 'wpmark_add_before_after_shortcode' );
?>