Elep

<?php
// [ux_banner]
function flatsome_ux_banner( $atts, $content = null ){

extract( $atts = shortcode_atts( array(
		'_id'                => 'banner-' . rand(),
		'visibility'         => '',
		// Layout.
		'hover'              => '',
		'hover_alt'          => '',
		'alt'                => '',
		'class'              => '',
		'sticky'             => '',
		'height'             => '',
		'height__sm'         => '',
		'height__md'         => '',
		'container_width'    => '',
		'mob_height'         => '', // Deprecated.
		'tablet_height'      => '', // Deprecated.
		// Background.
		'bg'                 => '',
		'parallax'           => '',
		'parallax_style'     => '',
		'slide_effect'       => '',
		'bg_size'            => 'large',
		'bg_color'           => '',
		'bg_overlay'         => '',
		'bg_overlay__sm'     => '',
		'bg_overlay__md'     => '',
		'bg_pos'             => '',
		'effect'             => '',
		// Shape divider.
		'divider_top'            => '',
		'divider_top_height'     => '150px',
		'divider_top_height__sm' => null,
		'divider_top_height__md' => null,
		'divider_top_width'      => '100',
		'divider_top_width__sm'  => null,
		'divider_top_width__md'  => null,
		'divider_top_fill'       => '',
		'divider_top_flip'       => 'false',
		'divider_top_to_front'   => 'false',
		'divider'                => '',
		'divider_height'         => '150px',
		'divider_height__sm'     => null,
		'divider_height__md'     => null,
		'divider_width'          => '100',
		'divider_width__sm'      => null,
		'divider_width__md'      => null,
		'divider_fill'           => '',
		'divider_flip'           => 'false',
		'divider_to_front'       => 'false',
		// Video.
		'video_mp4'          => '',
		'video_ogg'          => '',
		'video_webm'         => '',
		'video_sound'        => 'false',
		'video_loop'         => 'true',
		'youtube'            => '',
		'video_visibility'   => 'hide-for-medium',
		// Border Control.
		'border'             => '',
		'border_color'       => '',
		'border_margin'      => '',
		'border_radius'      => '',
		'border_style'       => '',
		'border_hover'       => '',
		// Deprecated (This is added to Text Box shortcode).
		'animation'          => 'fadeIn',
		'animate'            => '',
		'loading'            => '',
		'animated'           => '',
		'animation_duration' => '',
		'text_width'         => '60%',
		'text_align'         => 'center',
		'text_color'         => 'light',
		'text_pos'           => 'center',
		'parallax_text'      => '',
		'text_bg'            => '',
		'padding'            => '',
		// Link.
		'link'               => '',
		'target'             => '',
		'rel'                => '',
	), $atts ) );

// Stop if visibility is hidden.
   if($visibility == 'hidden') return;

ob_start();

$classes   = array( 'has-hover' );
	$link_atts = array(
		'target' => $target,
		'rel'    => array( $rel ),
	);

// Custom Class.
   if($class) $classes[] = $class;

if($animate) {$animation = $animate;}
   if($animated) {$animation = $animated;}

/* Hover Class */
   if($hover) $classes[] = 'bg-'.$hover;
   if($hover_alt) $classes[] = 'bg-'.$hover_alt;

/* Has video */
   if($video_mp4 || $video_webm || $video_ogg) { $classes[] = 'has-video'; }

/* Sticky */
   if($sticky) $classes[] = 'sticky-section';

/* Banner Effects */
   if($effect) wp_enqueue_style( 'flatsome-effects');

/* Old bg fallback */
    $atts['bg_color'] = $bg_color;
    if(strpos($bg,'#') !== false){
      $atts['bg_color'] = $bg;
      $bg = false;
    }

/* Mute if video_sound is 0 (should stay to support old versions have checkbox option for video sound) */
    if ( $video_sound == '0' ) $video_sound = 'false';

if($bg_overlay && strpos($bg_overlay,'#') !== false){
      $atts['bg_overlay'] = flatsome_hex2rgba($bg_overlay,'0.15');
    }

/* Full height banner */
   if(strpos($height, '100%') !== false) {
     $classes[] = 'is-full-height';
   }

/* Slide Effects */
   if($slide_effect) $classes[] = 'has-slide-effect slide-'.$slide_effect;

/* Visibility */
   if($visibility) $classes[] = $visibility;

/* Links */
   $start_link = "";
   $end_link = "";

if($link) {$start_link = '<a class="fill" href="'.$link.'"' . flatsome_parse_target_rel( $link_atts ) . '>'; $end_link = '</a>';};

/* Parallax  */
   if($parallax){
      $classes[] = 'has-parallax';
      $parallax = 'data-parallax="-'.$parallax.'" data-parallax-container=".banner" data-parallax-background';
   }

/* Lazy load */
   $lazy_load = get_theme_mod('lazy_load_backgrounds', 1) ? '' : 'bg-loaded';

$classes = implode(" ", $classes);

<?php
       // Add invisible image if height is not set.
      if(!$height) { ?>
        <div class="height-fix is-invisible"><?php if($bg) echo flatsome_get_image($bg, $bg_size, $alt, true); ?></div>
      <?php } ?>
      <?php
        // Get custom CSS
        $args = array(
          'height' => array(
            'selector' => '',
            'property' => 'padding-top',
          ),
          'bg' => array(
            'selector' => '.bg.bg-loaded',
            'property' => 'background-image',
            'size' => $bg_size
          ),
          'bg_overlay' => array(
            'selector' => '.overlay',
            'property' => 'background-color',
          ),
          'bg_color' => array(
            'selector' => '',
            'property' => 'background-color',
          ),
          'bg_pos' => array(
            'selector' => '.bg',
            'property' => 'background-position',
          ),
        );

if ( $divider_top ) {
		  $args = array_merge( $args, array(
			  'divider_top_height' => array(
				  'selector' => '.ux-shape-divider--top svg',
				  'property' => 'height',
			  ),
			  'divider_top_width'  => array(
				  'selector' => '.ux-shape-divider--top svg',
				  'property' => '--divider-top-width',
				  'unit'     => '%',
			  ),
			  'divider_top_fill'   => array(
				  'selector' => '.ux-shape-divider--top .ux-shape-fill',
				  'property' => 'fill',
			  ),
		  ) );
	  }

if ( $divider ) {
		  $args = array_merge( $args, array(
			  'divider_height' => array(
				  'selector' => '.ux-shape-divider--bottom svg',
				  'property' => 'height',
			  ),
			  'divider_width'  => array(
				  'selector' => '.ux-shape-divider--bottom svg',
				  'property' => '--divider-width',
				  'unit'     => '%',
			  ),
			  'divider_fill'   => array(
				  'selector' => '.ux-shape-divider--bottom .ux-shape-fill',
				  'property' => 'fill',
			  ),
		  ) );
	  }
        echo ux_builder_element_style_tag($_id, $args, $atts);
      ?>
  </div>

<?php
  $content = ob_get_contents();
  ob_end_clean();
  return $content;
}
add_shortcode('ux_banner', 'flatsome_ux_banner');