Skip to content

Commit

Permalink
Background position settings fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@ractoon
ractoon committed Dec 23, 2016
1 parent 33bffbf commit 3996391
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 32 deletions.
2 changes: 1 addition & 1 deletion acf-section_styles.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Plugin Name: Advanced Custom Fields: Section Styles
Plugin URI: https://www.ractoon.com
Description: Adds a field to configure styles including padding, border, margin, and backgrounds.
Version: 1.1.0
Version: 1.2.0
Author: ractoon
Author URI: https://www.ractoon.com
License: GPLv2 or later
Expand Down
29 changes: 18 additions & 11 deletions assets/css/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,23 +113,30 @@
height: auto;
}

.acf-section-styles-border-color-container {
float: left;
width: 50%;
}

.acf-section-styles-border-style-container {
float: right;
width: 50%;
}

.acf-section-styles-background-color-container,
.acf-section-styles-background-image-container,
.acf-section-styles-background-style-container {
.acf-section-styles-background-style-container,
.acf-section-styles-background-position-container {
clear: both;
padding: 15px 0 0;
}

.acf-section-styles-input-row:after {
content: "";
display: table;
clear: both;
}

.acf-section-styles-input-col-half {
float: left;
margin: 0 4% 0 0;
width: 48%;
}

.acf-section-styles-input-col-half:last-child {
margin-right: 0;
}

@media only screen and (max-width: 550px), (min-width: 850px) and (max-width: 1050px) {
.acf-section-styles-box-model {
width: 400px;
Expand Down
107 changes: 87 additions & 20 deletions fields/acf-section_styles-v5.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,18 @@ function __construct( $settings ) {
'repeat' => __( 'Repeat', 'acf-section_styles' )
) );

$this->background_position_options_1 = apply_filters( 'acf_section_styles_background_position_options_1', array(
'top' => __( 'Top', 'acf-section_styles' ),
'center' => __( 'Center', 'acf-section_styles' ),
'bottom' => __( 'Bottom', 'acf-section_styles' )
) );

$this->background_position_options_2 = apply_filters( 'acf_section_styles_background_position_options_2', array(
'left' => __( 'Left', 'acf-section_styles' ),
'center' => __( 'Center', 'acf-section_styles' ),
'right' => __( 'Right', 'acf-section_styles' )
) );

$this->settings = $settings;

// do not delete!
Expand Down Expand Up @@ -276,6 +288,29 @@ function render_field_settings( $field ) {
)
), 'tr');

acf_render_field_wrap(array(
'label' => __( 'Default Background Position', 'acf-section_styles' ),
'type' => 'select',
'name' => 'background_position_1',
'choices' => $this->background_position_options_1,
'prefix' => $field['prefix'],
'value' => $field['background_position_1'],
'wrapper' => array(
'data-name' => 'background-position-wrapper'
)
), 'tr');

acf_render_field_wrap(array(
'type' => 'select',
'name' => 'background_position_2',
'choices' => $this->background_position_options_2,
'prefix' => $field['prefix'],
'value' => $field['background_position_2'],
'wrapper' => array(
'data-append' => 'background-position-wrapper'
)
), 'tr');

}

