function ot_type_background($args = array())
 {
     /* turns arguments array into variables */
     extract($args);
     /* verify a description */
     $has_desc = $field_desc ? true : false;
     /* If an attachment ID is stored here fetch its URL and replace the value */
     if (isset($field_value['background-image']) && wp_attachment_is_image($field_value['background-image'])) {
         $attachment_data = wp_get_attachment_image_src($field_value['background-image'], 'original');
         /* check for attachment data */
         if ($attachment_data) {
             $field_src = $attachment_data[0];
         }
     }
     /* format setting outer wrapper */
     echo '<div class="format-setting type-background ' . ($has_desc ? 'has-desc' : 'no-desc') . '">';
     /* description */
     echo $has_desc ? '<div class="description">' . htmlspecialchars_decode($field_desc) . '</div>' : '';
     /* format setting inner wrapper */
     echo '<div class="format-setting-inner">';
     /* allow fields to be filtered */
     $ot_recognized_background_fields = apply_filters('ot_recognized_background_fields', array('background-color', 'background-repeat', 'background-attachment', 'background-position', 'background-size', 'background-image'), $field_id);
     echo '<div class="ot-background-group">';
     /* build background color */
     if (in_array('background-color', $ot_recognized_background_fields)) {
         echo '<div class="option-tree-ui-colorpicker-input-wrap">';
         /* colorpicker JS */
         echo '<script>jQuery(document).ready(function($) { OT_UI.bind_colorpicker("' . esc_attr($field_id) . '-picker"); });</script>';
         /* set background color */
         $background_color = isset($field_value['background-color']) ? esc_attr($field_value['background-color']) : '';
         /* input */
         echo '<input type="text" name="' . esc_attr($field_name) . '[background-color]" id="' . $field_id . '-picker" value="' . $background_color . '" class="hide-color-picker ' . esc_attr($field_class) . '" />';
         echo '</div>';
     }
     /* build background repeat */
     if (in_array('background-repeat', $ot_recognized_background_fields)) {
         $background_repeat = isset($field_value['background-repeat']) ? esc_attr($field_value['background-repeat']) : '';
         echo '<select name="' . esc_attr($field_name) . '[background-repeat]" id="' . esc_attr($field_id) . '-repeat" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
         echo '<option value="">' . __('background-repeat', 'option-tree') . '</option>';
         foreach (ot_recognized_background_repeat($field_id) as $key => $value) {
             echo '<option value="' . esc_attr($key) . '" ' . selected($background_repeat, $key, false) . '>' . esc_attr($value) . '</option>';
         }
         echo '</select>';
     }
     /* build background attachment */
     if (in_array('background-attachment', $ot_recognized_background_fields)) {
         $background_attachment = isset($field_value['background-attachment']) ? esc_attr($field_value['background-attachment']) : '';
         echo '<select name="' . esc_attr($field_name) . '[background-attachment]" id="' . esc_attr($field_id) . '-attachment" class="option-tree-ui-select ' . $field_class . '">';
         echo '<option value="">' . __('background-attachment', 'option-tree') . '</option>';
         foreach (ot_recognized_background_attachment($field_id) as $key => $value) {
             echo '<option value="' . esc_attr($key) . '" ' . selected($background_attachment, $key, false) . '>' . esc_attr($value) . '</option>';
         }
         echo '</select>';
     }
     /* build background position */
     if (in_array('background-position', $ot_recognized_background_fields)) {
         $background_position = isset($field_value['background-position']) ? esc_attr($field_value['background-position']) : '';
         echo '<select name="' . esc_attr($field_name) . '[background-position]" id="' . esc_attr($field_id) . '-position" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
         echo '<option value="">' . __('background-position', 'option-tree') . '</option>';
         foreach (ot_recognized_background_position($field_id) as $key => $value) {
             echo '<option value="' . esc_attr($key) . '" ' . selected($background_position, $key, false) . '>' . esc_attr($value) . '</option>';
         }
         echo '</select>';
     }
     /* Build background size  */
     if (in_array('background-size', $ot_recognized_background_fields)) {
         /**
         * Use this filter to create a select instead of an text input.
         * Be sure to return the array in the correct format. Add an empty 
         * value to the first choice so the user can leave it blank.
         *
            array( 
              array(
                'label' => 'background-size',
                'value' => ''
              ),
              array(
                'label' => 'cover',
                'value' => 'cover'
              ),
              array(
                'label' => 'contain',
                'value' => 'contain'
              )
            )
         *
         */
         $choices = apply_filters('ot_type_background_size_choices', '', $field_id);
         if (is_array($choices) && !empty($choices)) {
             /* build select */
             echo '<select name="' . esc_attr($field_name) . '[background-size]" id="' . esc_attr($field_id) . '-size" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
             foreach ((array) $choices as $choice) {
                 if (isset($choice['value']) && isset($choice['label'])) {
                     echo '<option value="' . esc_attr($choice['value']) . '"' . selected(isset($field_value['background-size']) ? $field_value['background-size'] : '', $choice['value'], false) . '>' . esc_attr($choice['label']) . '</option>';
                 }
             }
             echo '</select>';
         } else {
             echo '<input type="text" name="' . esc_attr($field_name) . '[background-size]" id="' . esc_attr($field_id) . '-size" value="' . (isset($field_value['background-size']) ? esc_attr($field_value['background-size']) : '') . '" class="widefat ot-background-size-input option-tree-ui-input ' . esc_attr($field_class) . '" placeholder="' . __('background-size', 'option-tree') . '" />';
         }
     }
     echo '</div>';
     /* build background image */
     if (in_array('background-image', $ot_recognized_background_fields)) {
         echo '<div class="option-tree-ui-upload-parent">';
         /* input */
         echo '<input type="text" name="' . esc_attr($field_name) . '[background-image]" id="' . esc_attr($field_id) . '" value="' . (isset($field_value['background-image']) ? esc_attr($field_value['background-image']) : '') . '" class="widefat option-tree-ui-upload-input ' . esc_attr($field_class) . '" placeholder="' . __('background-image', 'option-tree') . '" />';
         /* add media button */
         echo '<a href="javascript:void(0);" class="ot_upload_media option-tree-ui-button button button-primary light" rel="' . $post_id . '" title="' . __('Add Media', 'option-tree') . '"><span class="icon ot-icon-plus-circle"></span>' . __('Add Media', 'option-tree') . '</a>';
         echo '</div>';
         /* media */
         if (isset($field_value['background-image']) && $field_value['background-image'] !== '') {
             /* replace image src */
             if (isset($field_src)) {
                 $field_value['background-image'] = $field_src;
             }
             echo '<div class="option-tree-ui-media-wrap" id="' . esc_attr($field_id) . '_media">';
             if (preg_match('/\\.(?:jpe?g|png|gif|ico)$/i', $field_value['background-image'])) {
                 echo '<div class="option-tree-ui-image-wrap"><img src="' . esc_url($field_value['background-image']) . '" alt="" /></div>';
             }
             echo '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button button button-secondary light" title="' . __('Remove Media', 'option-tree') . '"><span class="icon ot-icon-minus-circle"></span>' . __('Remove Media', 'option-tree') . '</a>';
             echo '</div>';
         }
     }
     echo '</div>';
     echo '</div>';
 }
 function ot_type_background($args = array())
 {
     /* turns arguments array into variables */
     extract($args);
     /* fallback if field was an upload field before */
     if (!is_array($field_value) && !empty($field_value)) {
         /* store image url first */
         $background = $field_value;
         $field_value = array('background-image' => $background, 'background-repeat' => 'no-repeat', 'background-attachment' => '', 'background-position' => '', 'background-size' => 'cover');
     }
     /* format setting outer wrapper */
     echo '<div class="format-setting type-background">';
     /* format setting inner wrapper */
     echo '<div class="format-setting-inner">';
     echo '<div class="select-group select-margin">';
     /* build background repeat */
     $background_repeat = isset($field_value['background-repeat']) ? esc_attr($field_value['background-repeat']) : '';
     echo '<select name="' . esc_attr($field_name) . '[background-repeat]" id="' . esc_attr($field_id) . '-repeat" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
     echo '<option value="">' . __('background-repeat', 'option-tree') . '</option>';
     foreach (ot_recognized_background_repeat($field_id) as $key => $value) {
         echo '<option value="' . esc_attr($key) . '" ' . selected($background_repeat, $key, false) . '>' . esc_attr($value) . '</option>';
     }
     echo '</select>';
     /* build background attachment */
     $background_attachment = isset($field_value['background-attachment']) ? esc_attr($field_value['background-attachment']) : '';
     echo '<select name="' . esc_attr($field_name) . '[background-attachment]" id="' . esc_attr($field_id) . '-attachment" class="option-tree-ui-select ' . $field_class . '">';
     echo '<option value="">' . __('background-attachment', 'option-tree') . '</option>';
     foreach (ot_recognized_background_attachment($field_id) as $key => $value) {
         echo '<option value="' . esc_attr($key) . '" ' . selected($background_attachment, $key, false) . '>' . esc_attr($value) . '</option>';
     }
     echo '</select>';
     echo '<div class="clear"></div>';
     /* build background position */
     $background_position = isset($field_value['background-position']) ? esc_attr($field_value['background-position']) : '';
     echo '<select name="' . esc_attr($field_name) . '[background-position]" id="' . esc_attr($field_id) . '-position" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
     echo '<option value="">' . __('background-position', 'option-tree') . '</option>';
     foreach (ot_recognized_background_position($field_id) as $key => $value) {
         echo '<option value="' . esc_attr($key) . '" ' . selected($background_position, $key, false) . '>' . esc_attr($value) . '</option>';
     }
     echo '</select>';
     /* build background size */
     $background_size = isset($field_value['background-size']) ? esc_attr($field_value['background-size']) : '';
     echo '<select name="' . esc_attr($field_name) . '[background-size]" id="' . esc_attr($field_id) . '-size" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
     echo '<option value="">' . __('background-size', 'option-tree') . '</option>';
     foreach (ot_recognized_background_size($field_id) as $key => $value) {
         echo '<option value="' . esc_attr($key) . '" ' . selected($background_size, $key, false) . '>' . esc_attr($value) . '</option>';
     }
     echo '</select>';
     echo '</div>';
     /* build background image */
     echo '<div class="option-tree-ui-upload-parent">';
     /* input */
     echo '<input type="text" name="' . esc_attr($field_name) . '[background-image]" id="' . esc_attr($field_id) . '" value="' . (isset($field_value['background-image']) ? esc_attr($field_value['background-image']) : '') . '" class="widefat option-tree-ui-upload-input ' . esc_attr($field_class) . '" />';
     /* add media button */
     echo '<a href="javascript:void(0);" class="ot_upload_media option-tree-ui-button blue light" rel="' . $post_id . '" title="' . __('Add Media', 'option-tree') . '"><span class="icon upload">' . __('Add Media', 'option-tree') . '</span></a>';
     echo '</div>';
     /* media */
     if (isset($field_value['background-image']) && $field_value['background-image'] !== '') {
         echo '<div class="option-tree-ui-media-wrap" id="' . esc_attr($field_id) . '_media">';
         if (preg_match('/\\.(?:jpe?g|png|gif|ico)$/i', $field_value['background-image'])) {
             echo '<div class="option-tree-ui-image-wrap"><img src="' . esc_url($field_value['background-image']) . '" alt="" /></div><div class="clear"></div>';
         }
         echo '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button red light" title="' . __('Remove Media', 'option-tree') . '"><span class="icon trash-can">' . __('Remove Media', 'option-tree') . '</span></a>';
         echo '</div>';
     }
     echo '</div>';
     echo '</div>';
 }
 function ot_type_background($args = array())
 {
     /* turns arguments array into variables */
     extract($args);
     /* verify a description */
     $has_desc = $field_desc ? true : false;
     /* format setting outer wrapper */
     echo '<div class="format-setting type-background ' . ($has_desc ? 'has-desc' : 'no-desc') . '">';
     /* description */
     echo $has_desc ? '<div class="description">' . htmlspecialchars_decode($field_desc) . '</div>' : '';
     /* format setting inner wrapper */
     echo '<div class="format-setting-inner">';
     /* build background colorpicker */
     echo '<div class="option-tree-ui-colorpicker-input-wrap">';
     /* colorpicker JS */
     echo '<script>jQuery(document).ready(function($) { OT_UI.bind_colorpicker("' . esc_attr($field_id) . '-picker"); });</script>';
     /* set background color */
     $background_color = isset($field_value['background-color']) ? esc_attr($field_value['background-color']) : '';
     /* set border color */
     $border_color = in_array($background_color, array('#FFFFFF', '#FFF', '#ffffff', '#fff')) ? '#ccc' : $background_color;
     /* input */
     echo '<input type="text" name="' . esc_attr($field_name) . '[background-color]" id="' . $field_id . '-picker" value="' . $background_color . '" class="widefat option-tree-ui-input cp_input ' . esc_attr($field_class) . '" autocomplete="off" />';
     echo '<div id="cp_' . esc_attr($field_id) . '-picker" class="cp_box"' . ($background_color ? " style='background-color:{$background_color}; border-color:{$border_color};'" : '') . '></div>';
     echo '</div>';
     echo '<div class="select-group">';
     /* build background repeat */
     $background_repeat = isset($field_value['background-repeat']) ? esc_attr($field_value['background-repeat']) : '';
     echo '<select name="' . esc_attr($field_name) . '[background-repeat]" id="' . esc_attr($field_id) . '-repeat" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
     echo '<option value="">' . __('background-repeat', 'option-tree') . '</option>';
     foreach (ot_recognized_background_repeat($field_id) as $key => $value) {
         echo '<option value="' . esc_attr($key) . '" ' . selected($background_repeat, $key, false) . '>' . esc_attr($value) . '</option>';
     }
     echo '</select>';
     /* build background attachment */
     $background_attachment = isset($field_value['background-attachment']) ? esc_attr($field_value['background-attachment']) : '';
     echo '<select name="' . esc_attr($field_name) . '[background-attachment]" id="' . esc_attr($field_id) . '-attachment" class="option-tree-ui-select ' . $field_class . '">';
     echo '<option value="">' . __('background-attachment', 'option-tree') . '</option>';
     foreach (ot_recognized_background_attachment($field_id) as $key => $value) {
         echo '<option value="' . esc_attr($key) . '" ' . selected($background_attachment, $key, false) . '>' . esc_attr($value) . '</option>';
     }
     echo '</select>';
     /* build background position */
     $background_position = isset($field_value['background-position']) ? esc_attr($field_value['background-position']) : '';
     echo '<select name="' . esc_attr($field_name) . '[background-position]" id="' . esc_attr($field_id) . '-position" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
     echo '<option value="">' . __('background-position', 'option-tree') . '</option>';
     foreach (ot_recognized_background_position($field_id) as $key => $value) {
         echo '<option value="' . esc_attr($key) . '" ' . selected($background_position, $key, false) . '>' . esc_attr($value) . '</option>';
     }
     echo '</select>';
     echo '</div>';
     /* build background image */
     echo '<div class="option-tree-ui-upload-parent">';
     /* input */
     echo '<input type="text" name="' . esc_attr($field_name) . '[background-image]" id="' . esc_attr($field_id) . '" value="' . (isset($field_value['background-image']) ? esc_attr($field_value['background-image']) : '') . '" class="widefat option-tree-ui-upload-input ' . esc_attr($field_class) . '" />';
     /* add media button */
     echo '<a href="javascript:void(0);" class="ot_upload_media option-tree-ui-button blue light" rel="' . $post_id . '" title="' . __('Add Media', 'option-tree') . '"><span class="icon upload">' . __('Add Media', 'option-tree') . '</span></a>';
     echo '</div>';
     /* media */
     if (isset($field_value['background-image']) && $field_value['background-image'] !== '') {
         echo '<div class="option-tree-ui-media-wrap" id="' . esc_attr($field_id) . '_media">';
         if (preg_match('/\\.(?:jpe?g|png|gif|ico)$/i', $field_value['background-image'])) {
             echo '<div class="option-tree-ui-image-wrap"><img src="' . esc_url($field_value['background-image']) . '" alt="" /></div>';
         }
         echo '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button" title="' . __('Remove Media', 'option-tree') . '"><span class="icon trash-can">' . __('Remove Media', 'option-tree') . '</span></a>';
         echo '</div>';
     }
     echo '</div>';
     echo '</div>';
 }
