Custom Background API and UI

[ryan]

Build in a custom background API and UI similar to that for custom headers.

[automattor]

(In [13041]) First pass at custom background support. Needs UI love. see #12186

[ryan]

The UI is an intolerably ugly placeholder. You detailers have at it.

[ptahdunbar]

Prettified the custom background page.

[ptahdunbar]

cleaned up the Custom_Background class, reformatted the forms, removed the Reset Background Image form as it duplicates the Remove Background Image form. Added title background image to the upload background form. Everything looks normal now :)

[mdawaffe]

Replying to ptahdunbar:

removed the Reset Background Image form as it duplicates the Remove Background Image form

Reset: reverts the background image to the default one the theme came with (supposing the theme did).
Remove: gets rid of the background image entirely.

They're different if the theme comes with a default background image.

[mdawaffe]

Does it make sense to hove position and attachment choices too in the custom background UI?

Sometimes you'll want the background top center, sometimes top right, sometimes scroll, sometimes fixed.

[nacin]

Replying to mdawaffe:

Does it make sense to hove position and attachment choices too in the custom background UI?

+1.

[dd32]

It'd be good if this was to handle both a Solid colour as well as a image.. It'll just add that tiny bit more functionality to allow a customised look without the effort of images.

[miqrogroove]

Custom Header Page bug:

Menu collapse fails on this page in Internet Explorer. It also gives me "Invalid property value." error in the scripts.

[ryan]

(In [13186]) Add some options to custom background admin. Needs styling. see #12186

[ryan]

That's a first pass at some UI tweaks suggested by MT minus the necessary CSS. Comp coming soon so we can all help massage it.

[iammattthomas]

Mockup of custom background UI

[iammattthomas]

I hadn't seen dd32's suggestion to include a default background color when I created the mockup; that's worth exploring but it can be safely added later. This is fairly standard stuff, although I think the Upload button generally sits below the file upload form. If that's not changeable it's no big deal; it just helps makes things a bit more compact.

[iammattthomas]

Change background-position to background-position-x so that images stay vertically aligned to the top

[ryan]

Since this can work with any theme, we don't need to require themes to call add_custom_background(). They still can in case they want to customize things, but after loading the theme's functions.php in wp-settings we should call add_custom_background() and setup the custom background object if it hasn't already been setup.

[ryan]

(In [13188]) Use background-position-x. Props iammattthomas. see #12186

[ryan]

Replying to ryan:

Since this can work with any theme, we don't need to require themes to call add_custom_background(). They still can in case they want to customize things, but after loading the theme's functions.php in wp-settings we should call add_custom_background() and setup the custom background object if it hasn't already been setup.

Actually, nevermind. It does terrible things with some themes. :-)

[ryan]

(In [13189]) Add defaults for background option radios. see #12186

[ryan]

How widely supported is background-position-x?

[iammattthomas]

Replying to ryan:

How widely supported is background-position-x?

Hmm, not sure. I see it may not be supported in some older versions of FF, though. We could just do

background-position: top left;
background-position: top center;
background-position: top right;

if background-position-x isn't working in some browsers.

[nacin]

background-position-(x|y) works in Webkit (Safari/Chrome) and IE6+. It doesn't work in Firefox (checked in 3.6) or Opera.

I'll add in the 'top'.

[nacin]

(In [13190]) Use background-position, as background-position-x has incomplete browser support (Webkit and IE6+ only, no Firefox or Opera). See #12186

[ryan]

Anyone up for doing the styling needed to match the comp?

[yoavf]

styling to match comp

[ryan]

(In [13303]) Custom background styling fixes. Props yoavf. see #12186

[iammattthomas]

Thanks Yoav, this looks good now.

Ryan -- only remaining issues I see are the broken image when there's no custom background set, and a missing word in the "remove custom header" descriptive text:

"This will remove background" should be "This will remove the background"

[iammattthomas]

