Index: wp-content/themes/twentyeleven/style.css
===================================================================
--- wp-content/themes/twentyeleven/style.css (revision 17808)
+++ wp-content/themes/twentyeleven/style.css (working copy)
@@ -489,9 +489,7 @@
margin: 0 0 4em;
}
#branding img {
- height: auto;
margin-bottom: -7px;
- width: 100%;
}
Index: wp-content/themes/twentyeleven/header.php
===================================================================
--- wp-content/themes/twentyeleven/header.php (revision 17808)
+++ wp-content/themes/twentyeleven/header.php (working copy)
@@ -91,7 +91,7 @@
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
-
+
Index: wp-content/themes/twentyeleven/functions.php
===================================================================
--- wp-content/themes/twentyeleven/functions.php (revision 17808)
+++ wp-content/themes/twentyeleven/functions.php (working copy)
@@ -122,6 +122,14 @@
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 300 ) );
+ /**
+ * Add support for flexible header image height
+ *
+ * For v1 of this feature setting we don't allow setting the max dimensions to something other than HEADER_IMAGE_WIDTH and HEADER_IMAGE_HEIGHT
+ * For Twenty Eleven the upload width is not flexible, but the height is flexible
+ */
+ add_theme_support( 'flexible_header_image_upload', false, true );
+
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall.
// Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php.
Index: wp-admin/custom-header.php
===================================================================
--- wp-admin/custom-header.php (revision 17808)
+++ wp-admin/custom-header.php (working copy)
@@ -288,6 +288,140 @@
}
/**
+ * Get the allowed header image size (width, height) as defined by the theme.
+ *
+ * If enabled, flexible upload dimensions will override legacy HEADER_IMAGE_WIDTH and HEADER_IMAGE_HEIGHT definitions.
+ *
+ * @since 3.2
+ *
+ * @param string Dimension value to return.
+ * @return array
+ */
+ function get_allowed_header_size( $dimension = '' ) {
+ $size = array(
+ 'width' => ( defined( 'HEADER_IMAGE_WIDTH' ) ) ? HEADER_IMAGE_WIDTH : 0,
+ 'height' => ( defined( 'HEADER_IMAGE_HEIGHT' ) ) ? HEADER_IMAGE_HEIGHT : 0
+ );
+
+ // todo enable this once ints are allowed as arguments
+ // $flex_dimensions = get_theme_support( 'flexible_header_image_upload' );
+ // if ( isset( $flex_dimensions[0] ) && false !== $flex_dimensions[0] )
+ // $size['width'] = $flex_dimensions[0];
+ // if ( isset( $flex_dimensions[1] ) && false !== $flex_dimensions[1] )
+ // $size['height'] = $flex_dimensions[1];
+
+ if ( ! empty( $dimension ) && isset( $size[$dimension] ) )
+ return $size[$dimension];
+
+ return $size;
+ }
+
+ /**
+ * Set the parameters used for JS crop tool.
+ * JS reference: http://odyniec.net/projects/imgareaselect/usage.html
+ *
+ * @since 3.2
+ *
+ * @param string Param value to return.
+ * @return array
+ */
+ function get_crop_params( $param = '' ) {
+ $params = array(
+ 'use_aspect_ratio' => false,
+ 'min_width' => 0,
+ 'max_width' => 0,
+ 'min_height' => 0,
+ 'max_height' => 0
+ );
+
+ if ( ! current_theme_supports( 'flexible_header_image_upload' ) ) {
+ // No special params needed. Proceed with normal crop, and for backcompat.
+ $params['use_aspect_ratio'] = true;
+ $params['max_height'] = $this->get_allowed_header_size( 'height' );
+ $params['max_width'] = $this->get_allowed_header_size( 'width' );
+ } else {
+ $args = get_theme_support( 'flexible_header_image_upload' );
+ $is_flexible_width = $args[0];
+ $is_flexible_height = $args[1];
+
+ // Set the crop width parameters.
+ if ( false !== $is_flexible_width ) {
+ // Theme says "allow anything up to my header size." No minimum width needed.
+ $params['max_width'] = $this->get_allowed_header_size( 'width' );
+ } else {
+ // Theme says "no flexible width for this header." Min and max values should be the same.
+ $params['min_width'] = $this->get_allowed_header_size( 'width' );
+ $params['max_width'] = $this->get_allowed_header_size( 'width' );
+ }
+
+ // Set the crop height parameters.
+ if ( false !== $is_flexible_height ) {
+ // Theme says "allow anything up to my header size." No minimum height needed.
+ $params['max_height'] = $this->get_allowed_header_size( 'height' );
+ } else {
+ // Theme says "no flexible height for this header." Min and max values should be the same.
+ $params['min_height'] = $this->get_allowed_header_size( 'height' );
+ $params['max_height'] = $this->get_allowed_header_size( 'height' );
+ }
+ }
+
+ if ( ! empty( $param ) && isset( $params[$param] ) )
+ return $params[$param];
+
+ return $params;
+ }
+
+ /**
+ * Set the crop type based on the uploaded image size versus allowed size.
+ *
+ * @since 3.2
+ *
+ * @param string $width Width of uploaded image.
+ * @param string $height Height of uploaded image.
+ * @return string $crop_type Type of action to take when cropping the image.
+ */
+ function get_crop_type( $width = 0, $height = 0 ) {
+ $allowed_width = $this->get_allowed_header_size( 'width' );
+ $allowed_height = $this->get_allowed_header_size( 'height' );
+
+ // First, let's check if the image needs cropping. If not, exit.
+ if ( $width == $allowed_width && $height == $allowed_height )
+ return 'nocrop';
+
+ if ( ! current_theme_supports( 'flexible_header_image_upload' ) ) {
+ // Default crop, backcompat friendly. Height crop was not a previous feature.
+ return 'crop_to_width';
+ } else {
+ // We have flexibility on our hands.
+ $args = get_theme_support( 'flexible_header_image_upload' );
+ $is_flexible_width = ( false !== $args[0] ) ? true : false;
+ $is_flexible_height = ( false !== $args[1] ) ? true : false;
+
+ // If uploaded size is larger than allowed, let's force it to fit.
+ if ( $width > $allowed_width )
+ $is_flexible_width = false;
+ if ( $height > $allowed_height )
+ $is_flexible_height = false;
+
+ // If uploaded size is smaller than allowed, let's let it upload as is.
+ if ( $width <= $allowed_width )
+ $is_flexible_width = true;
+ if ( $height <= $allowed_height )
+ $is_flexible_height = true;
+
+ if ( $is_flexible_width && $is_flexible_height )
+ return 'nocrop';
+
+ if ( $width > $allowed_width )
+ return 'crop_to_width';
+ elseif ( $height > $allowed_height )
+ return 'crop_to_height';
+ }
+
+ return 'nocrop';
+ }
+
+ /**
* Execute Javascript depending on step.
*
* @since 2.1.0
@@ -356,7 +490,7 @@
jQuery('#defaultcolor').click(function() {
pickColor(default_color);
- jQuery('#text-color').val(default_color)
+ jQuery('#text-color').val(default_color);
});
jQuery('#text-color').keyup(function() {
@@ -395,9 +529,18 @@
/**
* Display Javascript based on Step 2.
*
+ * @uses get_crop_params() to get custom crop parameters.
* @since 2.6.0
*/
- function js_2() { ?>
+ function js_2() {
+
+ // Set crop params
+ $aspect_ratio = ( false !== $this->get_crop_params( 'use_aspect_ratio' ) ? "aspectRatio: xinit + ':' + yinit," : '' );
+ $min_height = ( 0 != $this->get_crop_params( 'min_height' ) ? 'minHeight: ' . $this->get_crop_params( 'min_height' ) . ',' : '' );
+ $max_height = ( 0 != $this->get_crop_params( 'max_height' ) ? 'maxHeight: ' . $this->get_crop_params( 'max_height' ) . ',' : '' );
+ $min_width = ( 0 != $this->get_crop_params( 'min_width' ) ? 'minWidth: ' . $this->get_crop_params( 'min_width' ) . ',' : '' );
+ $max_width = ( 0 != $this->get_crop_params( 'max_width' ) ? 'maxWidth: ' . $this->get_crop_params( 'max_width' ) . ',' : '' );
+?>