Changing up HTML structure for Image Widget

Hi,

I am using some JS and for some functionality to work the structure needs to be:

<a href="#"><img src="#">
      <div>
        <h3>Widget Title<br>
          <small>Widget Caption</small></h3>
      </div>
      </a>

What I have done with setting up the sidebar area in functions.php is this:

function twentyfourteen_widgets_init() {
	require get_template_directory() . '/inc/widgets.php';
	register_widget( 'Twenty_Fourteen_Ephemera_Widget' );
	$photography =  "['phoography']";

	register_sidebar( array(
		'name'          => __( 'Primary Sidebar', 'twentyfourteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Main sidebar that appears on the left.', 'twentyfourteen' ),
		'before_widget' => '<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" data-groups="'.$photography . '">',
		'after_widget'  => '</div>',
		'before_title'  => '<div><h3 class="widget-title">',
		'after_title'   => '</br><small>Needed Widget Caption Location - Currently Hard Coded</small></h3></div>',
	) );

Everything is working alright except for I need to put the <a> around everything, not just the image. I also need to somehow bring in the caption to the <small> tag above. I was thinking of a variable but don’t really know how I would do this.

Current source code being produced:

<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
		<div class="col-xs-6 col-sm-4 col-md-3 gallery-item" data-groups="['phoography']"><div><h3 class="widget-title">This is the title</br><small>Needed Widget Caption Location - Currently Hard Coded</small></h3></div><a href="http://www.google.com" target="_self" class="widget_sp_image-image-link" title="This is the title"><img width="150" height="150" alt="This is the title" class="attachment-thumbnail" style="max-width: 100%;" src="http://cahoots-clients.com/cahoots-new/wp-content/uploads/2014/09/photo-5-150x150.jpeg" /></a><div class="widget_sp_image-description" ><p>This is the caption location now</p>
</div></div>	</div><!-- #primary-sidebar -->
	</div><!-- #secondary -->

I could always just use a text editor to create this structure but I want it to be fool-proof for end users.

I am using Twenty Fourteen theme just to test out functionality but will be using something else later.

Website address: http://cahoots-clients.com/cahoots-new/
It’s on the sidebar

Any ideas? Thanks

https://ww.wp.xz.cn/plugins/image-widget/