Just noticed line 218 of custom-background.php now reads "uploadFrom" instead of "uploadForm"; guessing this is a typo.

[ryan]

(In [13307]) Grammar fix. Don't show empty img. Cleanup POST handler. see #12186

[ryan]

(In [13308]) Typo fix. see #12186

[ryan]

Some can try background color for extra credit. I think we're pretty much done with the image part.

[lancewillett]

+1 for a background color option (chosen with color picker just like custom header). I was going to work on this as a custom theme option, but it'd be much better to have it as a core feature.

[lancewillett]

background color additions to theme.php

[lancewillett]

I just added two patches as as first pass at adding a background color option. (My first-ever patches to core. w00t!)

[lancewillett]

background color additions to custom-background.php

[lancewillett]

Replying to mdawaffe:

Reset: reverts the background image to the default one the theme came with (supposing the theme did).
Remove: gets rid of the background image entirely.

They're different if the theme comes with a default background image.

This is true: in many cases themes do come with a default background image and background color. I think theme authors and end users would love to have both options here: Revert to Original (like custom header) or Remove Background Image (remove entirely).

[iammattthomas]

Replying to lancewillett:

This is true: in many cases themes do come with a default background image and background color. I think theme authors and end users would love to have both options here: Revert to Original (like custom header) or Remove Background Image (remove entirely).

It makes sense to include it if there's a background image by default. If there's not, it's really confusing to present two options that do the same thing.

[lancewillett]

Replying to iammattthomas:

It makes sense to include it if there's a background image by default. If there's not, it's really confusing to present two options that do the same thing.

Yes, I agree. So maybe it could show up based on the existence of a definition:

define( 'BACKGROUND_IMAGE', '%s/images/background.jpg' ); // %s is theme dir uri

If that is not defined, or blank (empty), don't give an option to revert to original.

[ryan]

(In [13574]) Background color selection. Props lancewillett. see #12186

[jane]

Noticed some weird use of h2s mid-screen, having the ui group mockup some better styling for this screen.

[automattor]

(In [13668]) Custom background color fixes. see #12186

[ryan]

(In [13669]) Revert accidental junk. see #12186

[ryan]

When a background color is set but a background image is not set, the custom-background-image div shows nothing. It needs to be fixed to show the color.

[eddieringle]

Not sure how else this could have been done, but I fixed a bug where the Farbtastic color picker wasn't loading during step 2.

[eddieringle]

Fixes bug where farbtastic doesn't load; applied against rev 13758

[dd32]

(In [13764]) Add instant background-color feedback to Custom Backgrounds. Add input validation to user-entered colour data. See #12186

[dd32]

Is the Steps functionality going to be actually used here at all?

At present, Step 2 is used for the image upload handler, thats all. The steps functionality can be removed easily enough while allowing the current UI to operate..

[dd32]

(In [13766]) Add min-height and a black border to the Background Image preview. Min-height to allow for no image present, black border to show preview area when no image or colour is available. See #12186

[eddieringle]

Removing the Steps is probably cleaner than my workaround.

[dd32]

Commit notice skiped this ticket:

(In [13765]) Show Background preview and options when no Image is uploaded. Display "Updated" div upon updates. Fix Colour Picker not loading after uploading a background image. See #12186

[eddieringle]

If we are removing the whole Steps process, we might as well move the contents of js_1() to js() instead of a wasteful function call.

[dd32]

If we are removing the whole Steps process

I quite agree, But theres more that needs doing there, I'd rather move the inline JS out to a file for a start. If no-one comes up with a good reason for the steps functionality shortly, i'll rip it out and clean it up a bit

[eddieringle]

This diff moves the inline JS to a separate file, a small piece of inline JS is still necessary due to it needing a value supplied by a PHP function.

[eddieringle]

Move inline JavaScript to separate file.

[eddieringle]

I'm not sure how you want to rip the Steps out, so I'll leave it up to you.

[eddieringle]

So after this cleanup happens, what's next? Surely there are plans to add an image selector to select previously uploaded images, correct?

