WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 6 years ago

#5591 closed enhancement (fixed)

Use jQuery for Custom Image Header

Reported by: ryan Owned by: rmccue
Milestone: 2.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: jquery has-patch needs-testing
Focuses: Cc:

Description

As part of our conversion to jQuery, let's convert wp-admin/custom-header.php to jQuery plus something like farbtastic for the colorpicker. I'm not sure what to use for the cropper. Interface has some crop code, but interface isn't actively maintained these days. It might still be useful for the crop code, however.

http://acko.net/dev/farbtastic

Attachments (6)

farbtastic.diff (50.1 KB) - added by rmccue 7 years ago.
Convert custom-header.php to jQuery
farbtastic.2.diff (20.4 KB) - added by rmccue 7 years ago.
Leave colorpicker.js in for backwards compat.
marker.png (652 bytes) - added by rmccue 7 years ago.
marker.png from Farbtastic, goes in wp-admin/css/
mask.png (2.0 KB) - added by rmccue 7 years ago.
mask.png from Farbtastic, goes in wp-admin/css/
wheel.png (11.5 KB) - added by rmccue 7 years ago.
wheel.png from Farbtastic, goes in wp-admin/css/
farbtastic.3.diff (20.5 KB) - added by rmccue 7 years ago.
Default now works properly

Download all attachments as: .zip

Change History (14)

comment:1 @tellyworth8 years ago

There's a jQuery color picker plugin:

http://plugins.jquery.com/project/color-picker

Also an image cropper here:

http://interface.eyecon.ro/demos/resize.html

It's based on Interface Elements for jQuery.

Can't vouch for either other than a quick test (they look ok in Safari).

comment:2 @rmccue8 years ago

  • Owner changed from anonymous to rmccue

Mine! All mine!
I'm integrating Farbtastic at the moment.
However, there's no suitable alternative for Cropper, so we're going to leave that for the moment. The interface plugin mentioned above leaves artifacts when dragging.

comment:3 @Viper007Bond7 years ago

  • Component changed from General to Administration
  • Keywords needs-patch added
  • Type changed from defect to enhancement

+1 for Farbtastic. It's f'ing awesome (using it in one of my upcoming plugins).

@rmccue7 years ago

Convert custom-header.php to jQuery

comment:4 @rmccue7 years ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Status changed from new to assigned

Added patch to convert everything to jQuery except the cropper. Farbtastic is now also included (images in wp-admin/images/, farbtastic.css in wp-admin/css/ and farbtastic.js in wp-admin/js/) as a replacement for colorpicker.

@rmccue7 years ago

Leave colorpicker.js in for backwards compat.

@rmccue7 years ago

marker.png from Farbtastic, goes in wp-admin/css/

@rmccue7 years ago

mask.png from Farbtastic, goes in wp-admin/css/

@rmccue7 years ago

wheel.png from Farbtastic, goes in wp-admin/css/

comment:5 @rmccue7 years ago

Sorry, all those images go in wp-admin/images/ instead.

@rmccue7 years ago

Default now works properly

comment:6 @ryan7 years ago

(In [8760]) Use farbtastic for custom header color picker. Props rmmccue. see #5591

comment:7 @momo360modena7 years ago

Small suggestion, replace Prototype cropper by jQuery clone

http://odyniec.net/projects/imgareaselect/examples.php

comment:8 @Denis-de-Bernardy6 years ago

  • Milestone changed from 2.9 to 2.7
  • Resolution set to fixed
  • Status changed from accepted to closed
Note: See TracTickets for help on using tickets.