/*
Expand Down Expand Up @@ -368,28 +403,33 @@ function render_field( $field ) {
<!-- Style Options -->
<div class="acf-section-styles-options">

<!-- Border Style -->
<div class="acf-section-styles-border-style-container">
<div class="acf-label">
<label for= ""><?php _e( 'Border Style', 'acf-section_styles' ); ?></label>
</div>

<select id="<?php echo $field['id']; ?>_border_style" name="<?php echo esc_attr($field['name']) ?>[border_style]">
<?php foreach ( $this->border_options as $v => $label ): ?>
<option value="<?php echo $v; ?>"<?php if ( !empty( $field['value']['border_style'] ) && $field['value']['border_style'] == $v ) echo ' selected'; ?>><?php echo $label; ?></option>
<?php endforeach; ?>
</select>
</div>
<!-- End Border Style -->
<div class="acf-section-styles-input-row">
<div class="acf-section-styles-input-col-half">
<!-- Border Style -->
<div class="acf-section-styles-border-style-container">
<div class="acf-label">
<label for= ""><?php _e( 'Border Style', 'acf-section_styles' ); ?></label>
</div>

<!-- Border Color -->
<div class="acf-section-styles-border-color-container">
<div class="acf-label">
<label for= "<?php echo $field['id']; ?>_border_color"><?php _e( 'Border Color', 'acf-section_styles' ); ?></label>
<select id="<?php echo $field['id']; ?>_border_style" name="<?php echo esc_attr($field['name']) ?>[border_style]">
<?php foreach ( $this->border_options as $v => $label ): ?>
<option value="<?php echo $v; ?>"<?php if ( !empty( $field['value']['border_style'] ) && $field['value']['border_style'] == $v ) echo ' selected'; ?>><?php echo $label; ?></option>
<?php endforeach; ?>
</select>
</div>
<!-- End Border Style -->
</div>
<div class="acf-section-styles-input-col-half">
<!-- Border Color -->
<div class="acf-section-styles-border-color-container">
<div class="acf-label">
<label for= "<?php echo $field['id']; ?>_border_color"><?php _e( 'Border Color', 'acf-section_styles' ); ?></label>
</div>
<input class="acf-section-styles-border-color" name="<?php echo esc_attr($field['name']) ?>[border_color]" id="<?php echo $field['id']; ?>_border_color" type="text" value="<?php if ( !empty( $field['value']['border_color'] ) ) echo $field['value']['border_color']; ?>" />
</div>
<!-- End Border Color -->
</div>
<input class="acf-section-styles-border-color" name="<?php echo esc_attr($field['name']) ?>[border_color]" id="<?php echo $field['id']; ?>_border_color" type="text" value="<?php if ( !empty( $field['value']['border_color'] ) ) echo $field['value']['border_color']; ?>" />
</div>
<!-- End Border Color -->

<!-- Background Color -->
<div class="acf-section-styles-background-color-container">
Expand Down Expand Up @@ -436,7 +476,7 @@ function render_field( $field ) {

<div class="acf-section-styles-background-style-container">
<div class="acf-label">
<label for= ""><?php _e( 'Background Style', 'acf-section_styles' ); ?></label>
<label for="<?php echo $field['id']; ?>_background_style"><?php _e( 'Background Style', 'acf-section_styles' ); ?></label>
</div>

<select id="<?php echo $field['id']; ?>_background_style" name="<?php echo esc_attr($field['name']) ?>[background_style]">
Expand All @@ -445,6 +485,30 @@ function render_field( $field ) {
<?php endforeach; ?>
</select>
</div>

<div class="acf-section-styles-background-position-container">
<div class="acf-label">
<label for="<?php echo $field['id']; ?>_background_position_1"><?php _e( 'Background Position', 'acf-section_styles' ); ?></label>
</div>

<div class="acf-section-styles-input-row">
<div class="acf-section-styles-input-col-half">
<select id="<?php echo $field['id']; ?>_background_position_1" name="<?php echo esc_attr($field['name']) ?>[background_position_1]" >
<?php foreach ( $this->background_position_options_1 as $v => $label ): ?>
<option value="<?php echo $v; ?>"<?php if ( !empty( $field['value']['background_position_1'] ) && $field['value']['background_position_1'] == $v ) echo ' selected'; ?>><?php echo $label; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="acf-section-styles-input-col-half">
<select id="<?php echo $field['id']; ?>_background_position_2" name="<?php echo esc_attr($field['name']) ?>[background_position_2]" class="acf-section-styles-background-position-1">
<?php foreach ( $this->background_position_options_2 as $v => $label ): ?>
<option value="<?php echo $v; ?>"<?php if ( !empty( $field['value']['background_position_2'] ) && $field['value']['background_position_2'] == $v ) echo ' selected'; ?>><?php echo $label; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>

</div>

<div class="view hide-if-value">
Expand Down Expand Up @@ -519,6 +583,9 @@ function format_value( $value, $post_id, $field ) {
$value['background_image'] = acf_get_attachment( $value['background_image'] );
}

// background position value
$value['background_position'] = $value['background_position_1'] . ' ' . $value['background_position_2'];

// format padding value
$value['margin'] = !empty( $value['margin_top'] ) ? $value['margin_top'] : '0';
$value['margin'] .= ' '; // space
Expand Down
3 changes: 3 additions & 0 deletions readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ This ACF field type is compatible with:

== Changelog ==

= 1.2.0 =
* Background position settings fields

= 1.1.0 =
* Background image applies background color in preview (visible on transparent background images)

Expand Down

0 comments on commit 3996391

Please sign in to comment.