[dd32]

(In [13788]) Cleanup of Custom Background. Move JS to external file, Add @since, Remove redundant steps functionality, Preview of Image alignment. See #12186

[eddieringle]

This patch fixes the position preview. The 'center' value for the 'align' attribute isn't valid, so it won't do anything.

[eddieringle]

Centered preview works now

[jshreve]

When I was playing around with the background feature I was testing with a gradient image. I wanted to easily repeat-x so it would look right instead of tile.

background-repeat-options.diff adds 2 radio button options to repeat horizontally and vertically. I think it's a good addition and allows people to use some different types of background images.

[jshreve]

adds 'Horizontally' and 'Vertically' as repeat options

[dd32]

(In [13799]) Better cross-browser support for Custom Background image alignment preview. Props eddieringle. See #12186

[dd32]

background-repeat-options.diff adds 2 radio button options to repeat horizontally and vertically.

4 radio buttons might be stretching it a bit in terms of width of the option. I'll attach a patch which uses a select instead in its place.

It would be nice to preview the tiling of the image too, Right now, the image is an <img> to allow the full image to be shown in the preview (instead of only the 10% (or so) which fits into the div).

[dd32]

Note: Patch contains extra junk which doesnt affect functionality.

[dd32]

So after this cleanup happens, what's next? Surely there are plans to add an image selector to select previously uploaded images, correct?

I'm not sure if that'll make it into 3.0 at this stage, i'm not aware of anyone moving towards that.

Is there anyone who is looking into a UI cleanup? I'm thinking mainly of the "Upload New Background Image" and "Remove Background Image" sections, To me, they're more of placeholders and in need of a better UI..

[eddieringle]

I _might_ give it a shot, but school might get in the way so I am not 100% certain. Those two sections can be replaced by one big "Manage Backgrounds" section, where you can select one you previously uploaded, add new ones, and delete some too. Also, is uploading to wp-content/uploads/%year%/%month%/ really a good idea? If we are allowing them to select previous uploads, then they should be in a separate uploads/backgrounds folder.

[dd32]

Also, is uploading to wp-content/uploads/%year%/%month%/ really a good idea? If we are allowing them to select previous uploads, then they should be in a separate uploads/backgrounds folder.

Both the Custom Headers AND Custom Backgrounds are just standard media uploads, Both are uploaded to the uploads folder, and available everywhere else..

Both the Headers and Backgrounds would benefit from a Media Library selection ability.

[jshreve]

It would be nice to preview the tiling of the image too, Right now, the image is an <img> to allow the full image to be shown in the preview (instead of only the 10% (or so) which fits into the div).

I'll go ahead and try to get something working later on tonight or tomorrow probably. I can't get to it right this second but I agree it would be nice.. so I'll give it a shot.

How should we display tiling vertically? The image would most likely only display once because of the height of the div.. We could perhaps dynamically make the div some amount larger then what ever the image is and make it self scroll so the screen doesn't get ugly and pushed down? ideas on this?

[eddieringle]

Replying to dd32:

Both the Custom Headers AND Custom Backgrounds are just standard media uploads, Both are uploaded to the uploads folder, and available everywhere else..

Both the Headers and Backgrounds would benefit from a Media Library selection ability.

I agree, but wouldn't it be better to separate the images uploaded to be used as headers/backgrounds and images uploaded to be used in posts?

[jshreve]

I have a quick patch that does tiling... but of course you have to use the background properties instead of an image tag so we loose the benefit like you mentioned and you don't get to see the full image.

any other ideas how we can do the preview? i can write something but i'm not sure the best way about going about it so the preview actually gives an accurate representation of the final output

[dd32]

I have a quick patch that does tiling... but of course you have to use the background properties instead of an image tag so we loose the benefit like you mentioned and you don't get to see the full image.

Yeah, I did the same thing, and discarded it for the reasons i mentioned.

It might be better to modify the displaying function slightly in 2 ways:

