WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 5 weeks ago

#26386 closed enhancement (duplicate)

Add fixed full screen background option to custom backgrounds

Reported by: shelob9 Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

The options for custom backgrounds have become a little dated, for example: tiled image backgrounds. A good place to start in updating the functionality of custom backgrounds to fit the needs of modern web design is to enable fixed full screen backgrounds.

I think that in order to do this the following is necessary:

  1. Create a function in wp-includes/theme.php to handle the CSS for fixed backgrounds to be used in _custom_background_cb() to handle front-end css and custom_background::admin_page() to handle the background preview css in the back-end.
  1. Use that new function in _custom_background_cb()
  1. Use that new function in custom_background::admin_page()
  1. Create a full screen option in the custom background options in the admin page.
  1. Create a full screen option in the custom background options in the theme customizer.

I am attaching a patch that addressed items 1-4. I don't think my patch is the actual solution for this. It doesn't address the theme customizer and I think it suggests a need to address the Background Attachment option as well. Feedback on those two aspects is especially appreciated, as well as any other feedback about my patch.

Ticket #25569, which makes a strong case for getting rid of the custom background page, is a related issue worth considering along with this.

Attachments (3)

full-screen-bg.diff (4.1 KB) - added by shelob9 3 years ago.
26386.2.diff (744 bytes) - added by Shelob9 3 years ago.
Adds a filter to _custom_background_cb() to override $style
26386.3.diff (4.9 KB) - added by hennell 21 months ago.
Add background size option to customizer & custom background options.

Download all attachments as: .zip

Change History (19)

#1 @shelob9
3 years ago

  • Keywords has-patch ui-feedback 2nd-opinion added

#2 @shelob9
3 years ago

  • Keywords 2nd-opinion removed

#3 @dreamwhisper
3 years ago

  • Cc dreamwhisper added

#4 follow-up: @nacin
3 years ago

  • Component changed from General to Appearance

obenland?

#5 in reply to: ↑ 4 @obenland
3 years ago

Replying to nacin:

obenland?

Hm, was not pinged by that. :/ Discovered it while looking for something else.

I can give the patch a run tomorrow.

#6 @obenland
3 years ago

  • Focuses ui added

Some thoughts:

  • To cover the background, we have to set background-repeat, background-position, and background-attachment to certain values, very possibly overriding user settings.
  • This will most likely cause UX issues.
  • There seems to be no sustainable way to support IE8 and older. #, #. Backwards compatibility is hacky at best.

#7 @Shelob9
3 years ago

@obenland-

jQuery Backstretch supports IE8, possibly earlier, not sure. I'd be happy to make a new patch to demonstrate that. That would be my preferred solution, but would necessitate bundling backstretch with core, which is possible as Backstretch is MIT-licensed.

#8 @celloexpressions
3 years ago

Not sure that it's worth worrying much about IE8 at this point, as Windows XP will officially be EOL before WordPress 3.9 is released, and usage should drop significantly at that point.

In terms of the usability issues, maybe it's worth removing all of the currently visible options and re-building a UI that sets the necessary combinations of the options to achieve different effects. Options like background repeat, background position, and background attachment basically just expose users to CSS; users who know exactly how to configure these probably know CSS anyway and could implement them directly if specific effects are desired.

If we really want to keep the current UI conventions, we should probably just add a background size radio option. But this would be a good opportunity to replace the existing three sets of radio options with a single set featuring the most common combinations of repeat, position, attachment, and size. I'm not sure what those options would be, but full-screen fixed would certainly be one of them. For back-compat we could make the new options set values for each of the old options behind-the-scenes.

#9 @helen
3 years ago

  • Keywords ui-feedback removed

I don't love the idea of core support for this right now, and let's definitely not do any JS stuff for back compat. That's not to say the idea can't be explored, I am just kind of wary of it.

There's another angle, I think - are there things core maybe could do to support a theme that wants to implement this?

#10 @Shelob9
3 years ago

@helen

What would make it super simple to implement full screen backgrounds from a theme or plugin, using the existing custom background settings would be a filter for the variable $style in _custom_background_cb()

In addition, the ability to add additional background options via a filter in Custom_Background::admin_page() would be helpful. That said, ticket #25569, makes a pretty good case for getting rid of the custom background admin page all together, as it's redundant to the background setting in the theme customizer.

@Shelob9
3 years ago

Adds a filter to _custom_background_cb() to override $style

#11 @Shelob9
3 years ago

I uploaded a patch 26386.2.diff​ that adds the filter I was talking about. Here is example usage:

add_filter('custom_background_style', 'slug_full_screen_bg', 10, 2 );
function slug_full_screen_bg( $style, $background ) {
    if ( $background != '' ) {
        $style = "background-repeat: no-repeat; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-attachment:fixed;background-position:center;";
        $style .= " background-image: url('$background');";
    }
    return $style;
}

This example, to be used in a theme or plugin, creates a full-screen background if an image is set in custom backgrounds, and just outputs the background-color rule and value if none is set.

Last edited 3 years ago by helen (previous) (diff)

#12 @Shelob9
3 years ago

Last edited 3 years ago by Shelob9 (previous) (diff)

#13 @hennell
21 months ago

Trying to get a user customisable full screen or tillable images in a theme I realised this issue could be relativity easily patched just by extending the existing options for the background. It's pretty much as celloexpressions said; exposing a background size radio option within the existing UI.

It would be preferable to see more user friendly terms on this whole UI but given this is a year old issue with little action maybe this quick fix could offer the functionality until the significant changes are developed?

Notes:

  • Patch only offers 'Auto' (default), 'Cover' and 'Contain' options as custom percentage or size value options required more complex changes (and are far less useful).
  • Using anything but 'auto' with any tile option can make for some odd effects.
  • 'Cover' and 'Contain' are the CSS property names, but not exactly self-explanatory. The preview makes it somewhat obvious what they do, but it is adding yet more CSS terms to this page.

@hennell
21 months ago

Add background size option to customizer & custom background options.

#14 @ToBeFree
17 months ago

This issue is now over 16 months old, and the last change was four months ago. I have only recently heard about the nice "background-size: cover;" CSS option, and I am already happily using it for my self-built simple-HTML landing page. However, for my Wordpress sites, I have always missed such a feature. When using a photo as background, it is very hard to achieve a good-looking result without "background-size: cover;". Even in Wordpress 4.1.1, I can only use a much-too-large background image to prevent tiling, and that seldom looks nice.

This ticket was mentioned in Slack in #core by swissspidy. View the logs.


9 months ago

#16 @celloexpressions
5 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Closing in favor of #22058, which now contains a comprehensive redesign of the custom background options, including the addition of a background-size option. With that in place, we could also look at ways to simplify the UI in terms of presenting (way) too many options, based on the size/aspect ratio of the selected image with more selective showing/hiding of the various options.

Note: See TracTickets for help on using tickets.