Custom Background Image Display

[alenb]

Hey guys,

At the moment the background image display is a dropdown which has a few options, however, it lacks a custom option. In a lot of circumstances you'd want/need to tweak the position of a background on an element. It would be highly beneficial to have a custom option or replacing the dropdown with an input box altogether. Just an idea.

I assume the idea was to use the CSS Styles box when a custom display was needed? And the dropdown is there as a 'quick select' type of thing?

[AlexGStapleton]

I assume the idea was to use the CSS Styles box when a custom display was needed? And the dropdown is there as a 'quick select' type of thing?

Basically, yes.

I'm all for this idea but I'm not too sure it could be handled design wise. Thoughts?

[alenb]

An input box would help non-code savvy folk make changes to the background position without having to do it via CSS Styles. It would also keep things grouped together when it comes to background stylings under the design tab. Although, I don't know if this is a strong enough reason to make a change like that. In all honesty, they ought to learn some CSS anyways hehe

What I might do is, I'll fork it and try it out. If it looks good, I'll submit it and you can take a look.

[andrejarh]

Design wise, I think there are other things to consider, if a decision is made for such control to be built. Background-position is just one of background related CSS properties. Others are at least background size (cover, contain), background-repeat...

@alenb What you can do currently about it is to add your own options inside the select box with php:

/* PHP */
/* Create the option */
function add_custom_row_bg_styles( $form_options, $fields ) {
    $form_options['background_display']['options']['CustomHtmlClass'] = 'your option';
}
add_filter('siteorigin_panels_row_style_fields', 'add_custom_row_bg_styles', 10, 2);

/* Add a special HTML class */
function custom_row_style_attributes( $attributes, $args ) {
    if (isset($args['background_display']) && $args['background_display'] == 'CustomHtmlClass') {
        array_push($attributes['class'], 'CustomHtmlClass');
    }                   
    return $attributes;   
}
add_filter('siteorigin_panels_row_style_attributes', 'custom_row_style_attributes', 1, 2);

You will be then able to style it then with CSS (basic example):

.CustomHtmlClass {
background-postition: left top!important;
}