Custom Avia Shortcode Editor Element Bug

Hello,

I am creating some custom shortcodes for the enfold theme. I mostly have them working, but I am not an expert with php, so most of my work has been trial and error / copy and paste from other shortcodes.

For this shortcode, I am basically taking the image shortcode and adding a title to it. Everything displays fine on the front end, but there is a weird bug I can’t quite figure out. Let me explain:

When I first click edit page, I see the element as I intend in the Advanced Layout Builder. Once I click to edit the element and click save, the layout changes. I lose the title, and two images appear stacked on top of each other.

Before on the left, after on the right:

I am guessing it is something to do with the code in the Editor Element Section, here is my code from that section:

function editor_element($params)
			{
				$template = $this->update_template("src", "<img src='{{src}}' alt=''/>");
				$img	  = "";

				if(isset($params['args']['src']) && is_numeric($params['args']['src']))
				{
					$img = wp_get_attachment_image($params['args']['src'],'large');
				}
				else if(!empty($params['args']['src']))
				{
					$img = "<img src='".$params['args']['src']."' alt=''  />";
				}

				$params['content'] = NULL;
				$params['innerHtml']  = "<div class='avia_photo_nav_square avia_photo_nav_square_style avia_hidden_bg_box'>";
				$params['innerHtml'] .= "<div ".$this->class_by_arguments('align' ,$params['args']).">";
				$params['innerHtml'] .= "		<span {$template} >".$params['args']['title'].": </span>";
				$params['innerHtml'] .= "<div class='avia_photo_nav_square_container' {$template}>{$img}</div>";
				$params['innerHtml'] .= "</div>";
				$params['innerHtml'] .= "</div>";
				$params['class'] = "";

				return $params;
			}

Thanks for any help you can provide!

D