• If is_admin(): Change the selector from body to #background-preview
• Is is_admin(): Change the img element from the fullsize (with Browser resizing) to the smallest non-croped thumbnail generated

[jshreve]

12186.diff messed up the if statements a bit so only repeat and no-repeat were working. I switched it to a switch like you did for the others.

background-repeat2.diff contains repeat previewing and the above fix.

This seems to work pretty well for tiling and displays the area big enough to get an idea of what it will work like

I might try to work on some of the other todos in here too.

[jshreve]

background-repeat with preview

[jshreve]

Replying to jshreve:

12186.diff messed up the if statements a bit so only repeat and no-repeat were working. I switched it to a switch like you did for the others.

background-repeat2.diff contains repeat previewing and the above fix.

This seems to work pretty well for tiling and displays the area big enough to get an idea of what it will work like

I might try to work on some of the other todos in here too.

updated with nonminified version

[jorbin]

Is there a reason that add_custom_background is used instead of add_theme_support( 'custom_background' ) ? It seems like it would be more consistant to use add_theme_support .

[dd32]

(In [13856]) Add Repeat-x/repeat-y support to Custom Backgrounds, Add Live preview of Repeat option, Use Thumbnail of background for Background Preview. Props jshreve. See #12186

[TobiasBg]

I don't really like the <style> tag in the <body>, but as it's "only" on the admin page, I guess it is ok.

[dd32]

I don't really like the <style> tag in the <body>, but as it's "only" on the admin page, I guess it is ok.

I was thinking something similar, But its not possible to put it in the head.

Moving it inline with the html element is a possibility however, <div style="background.....

[nacin]

Adapting the UI working group mockup: #12699, particularly since the current layout doesn't work well when text gets wrapped.

[lancewillett]

Replying to lancewillett:

Replying to mdawaffe:

Reset: reverts the background image to the default one the theme came with (supposing the theme did).
Remove: gets rid of the background image entirely.

They're different if the theme comes with a default background image.

This is true: in many cases themes do come with a default background image and background color. I think theme authors and end users would love to have both options here: Revert to Original (like custom header) or Remove Background Image (remove entirely).

Do we have plans to add this functionality? There are already themes using this feature, and if a user follows the "Remove Background Image" action there is no way to get back the original background image.

[ocean90]

See also 12699.

[TECannon]

