true,
'background-repeat' => true,
'background-attachment' => true,
'background-position' => true,
'background-image' => true,
'background-gradient' => false,
'background-clip' => false,
'background-origin' => false,
'background-size' => true,
'preview_media' => false,
'preview' => true,
'preview_height' => '200px',
'transparent' => true,
);
$this->field = wp_parse_args( $this->field, $defaults );
// No errors please.
$defaults = array(
'background-color' => '',
'background-repeat' => '',
'background-attachment' => '',
'background-position' => '',
'background-image' => '',
'background-clip' => '',
'background-origin' => '',
'background-size' => '',
'media' => array(),
);
$this->value = wp_parse_args( $this->value, $defaults );
$defaults = array(
'id' => '',
'width' => '',
'height' => '',
'thumbnail' => '',
);
$this->value['media'] = wp_parse_args( $this->value['media'], $defaults );
}
/**
* Field Render Function.
* Takes the vars and outputs the HTML for the field in the settings
*
* @since 1.0.0
* @access public
* @return void
*/
public function render() {
$this->select2_config['allowClear'] = true;
if ( isset( $this->field['select2'] ) ) {
$this->field['select2'] = wp_parse_args( $this->field['select2'], $this->select2_config );
} else {
$this->field['select2'] = $this->select2_config;
}
$this->field['select2'] = Redux_Functions::sanitize_camel_case_array_keys( $this->field['select2'] );
$select2_data = Redux_Functions::create_data_string( $this->field['select2'] );
if ( true === $this->field['background-color'] ) {
if ( isset( $this->value['color'] ) && empty( $this->value['background-color'] ) ) {
$this->value['background-color'] = $this->value['color'];
}
$def_bg_color = $this->field['default']['background-color'] ?? '';
echo ' $this->field,
'index' => 'color',
);
echo Redux_Functions_Ex::output_alpha_data( $data ); // phpcs:ignore WordPress.Security.EscapeOutput
echo '>';
echo '';
if ( ! isset( $this->field['transparent'] ) || false !== $this->field['transparent'] ) {
$is_checked = '';
if ( 'transparent' === $this->value['background-color'] ) {
$is_checked = ' checked="checked"';
}
echo '';
}
if ( true === $this->field['background-repeat'] || true === $this->field['background-position'] || true === $this->field['background-attachment'] ) {
echo '
';
}
}
if ( true === $this->field['background-repeat'] ) {
$array = array(
'no-repeat' => esc_html__( 'No Repeat', 'redux-framework' ),
'repeat' => esc_html__( 'Repeat All', 'redux-framework' ),
'repeat-x' => esc_html__( 'Repeat Horizontally', 'redux-framework' ),
'repeat-y' => esc_html__( 'Repeat Vertically', 'redux-framework' ),
'inherit' => esc_html__( 'Inherit', 'redux-framework' ),
);
echo '';
}
if ( true === $this->field['background-clip'] ) {
$array = array(
'inherit' => esc_html__( 'Inherit', 'redux-framework' ),
'border-box' => esc_html__( 'Border Box', 'redux-framework' ),
'content-box' => esc_html__( 'Content Box', 'redux-framework' ),
'padding-box' => esc_html__( 'Padding Box', 'redux-framework' ),
);
echo '';
}
if ( true === $this->field['background-origin'] ) {
$array = array(
'inherit' => esc_html__( 'Inherit', 'redux-framework' ),
'border-box' => esc_html__( 'Border Box', 'redux-framework' ),
'content-box' => esc_html__( 'Content Box', 'redux-framework' ),
'padding-box' => esc_html__( 'Padding Box', 'redux-framework' ),
);
echo '';
}
if ( true === $this->field['background-size'] ) {
$array = array(
'inherit' => esc_html__( 'Inherit', 'redux-framework' ),
'cover' => esc_html__( 'Cover', 'redux-framework' ),
'contain' => esc_html__( 'Contain', 'redux-framework' ),
);
echo '';
}
if ( true === $this->field['background-attachment'] ) {
$array = array(
'fixed' => esc_html__( 'Fixed', 'redux-framework' ),
'scroll' => esc_html__( 'Scroll', 'redux-framework' ),
'inherit' => esc_html__( 'Inherit', 'redux-framework' ),
);
echo '';
}
if ( true === $this->field['background-position'] ) {
$array = array(
'left top' => esc_html__( 'Left Top', 'redux-framework' ),
'left center' => esc_html__( 'Left center', 'redux-framework' ),
'left bottom' => esc_html__( 'Left Bottom', 'redux-framework' ),
'center top' => esc_html__( 'Center Top', 'redux-framework' ),
'center center' => esc_html__( 'Center Center', 'redux-framework' ),
'center bottom' => esc_html__( 'Center Bottom', 'redux-framework' ),
'right top' => esc_html__( 'Right Top', 'redux-framework' ),
'right center' => esc_html__( 'Right center', 'redux-framework' ),
'right bottom' => esc_html__( 'Right Bottom', 'redux-framework' ),
);
echo '';
}
if ( $this->field['background-image'] ) {
echo '
';
if ( empty( $this->value ) && ! empty( $this->field['default'] ) ) {
if ( is_array( $this->field['default'] ) ) {
if ( ! empty( $this->field['default']['media']['id'] ) ) {
$this->value['media']['id'] = $this->field['default']['media']['id'];
} elseif ( ! empty( $this->field['default']['id'] ) ) {
$this->value['media']['id'] = $this->field['default']['id'];
}
if ( ! empty( $this->field['default']['url'] ) ) {
$this->value['background-image'] = $this->field['default']['url'];
} elseif ( ! empty( $this->field['default']['media']['url'] ) ) {
$this->value['background-image'] = $this->field['default']['media']['url'];
} elseif ( ! empty( $this->field['default']['background-image'] ) ) {
$this->value['background-image'] = $this->field['default']['background-image'];
}
} elseif ( is_numeric( $this->field['default'] ) ) {
// Check if it's an attachment ID.
$this->value['media']['id'] = $this->field['default'];
} else { // Must be a URL.
$this->value['background-image'] = $this->field['default'];
}
}
if ( empty( $this->value['background-image'] ) && ! empty( $this->value['media']['id'] ) ) {
$img = wp_get_attachment_image_src( $this->value['media']['id'], 'full' );
$this->value['background-image'] = $img[0];
$this->value['media']['width'] = $img[1];
$this->value['media']['height'] = $img[2];
}
$hide = 'hide ';
if ( ( isset( $this->field['preview_media'] ) && false === $this->field['preview_media'] ) ) {
$this->field['class'] .= ' noPreview';
}
if ( ( ! empty( $this->field['background-image'] ) && true === $this->field['background-image'] ) || isset( $this->field['preview'] ) && false === $this->field['preview'] ) {
$hide = '';
}
$placeholder = $this->field['placeholder'] ?? esc_html__( 'No media selected', 'redux-framework' );
echo '';
echo '';
echo '';
echo '';
echo '';
// Preview.
$hide = '';
if ( ( isset( $this->field['preview_media'] ) && false === $this->field['preview_media'] ) || empty( $this->value['background-image'] ) ) {
$hide = 'hide ';
}
if ( empty( $this->value['media']['thumbnail'] ) && ! empty( $this->value['background-image'] ) ) { // Just in case.
if ( ! empty( $this->value['media']['id'] ) ) {
$image = wp_get_attachment_image_src(
$this->value['media']['id'],
array(
150,
150,
)
);
$this->value['media']['thumbnail'] = $image[0];
} else {
$this->value['media']['thumbnail'] = $this->value['background-image'];
}
}
echo '';
// Upload controls DIV.
echo '';
// If the user has WP3.5+ show upload/remove button.
echo '' . esc_html__( 'Upload', 'redux-framework' ) . '';
$hide = '';
if ( empty( $this->value['background-image'] ) || '' === $this->value['background-image'] ) {
$hide = ' hide';
}
echo '' . esc_html__( 'Remove', 'redux-framework' ) . '';
echo '
';
}
/**
* Preview
* */
if ( ! isset( $this->field['preview'] ) || false !== $this->field['preview'] ) {
$css = $this->css_style( $this->value );
$is_bg = strpos( $css, 'background-image' );
if ( empty( $css ) || ! $is_bg ) {
$css = 'display:none;';
}
$css .= 'height: ' . esc_attr( $this->field['preview_height'] ) . ';';
echo '
';
}
}
/**
* Enqueue Function.
* If this field requires any scripts, or css define this function and register/enqueue the scripts/css
*
* @since 1.0.0
* @access public
* @return void
*/
public function enqueue() {
if ( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
} elseif ( ! wp_script_is( 'media-upload' ) ) {
wp_enqueue_script( 'media-upload' );
}
if ( ! wp_style_is( 'select2-css' ) ) {
wp_enqueue_style( 'select2-css' );
}
if ( ! wp_style_is( 'wp-color-picker' ) ) {
wp_enqueue_style( 'wp-color-picker' );
}
$dep_array = array( 'jquery', 'wp-color-picker', 'select2-js', 'redux-js' );
wp_enqueue_script(
'redux-field-background',
Redux_Core::$url . 'inc/fields/background/redux-background' . Redux_Functions::is_min() . '.js',
$dep_array,
$this->timestamp,
true
);
if ( $this->parent->args['dev_mode'] ) {
wp_enqueue_style(
'redux-field-background',
Redux_Core::$url . 'inc/fields/background/redux-background.css',
array(),
$this->timestamp
);
wp_enqueue_style( 'redux-color-picker' );
}
}
/**
* Output CSS styling.
*
* @param array $data Value array.
*
* @return string
*/
public function css_style( $data = array() ): string {
$css = '';
if ( ! empty( $data ) && is_array( $data ) ) {
foreach ( $data as $key => $val ) {
if ( ! empty( $val ) && 'media' !== $key ) {
if ( 'background-image' === $key ) {
$css .= $key . ":url('" . esc_url( $val ) . "');";
} else {
$css .= $key . ':' . esc_attr( $val ) . ';';
}
}
}
}
return $css;
}
/**
* Enable output_variables to be generated.
*
* @since 4.0.3
* @return void
*/
public function output_variables() {
// No code needed, just defining the method is enough.
}
}
}
class_alias( 'Redux_Background', 'ReduxFramework_Background' );