WordPress.org

Make WordPress Core


Ignore:
Timestamp:
03/11/2014 04:12:17 AM (6 years ago)
Author:
nacin
Message:

Add header image uploads with cropping to the customizer.

props mcsf, ehg, gcorne.
see #21785.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-control.php

    r27431 r27497  
    709709}
    710710
    711 /**
    712  * Customize Header Image Control Class
    713  *
    714  * @package WordPress
    715  * @subpackage Customize
    716  * @since 3.4.0
    717  */
    718 class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
    719     /**
    720      * The processed default headers.
    721      * @since 3.4.2
    722      * @var array
    723      */
    724     protected $default_headers;
    725 
    726     /**
    727      * The uploaded headers.
    728      * @since 3.4.2
    729      * @var array
    730      */
    731     protected $uploaded_headers;
    732 
    733     /**
    734      * Constructor.
    735      *
    736      * @since 3.4.0
    737      * @uses WP_Customize_Image_Control::__construct()
    738      * @uses WP_Customize_Image_Control::add_tab()
    739      *
    740      * @param WP_Customize_Manager $manager
    741      */
     711final class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
     712    public $type = 'header';
     713
    742714    public function __construct( $manager ) {
    743715        parent::__construct( $manager, 'header_image', array(
     
    751723            'removed'  => 'remove-header',
    752724            'get_url'  => 'get_header_image',
    753             'statuses' => array(
    754                 ''                      => __('Default'),
    755                 'remove-header'         => __('No Image'),
    756                 'random-default-image'  => __('Random Default Image'),
    757                 'random-uploaded-image' => __('Random Uploaded Image'),
     725        ) );
     726
     727    }
     728
     729    public function to_json() {
     730        parent::to_json();
     731    }
     732
     733    public function enqueue() {
     734        wp_enqueue_media();
     735        wp_enqueue_script( 'customize-views' );
     736
     737        $this->prepare_control();
     738
     739        wp_localize_script( 'customize-views', '_wpCustomizeHeader', array(
     740            'data' => array(
     741                'width' => absint( get_theme_support( 'custom-header', 'width' ) ),
     742                'height' => absint( get_theme_support( 'custom-header', 'height' ) ),
     743                'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ),
     744                'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ),
     745                'currentImgSrc' => $this->get_current_image_src(),
     746            ),
     747            'nonces' => array(
     748                'add' => wp_create_nonce( 'header-add' ),
     749                'remove' => wp_create_nonce( 'header-remove' ),
     750            ),
     751            'l10n' => array(
     752                /* translators: header images uploaded by user */
     753                'uploaded' => __( 'uploaded' ),
     754                /* translators: header images suggested by the current theme */
     755                'default' => __( 'suggested' )
     756            ),
     757            'uploads' => $this->uploaded_headers,
     758            'defaults' => $this->default_headers
     759        ) );
     760
     761        parent::enqueue();
     762    }
     763
     764    public function get_default_header_images() {
     765        global $custom_image_header;
     766
     767        // Get *the* default image if there is one
     768        $default = get_theme_support( 'custom-header', 'default-image' );
     769
     770        if ( ! $default ) { // If not,
     771            return $custom_image_header->default_headers; // easy peasy.
     772        }
     773
     774        $default = sprintf( $default,
     775            get_template_directory_uri(),
     776            get_stylesheet_directory_uri() );
     777
     778        $header_images = array();
     779        $already_has_default = false;
     780
     781        // Get the whole set of default images
     782        $default_header_images = $custom_image_header->default_headers;
     783        foreach ( $default_header_images as $k => $h ) {
     784            if ( $h['url'] == $default ) {
     785                $already_has_default = true;
     786                break;
     787            }
     788        }
     789
     790        // If *the one true image* isn't included in the default set, add it in
     791        // first position
     792        if ( ! $already_has_default ) {
     793            $header_images['default'] = array(
     794                'url' => $default,
     795                'thumbnail_url' => $default,
     796                'description' => 'Default'
     797            );
     798        }
     799
     800        // The rest of the set comes after
     801        $header_images = array_merge( $header_images, $default_header_images );
     802
     803        return $header_images;
     804    }
     805
     806    public function get_uploaded_header_images() {
     807        $key = '_wp_attachment_custom_header_last_used_' . get_stylesheet();
     808        $header_images = array();
     809
     810        $headers_not_dated = get_posts( array(
     811            'post_type' => 'attachment',
     812            'meta_key' => '_wp_attachment_is_custom_header',
     813            'meta_value' => get_option('stylesheet'),
     814            'orderby' => 'none',
     815            'nopaging' => true,
     816            'meta_query' => array(
     817                array(
     818                    'key' => '_wp_attachment_is_custom_header',
     819                    'value' => get_option( 'stylesheet' ),
     820                    'compare' => 'LIKE'
     821                ),
     822                array(
     823                    'key' => $key,
     824                    'value' => 'this string must not be empty',
     825                    'compare' => 'NOT EXISTS'
     826                ),
    758827            )
    759828        ) );
    760829
    761         // Remove the upload tab.
    762         $this->remove_tab( 'upload-new' );
    763     }
    764 
    765     /**
    766      * Prepares the control.
    767      *
    768      * If no tabs exist, removes the control from the manager.
    769      *
    770      * @since 3.4.2
    771      */
     830        $headers_dated = get_posts( array(
     831            'post_type' => 'attachment',
     832            'meta_key' => $key,
     833            'orderby' => 'meta_value_num',
     834            'order' => 'DESC',
     835            'nopaging' => true,
     836            'meta_query' => array(
     837                array(
     838                    'key' => '_wp_attachment_is_custom_header',
     839                    'value' => get_option( 'stylesheet' ),
     840                    'compare' => 'LIKE'
     841                ),
     842            ),
     843        ) );
     844
     845        $limit = apply_filters( 'custom_header_uploaded_limit', 15 );
     846        $headers = array_merge( $headers_dated, $headers_not_dated );
     847        $headers = array_slice( $headers, 0, $limit );
     848
     849        foreach ( (array) $headers as $header ) {
     850            $url = esc_url_raw( $header->guid );
     851            $header_data = wp_get_attachment_metadata( $header->ID );
     852            $timestamp = get_post_meta( $header->ID,
     853                '_wp_attachment_custom_header_last_used_' . get_stylesheet(),
     854                true );
     855
     856            $h = array(
     857                'attachment_id' => $header->ID,
     858                'url'           => $url,
     859                'thumbnail_url' => $url,
     860                'timestamp'     => $timestamp ? $timestamp : 0,
     861            );
     862
     863            if ( isset( $header_data['width'] ) ) {
     864                $h['width'] = $header_data['width'];
     865            }
     866            if ( isset( $header_data['height'] ) ) {
     867                $h['height'] = $header_data['height'];
     868            }
     869
     870            $header_images[] = $h;
     871        }
     872
     873        return $header_images;
     874    }
     875
    772876    public function prepare_control() {
    773877        global $custom_image_header;
    774         if ( empty( $custom_image_header ) )
    775             return parent::prepare_control();
     878        if ( empty( $custom_image_header ) ) {
     879            return;
     880        }
    776881
    777882        // Process default headers and uploaded headers.
    778883        $custom_image_header->process_default_headers();
    779         $this->default_headers = $custom_image_header->default_headers;
    780         $this->uploaded_headers = get_uploaded_header_images();
    781 
    782         if ( $this->default_headers )
    783             $this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_headers' ) );
    784 
    785         if ( ! $this->uploaded_headers )
    786             $this->remove_tab( 'uploaded' );
    787 
    788         return parent::prepare_control();
    789     }
    790 
    791     /**
    792      * @since 3.4.0
    793      *
    794      * @param mixed $choice Which header image to select. (@see Custom_Image_Header::get_header_image() )
    795      * @param array $header
    796      */
    797     public function print_header_image( $choice, $header ) {
    798         $header['url']           = set_url_scheme( $header['url'] );
    799         $header['thumbnail_url'] = set_url_scheme( $header['thumbnail_url'] );
    800 
    801         $header_image_data = array( 'choice' => $choice );
    802         foreach ( array( 'attachment_id', 'width', 'height', 'url', 'thumbnail_url' ) as $key ) {
    803             if ( isset( $header[ $key ] ) )
    804                 $header_image_data[ $key ] = $header[ $key ];
    805         }
    806 
    807 
     884        $this->default_headers = $this->get_default_header_images();
     885        $this->uploaded_headers = $this->get_uploaded_header_images();
     886    }
     887
     888    function print_header_image_template() {
    808889        ?>
    809         <a href="#" class="thumbnail"
    810             data-customize-image-value="<?php echo esc_url( $header['url'] ); ?>"
    811             data-customize-header-image-data="<?php echo esc_attr( json_encode( $header_image_data ) ); ?>">
    812             <img src="<?php echo esc_url( $header['thumbnail_url'] ); ?>" />
    813         </a>
     890        <script type="text/template" id="tmpl-header-choice">
     891            <# if (data.random) { #>
     892
     893            <div class="placeholder random">
     894                <div class="inner">
     895                    <span><span class="dice">&#9860;</span>
     896                    <# if ( data.type === 'uploaded' ) { #>
     897                        <?php _e( 'Randomize uploaded headers' ); ?>
     898                    <# } else if ( data.type === 'suggested' ) { #>
     899                        <?php _e( 'Randomize suggested headers' ); ?>
     900                    <# } #>
     901                    </span>
     902                </div>
     903            </div>
     904
     905            <# } else { #>
     906
     907            <# if (data.type === 'uploaded') { #>
     908            <div class="dashicons dashicons-no close"></div>
     909            <# } #>
     910
     911            <a href="#" class="choice thumbnail #>"
     912                data-customize-image-value="{{{data.header.url}}}"
     913                data-customize-header-image-data="{{JSON.stringify(data.header)}}">
     914                <img src="{{{data.header.thumbnail_url}}}">
     915            </a>
     916
     917            <# } #>
     918        </script>
     919
     920        <script type="text/template" id="tmpl-header-current">
     921            <# if (data.choice) { #>
     922                <# if (data.random) { #>
     923
     924            <div class="placeholder">
     925                <div class="inner">
     926                    <span><span class="dice">&#9860;</span>
     927                    <# if ( data.type === 'uploaded' ) { #>
     928                        <?php _e( 'Randomizing uploaded headers' ); ?>
     929                    <# } else if ( data.type === 'suggested' ) { #>
     930                        <?php _e( 'Randomizing suggested headers' ); ?>
     931                    <# } #>
     932                    </span>
     933                </div>
     934            </div>
     935
     936                <# } else { #>
     937
     938            <img src="{{{data.header.thumbnail_url}}}" />
     939
     940                <# } #>
     941            <# } else { #>
     942
     943            <div class="placeholder">
     944                <div class="inner">
     945                    <span>
     946                        <?php _e( 'No image set' ); ?>
     947                    </span>
     948                </div>
     949            </div>
     950
     951            <# } #>
     952        </script>
    814953        <?php
    815954    }
    816955
    817     /**
    818      * @since 3.4.0
    819      */
    820     public function tab_uploaded() {
    821         ?><div class="uploaded-target"></div><?php
    822 
    823         foreach ( $this->uploaded_headers as $choice => $header )
    824             $this->print_header_image( $choice, $header );
    825     }
    826 
    827     /**
    828      * @since 3.4.0
    829      */
    830     public function tab_default_headers() {
    831         foreach ( $this->default_headers as $choice => $header )
    832             $this->print_header_image( $choice, $header );
     956    public function get_current_image_src() {
     957        $src = $this->value();
     958        if ( isset( $this->get_url ) ) {
     959            $src = call_user_func( $this->get_url, $src );
     960            return $src;
     961        }
     962        return null;
     963    }
     964
     965    public function render_content() {
     966        $this->print_header_image_template();
     967        $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
     968        $width = absint( get_theme_support( 'custom-header', 'width' ) );
     969        $height = absint( get_theme_support( 'custom-header', 'height' ) );
     970        ?>
     971
     972
     973        <div class="customize-control-content">
     974            <p class="customizer-section-intro">
     975                <?php _e( 'Personalize your site with your own header image.' ); ?>
     976                <?php
     977                if ( $width && $height ) {
     978                    printf( __( 'While you can crop images to your liking after clicking <strong>%s</strong>, your theme recommends a header size of <strong>%dx%d</strong> pixels.' ),
     979                        _x( 'Add new', 'header image' ), $width, $height );
     980                } else {
     981                    if ( $width ) {
     982                        printf( __( 'While you can crop images to your liking after clicking <strong>%s</strong>, your theme recommends a header width of <strong>%d</strong> pixels.' ),
     983                            _x( 'Add new', 'header image' ), $width );
     984                    }
     985                    if ( $height ) {
     986                        printf( __( 'While you can crop images to your liking after clicking <strong>%s</strong>, your theme recommends a header height of <strong>%d</strong> pixels.' ),
     987                            _x( 'Add new', 'header image' ), $height );
     988                    }
     989                }
     990                ?>
     991            </p>
     992            <div class="current">
     993                <span class="customize-control-title">
     994                    <?php _e( 'Current header' ); ?>
     995                </span>
     996                <div class="container">
     997                </div>
     998            </div>
     999            <div class="actions">
     1000                <?php /* translators: Hide as in hide header image via the Customizer */ ?>
     1001                <a href="#" <?php echo $visibility ?> class="button remove"><?php _ex( 'Hide', 'custom header' ); ?></a>
     1002                <?php /* translators: New as in add new header image via the Customizer */ ?>
     1003                <a href="#" class="button new"><?php _ex( 'Add new', 'header image' ); ?></a>
     1004                <div style="clear:both"></div>
     1005            </div>
     1006            <div class="choices">
     1007                <span class="customize-control-title header-previously-uploaded">
     1008                    <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
     1009                </span>
     1010                <div class="uploaded">
     1011                    <div class="list">
     1012                    </div>
     1013                </div>
     1014                <span class="customize-control-title header-default">
     1015                    <?php _ex( 'Suggested', 'custom headers' ); ?>
     1016                </span>
     1017                <div class="default">
     1018                    <div class="list">
     1019                    </div>
     1020                </div>
     1021            </div>
     1022        </div>
     1023        <?php
    8331024    }
    8341025}
Note: See TracChangeset for help on using the changeset viewer.