refines the ui (see #12699)

[nacin]

(In [14209]) Custom background UI tweaks. Props TECannon. see #12186, fixes #12699

[TECannon]

removed the unneeded #custom-background css

[lancewillett]

Add option to restore original background image

[lancewillett]

Adding patch for Restore Original Image. The key here is not to show this option if the theme doesn't define a default background image (like Twenty Ten).

[dd32]

(In [14379]) Add reset background image to theme default. Props lancewillett. See #12186

[johnonolan]

BUG:

Image preview in admin after uploading a custom background image is not working in latest trunk.

[johnonolan]

More details on the bug above - this only appears when uploading a new background image with no other settings defined. As soon as you hit "save changes" at the bottom of the page, the background preview works correctly.

Suggestion: Have "upload image" automatically save changes to entire page, if you're mid-way through entering some color or positioning settings then you're going to want to save those settings when you hit the upload image button anyway.

[johnonolan]

Removes redundant CSS, lightens up border on background preview, changes labels for background preview.

[ocean90]

In cleanup_background.2.patch

• Remove only the background image, not all theme mods
• new cap edit_theme_options
• whitespace clean up

[ryan]

(In [14577]) Remove redundant CSS, lighten up border on background preview, change labels for background preview. Props johnonolan. see #12186

[ryan]

(In [14578]) Remove only the background image, not all theme mods, when resetting the background to the default. Props ocean90. see #12186

[jshreve]

inline_defaults_cb.diff does two things:

• moves the css inline to the div (fixes validation error)
• fixes the issue reported by John where the uploaded image doesn't show up initially. It seems related to no other theme mods being set, so I set the background attributes to the defaults that we were already displaying on the UI (fixed, left, tile).

[jshreve]

inline style fix + bug fix where bg doesn't show initially

[nacin]

(In [14624]) Use inline styles in custom background admin, and prepopulate background options. props jshreve, see #12186.

[ocean90]

In background_js_valid.patch:

• valid HTML
• remove, reset also the background_image_thumb theme mod
• removed the unused JS code

[ocean90]

In background_js_valid.2.patch the same as above plus:

• added live preview for background-attachment
• fixed the issue reported by johnonolan, we used the wrong default value for repeat.

[nacin]

(In [14670]) Validation and nonce improvements to custom background UI. props ocean90, see #12186.

[ocean90]

UI change after IRC discussion

[ocean90]

No UI change

[nacin]

(In [14684]) Custom background UI updates. props ocean90 for initial patch, see #12186.

[nacin]

(In [14685]) Show updated message after resetting or removing the background image. see #12186.

[nacin]

Can we get some final UX and UI feedback on this? I am thinking we are ready to close this as fixed but a final testing and review would be helpful.

[nacin]

Maybe move the background repeat to radio buttons? It kind of looks inconsistent, though it's also the only one with > 3 choices.

[JohnONolan]

UX: I agree about moving them to radio buttons - there are 4 options and there will only ever be 4 options, this will look fine with radio buttons and will be more consistent with the rest of the form. It also takes removes an unnecessary click from the process.

Radio buttons also all need some padding-right of around 15px.

[JohnONolan]

Converts screen to using radio buttons in place of dropdown menu for background repeat options. Amends two strings to be clearer on what happens when a background image is removed.

[JohnONolan]

Adds padding-right to radio buttons

[jshreve]

JohnONolan, nacin:

We originally had them as radio buttons. You can see a part of the discussion in the posts about 8 weeks ago. (Just posting letting you know to have a little background..)

Here's a snippet:

dd32:

background-repeat-options.diff adds 2 radio button options to repeat horizontally and vertically.

4 radio buttons might be stretching it a bit in terms of width of the option. I'll attach a patch which uses a select instead in its place.

It would be nice to preview the tiling of the image too, Right now, the image is an <img> to allow the full image to be shown in the preview (instead of only the 10% (or so) which fits into the div).

Having said that it is a UI decision and the patch is now there thanks to John so it should be up to the UI team... I think I am happy either way. I can see 4 radio buttons being too much but I can see the select being out of place with the other options.

[JohnONolan]

Hey Justin - I totally broke my own rule there and didn't bother to upload a screenshot. Sorry about that! I think that the width works in comparison to the other elements on the page, see what you think! ​http://drp.ly/11eF4f[[BR]]

As a side note - I just noticed that the R in "No repeat" should be capitalized[[BR]]

As a second side note I'm fairly sure that this screen needs some RTL lovin', but I don't know what the appropriate keyword for that is - was one decided during last week's dev meeting?

[JohnONolan]

Damn BR tag. ​http://drp.ly/11eF4f

[jshreve]

I think that looks good John. It lets us see all the options without having to go into the drop down. I agree on the capital R as well. Consistency is good.

needs-rtl was discussed. I was in and out of the chat so I am not 100% sure if that is what was decided on. I'll add the keyword here in hopes that I'm correct!

[ocean90]

JohnONolan, do not add the padding style to fresh style CSS, better is wp-admin.css.

[johnonolan]

Replaces previous patch of same name, padding on radio buttons moved to correct CSS file. Thx ocean90

[nacin]

(In [14775]) Custom background UI updates. Add padding to radio buttons, also convert repeat/title to radio buttons. props JohnONolan, see #12186.

[ryan]

Remaining issues can go to new tickets.

[ocean90]

The preview of background repeat is broken, because we use now radio buttons.

[automattor]

(In [15079]) Use correct element in jQuery selector. props ocean90, see #12186.