Register Shortcode with Shortcode UI

register-shortcode-with-ui.php

<?php
/**
 * function wpmark_register_before_after_shortcake()
 */
function wpmark_register_before_after_shortcake() {
	
	shortcode_ui_register_for_shortcode(
		
		'before_after_image', // name of shortcode ui
		
        array(
            'label' => 'Before After Image',
            'listItemImage' => 'dashicons-format-image',
            'attrs' => array(
	            array(
		            'label'			=> 'Title',
		            'attr'			=> 'title',
		            'type'			=> 'text',
		            'description'	=> 'Enter a title for this before/after image',
	            ),
                array(
                    'label' 		=> 'Before Image',
                    'attr'  		=> 'before_image',
                    'type'  		=> 'attachment',
                    'description'	=> 'Choose/Upload an image for the before image. This should be at least 634px wide and the same size as the after image.',
                ),
                 array(
                    'label' 		=> 'After Image',
                    'attr'  		=> 'after_image',
                    'type'  		=> 'attachment',
                    'description'	=> 'Choose/Upload an image for the after image. This should be at least 634px wide and the same size as the before image.',
                ),
                array(
		            'label'			=> 'Description',
		            'attr'			=> 'description',
		            'type'			=> 'textarea',
		            'description'	=> 'Enter a description for this before/after image',
	            ),
            ),
        )	
	);
	
}

add_action( 'init', 'wpmark_register_before_after_shortcake' );