function ot_type_background($args = array())
{
    /* turns arguments array into variables */
    extract($args);
    /* verify a description */
    $has_desc = $field_desc ? true : false;
    /* If an attachment ID is stored here fetch its URL and replace the value */
    if (isset($field_value['background-image']) && wp_attachment_is_image($field_value['background-image'])) {
        $attachment_data = wp_get_attachment_image_src($field_value['background-image'], 'original');
        /* check for attachment data */
        if ($attachment_data) {
            $field_src = $attachment_data[0];
        }
    }
    /* format setting outer wrapper */
    echo '<div class="format-setting type-background ' . ($has_desc ? 'has-desc' : 'no-desc') . '">';
    /* description */
    if ($has_desc) {
        echo '<div class="description">' . htmlspecialchars_decode($field_desc) . '</div>';
    }
    /* format setting inner wrapper */
    echo '<div class="format-setting-inner">';
    /* allow fields to be filtered */
    $ot_recognized_background_fields = apply_filters('ot_recognized_background_fields', array('background-color', 'background-repeat', 'background-attachment', 'background-position', 'background-size', 'background-image'), $field_id);
    echo '<div class="ot-background-group">';
    /* build background color */
    if (in_array('background-color', $ot_recognized_background_fields)) {
        $background_color = isset($field_value['background-color']) ? esc_attr($field_value['background-color']) : '';
        echo '<select name="' . esc_attr($field_name) . '[background-color]" id="' . esc_attr($field_id) . '-color" class="option-tree-ui-select uncode-color-select ' . esc_attr($field_class) . '">';
        $colors_array = ot_recognized_uncode_color($field_id);
        array_unshift($colors_array, array('value' => '', 'label' => 'background-color'));
        foreach ($colors_array as $key => $value) {
            if (isset($value['disabled'])) {
                echo '<option value="" disabled>' . esc_attr($value['label']) . '</option>';
            } else {
                echo '<option class="' . esc_attr($value['value']) . '" value="' . esc_attr($value['value']) . '" ' . selected($background_color, $value['value'], false) . '>' . esc_attr($value['label']) . '</option>';
            }
        }
        echo '</select>';
    }
    /* build background repeat */
    if (in_array('background-repeat', $ot_recognized_background_fields)) {
        $background_repeat = isset($field_value['background-repeat']) ? esc_attr($field_value['background-repeat']) : '';
        echo '<select name="' . esc_attr($field_name) . '[background-repeat]" id="' . esc_attr($field_id) . '-repeat" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
        echo '<option value="">' . esc_html__('background-repeat', 'uncode') . '</option>';
        foreach (ot_recognized_background_repeat($field_id) as $key => $value) {
            echo '<option value="' . esc_attr($key) . '" ' . selected($background_repeat, $key, false) . '>' . esc_attr($value) . '</option>';
        }
        echo '</select>';
    }
    /* build background attachment */
    if (in_array('background-attachment', $ot_recognized_background_fields)) {
        $background_attachment = isset($field_value['background-attachment']) ? esc_attr($field_value['background-attachment']) : '';
        echo '<select name="' . esc_attr($field_name) . '[background-attachment]" id="' . esc_attr($field_id) . '-attachment" class="option-tree-ui-select ' . $field_class . '">';
        echo '<option value="">' . esc_html__('background-attachment', 'uncode') . '</option>';
        foreach (ot_recognized_background_attachment($field_id) as $key => $value) {
            echo '<option value="' . esc_attr($key) . '" ' . selected($background_attachment, $key, false) . '>' . esc_attr($value) . '</option>';
        }
        echo '</select>';
    }
    /* build background position */
    if (in_array('background-position', $ot_recognized_background_fields)) {
        $background_position = isset($field_value['background-position']) ? esc_attr($field_value['background-position']) : '';
        echo '<select name="' . esc_attr($field_name) . '[background-position]" id="' . esc_attr($field_id) . '-position" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
        echo '<option value="">' . esc_html__('background-position', 'uncode') . '</option>';
        foreach (ot_recognized_background_position($field_id) as $key => $value) {
            echo '<option value="' . esc_attr($key) . '" ' . selected($background_position, $key, false) . '>' . esc_attr($value) . '</option>';
        }
        echo '</select>';
    }
    /* Build background size  */
    if (in_array('background-size', $ot_recognized_background_fields)) {
        $choices = apply_filters('ot_type_background_size_choices', '', $field_id);
        if (is_array($choices) && !empty($choices)) {
            /* build select */
            echo '<select name="' . esc_attr($field_name) . '[background-size]" id="' . esc_attr($field_id) . '-size" class="option-tree-ui-select ' . esc_attr($field_class) . '">';
            foreach ((array) $choices as $choice) {
                if (isset($choice['value']) && isset($choice['label'])) {
                    echo '<option value="' . esc_attr($choice['value']) . '"' . selected(isset($field_value['background-size']) ? $field_value['background-size'] : '', $choice['value'], false) . '>' . esc_attr($choice['label']) . '</option>';
                }
            }
            echo '</select>';
        } else {
            echo '<input type="text" name="' . esc_attr($field_name) . '[background-size]" id="' . esc_attr($field_id) . '-size" value="' . (isset($field_value['background-size']) ? esc_attr($field_value['background-size']) : '') . '" class="widefat ot-background-size-input option-tree-ui-input ' . esc_attr($field_class) . '" placeholder="' . esc_html__('background-size', 'uncode') . '" />';
        }
    }
    echo '</div>';
    /* build background image */
    if (in_array('background-image', $ot_recognized_background_fields)) {
        echo '<div class="option-tree-ui-upload-parent">';
        /* input */
        echo '<input type="text" name="' . esc_attr($field_name) . '[background-image]" id="' . esc_attr($field_id) . '" value="' . (isset($field_value['background-image']) ? esc_attr($field_value['background-image']) : '') . '" class="widefat option-tree-ui-upload-input ' . esc_attr($field_class) . '" />';
        /* add media button */
        echo '<a href="javascript:void(0);" class="ot_upload_media option-tree-ui-button button button-primary light" rel="' . $post_id . '" title="' . esc_html__('Add Media', 'uncode') . '"><span class="icon fa fa-plus2"></span>' . esc_html__('Add Media', 'uncode') . '</a>';
        echo '</div>';
        /* media */
        if (isset($field_value['background-image']) && $field_value['background-image'] !== '') {
            echo '<div class="option-tree-ui-media-wrap" id="' . esc_attr($field_id) . '_media">';
            $post = get_post($field_value['background-image']);
            if (isset($post)) {
                if ($post->post_mime_type === 'oembed/svg') {
                    echo '<div class="option-tree-ui-image-wrap">' . $post->post_content . '</div>';
                } else {
                    if (preg_match('/\\.(?:jpe?g|png|gif|ico)$/i', $post->guid) || $post->post_mime_type == 'image/url') {
                        echo '<div class="option-tree-ui-image-wrap"><img src="' . esc_url($post->guid) . '" alt="" /></div>';
                    } else {
                        echo '<div class="option-tree-ui-image-wrap"><div class="oembed"><span class="spinner" style="display: block; float: left;"></span></div><div class="oembed_code" style="display: none;">' . esc_url($post->guid) . '</div></div>';
                    }
                }
            }
            echo '<a href="javascript:(void);" class="option-tree-ui-remove-media option-tree-ui-button button button-secondary light" title="' . esc_html__('Remove Media', 'uncode') . '"><span class="icon fa fa-minus2"></span>' . esc_html__('Remove Media', 'uncode') . '</a>';
            echo '</div>';
        }
    }
    echo '</div>';
    echo '</div>';
}