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>';
}