Add an option to configure the site icon in general settings #6064
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| (function($) { | ||
| var frame; | ||
|
|
||
| function calculateImageSelectOptions ( attachment ) { | ||
| var realWidth = attachment.get( 'width' ), | ||
| realHeight = attachment.get( 'height' ), | ||
| xInit = 512, | ||
| yInit = 512, | ||
| ratio = xInit / yInit, | ||
| xImg = xInit, | ||
| yImg = yInit, | ||
| x1, y1, imgSelectOptions; | ||
|
|
||
| if ( realWidth / realHeight > ratio ) { | ||
| yInit = realHeight; | ||
| xInit = yInit * ratio; | ||
| } else { | ||
| xInit = realWidth; | ||
| yInit = xInit / ratio; | ||
| } | ||
|
|
||
| x1 = ( realWidth - xInit ) / 2; | ||
| y1 = ( realHeight - yInit ) / 2; | ||
|
|
||
| imgSelectOptions = { | ||
| aspectRatio: xInit + ':' + yInit, | ||
| handles: true, | ||
| keys: true, | ||
| instance: true, | ||
| persistent: true, | ||
| imageWidth: realWidth, | ||
| imageHeight: realHeight, | ||
| minWidth: xImg > xInit ? xInit : xImg, | ||
| minHeight: yImg > yInit ? yInit : yImg, | ||
| x1: x1, | ||
| y1: y1, | ||
| x2: xInit + x1, | ||
| y2: yInit + y1 | ||
| }; | ||
|
|
||
| return imgSelectOptions; | ||
| } | ||
|
|
||
| $( function() { | ||
| // Build the choose from library frame. | ||
| $( '#choose-from-library-link' ).on( 'click', function() { | ||
| var $el = $(this); | ||
|
|
||
| // Create the media frame. | ||
| frame = wp.media({ | ||
| button: { | ||
| // Set the text of the button. | ||
| text: $el.data('update'), | ||
| // Don't close, we might need to crop. | ||
| close: false | ||
| }, | ||
| states: [ | ||
| new wp.media.controller.Library({ | ||
| title: $el.data( 'choose' ), | ||
| library: wp.media.query({ type: 'image' }), | ||
| date: false, | ||
| suggestedWidth: $el.data( 'size' ), | ||
| suggestedHeight: $el.data( 'size' ) | ||
| }), | ||
| new wp.media.controller.SiteIconCropper({ | ||
| control: { | ||
| params: { | ||
| width: $el.data( 'size' ), | ||
| height: $el.data( 'size' ) | ||
| } | ||
| }, | ||
| imgSelectOptions: calculateImageSelectOptions | ||
| }) | ||
| ] | ||
| }); | ||
|
|
||
| frame.on( 'cropped', function( attachment) { | ||
| $( '#site_icon_hidden_field' ).val(attachment.id); | ||
| switchToUpdate(attachment.url); | ||
| frame.close(); | ||
| // Start over with a frame that is so fresh and so clean clean. | ||
| frame = null; | ||
| }); | ||
|
|
||
| // When an image is selected, run a callback. | ||
| frame.on( 'select', function() { | ||
| // Grab the selected attachment. | ||
| var attachment = frame.state().get('selection').first(); | ||
|
|
||
| if ( attachment.attributes.height === $el.data('size') && $el.data('size') === attachment.attributes.width ) { | ||
| // Set the value of the hidden input to the attachment id. | ||
| $( '#site_icon_hidden_field').val(attachment.id); | ||
| switchToUpdate(attachment.attributes.url); | ||
| frame.close(); | ||
| } else { | ||
| frame.setState( 'cropper' ); | ||
| } | ||
| }); | ||
|
|
||
| frame.open(); | ||
| }); | ||
| }); | ||
|
|
||
| function switchToUpdate( url ){ | ||
| // Set site-icon-img src to the url and remove the hidden class. | ||
| $( '#site-icon-preview').find('img').not('.browser-preview').each( function(i, img ){ | ||
| $(img).attr('src', url ); | ||
| }); | ||
| $( '#site-icon-preview' ).removeClass( 'hidden' ); | ||
| // Remove hidden class from remove. | ||
| $( '#js-remove-site-icon' ).removeClass( 'hidden' ); | ||
| // If the button is not in the update state, swap the classes. | ||
| if( $( '#choose-from-library-link' ).attr( 'data-state' ) !== '1' ){ | ||
| var classes = $( '#choose-from-library-link' ).attr( 'class' ); | ||
| $( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr('data-alt-classes') ); | ||
| $( '#choose-from-library-link' ).attr( 'data-alt-classes', classes ); | ||
| $( '#choose-from-library-link' ).attr( 'data-state', '1' ); | ||
| } | ||
|
|
||
| // swap the text of the button | ||
| $( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-update-text' ) ); | ||
| } | ||
|
|
||
| $( '#js-remove-site-icon' ).on( 'click', function() { | ||
| $( '#site_icon_hidden_field' ).val( 'false' ); | ||
| $( '#site-icon-preview' ).toggleClass( 'hidden' ); | ||
| $( this ).toggleClass( 'hidden' ); | ||
|
|
||
| var classes = $( '#choose-from-library-link' ).attr( 'class' ); | ||
| $( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr( 'data-alt-classes' ) ); | ||
| $( '#choose-from-library-link' ).attr( 'data-alt-classes', classes ); | ||
|
|
||
| // Swap the text of the button. | ||
| $( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-choose-text' ) ); | ||
| // Set the state of the button so it can be changed on new icon. | ||
| $( '#choose-from-library-link' ).attr( 'data-state', ''); | ||
| }); | ||
| }(jQuery)); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -97,7 +97,86 @@ | |
| <p class="description" id="tagline-description"><?php echo $tagline_description; ?></p></td> | ||
| </tr> | ||
|
|
||
| <?php if ( current_user_can( 'upload_files' ) ) : ?> | ||
| <tr class="hide-if-no-js site-icon-section"> | ||
| <th scope="row"><?php _e( 'Site Icon' ); ?></th> | ||
| <td> | ||
| <?php | ||
| wp_enqueue_media(); | ||
| wp_enqueue_script( 'site-icon' ); | ||
|
|
||
| $classes_for_upload_button = 'upload-button button-add-media button-add-site-icon'; | ||
| $classes_for_update_button = 'button'; | ||
|
|
||
| $classes_for_avatar = 'avatar avatar-150'; | ||
| if ( has_site_icon() ) { | ||
| $classes_for_avatar .= ' has-site-icon'; | ||
| $classes_for_button = $classes_for_update_button; | ||
| $classes_for_button_on_change = $classes_for_upload_button; | ||
| } else { | ||
| $classes_for_avatar .= ' hidden'; | ||
| $classes_for_button = $classes_for_upload_button; | ||
| $classes_for_button_on_change = $classes_for_update_button; | ||
| } | ||
aaronjorbin marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
|
|
||
| ?> | ||
| <div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>"> | ||
| <div class="favicon-preview"> | ||
| <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt=""> | ||
| <div class="favicon"> | ||
| <img src="<?php site_icon_url(); ?>" alt="Preview as a browser icon"> | ||
|
Contributor
There was a problem hiding this comment. the alt text is not translatable |
||
| </div> | ||
| <span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span> | ||
| </div> | ||
| <img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="Preview as an app icon"> | ||
|
Contributor
There was a problem hiding this comment. the alt text is not translatable |
||
| </div> | ||
| <input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" /> | ||
| <p> | ||
| <button type="button" | ||
| id="choose-from-library-link" | ||
| type="button" | ||
| class="<?php echo esc_attr( $classes_for_button ); ?>" | ||
| data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>" | ||
| data-size="512" | ||
| data-choose-text="<?php esc_attr_e( 'Choose a Site Icon' ); ?>" | ||
aaronjorbin marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| data-update-text="<?php esc_attr_e( 'Change Site Icon' ); ?>" | ||
| data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>" | ||
| data-state="<?php echo esc_attr( has_site_icon() ); ?>" | ||
|
|
||
| > | ||
| <?php if ( has_site_icon() ) : ?> | ||
| <?php _e( 'Change Site Icon' ); ?> | ||
| <?php else : ?> | ||
| <?php _e( 'Choose a Site Icon' ); ?> | ||
|
|
||
| <?php endif; ?> | ||
| </button> | ||
| <button | ||
aaronjorbin marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| id="js-remove-site-icon" | ||
| type="button" | ||
| <?php echo has_site_icon() ? 'class="button button-secondary reset"' : 'class="button button-secondary reset hidden"'; ?> | ||
| > | ||
| <?php _e( 'Remove Site Icon' ); ?> | ||
|
Contributor
There was a problem hiding this comment. Make casing consistent. I think 'site icon' should probably be lowercased in all instances, matching the 'Change site icon' text.
Contributor
There was a problem hiding this comment. Sentence cased, technically. |
||
| </button> | ||
| </p> | ||
|
|
||
| <p class="description" id="site-icon-description"> | ||
aaronjorbin marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?> | ||
| </p> | ||
| <p class="description" id="site-icon-further-description"> | ||
|
Contributor
There was a problem hiding this comment. Not sure the id is actually used anywhere
Member
Author
There was a problem hiding this comment. IDs are used for descriptions throughout this page, so this keeps consistency.
Contributor
There was a problem hiding this comment. Late to the party but I'm not sure this is correct. IDs are used on this page but only when they're referenced by an |
||
| <?php | ||
| /* translators: %s: Site Icon size in pixels. */ | ||
| printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 × 512</strong>' ); | ||
| ?> | ||
| </p> | ||
|
|
||
| </td> | ||
| </tr> | ||
|
|
||
| <?php | ||
| endif; | ||
| /* End Site Icon */ | ||
|
|
||
| if ( ! is_multisite() ) { | ||
| $wp_site_url_class = ''; | ||
| $wp_home_class = ''; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -90,6 +90,7 @@ | |
| 'general' => array( | ||
| 'blogname', | ||
| 'blogdescription', | ||
| 'site_icon', | ||
| 'gmt_offset', | ||
| 'date_format', | ||
| 'time_format', | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -849,6 +849,7 @@ | |
| height: 100%; | ||
| } | ||
|
|
||
| .options-general-php .crop-content.site-icon, | ||
| .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon { | ||
| margin-right: 300px; | ||
| } | ||
|
|
@@ -2560,6 +2561,10 @@ | |
| width: 230px; | ||
| } | ||
|
|
||
| .options-general-php .crop-content.site-icon { | ||
| margin-right: 262px; | ||
| } | ||
|
|
||
| .attachments-browser .attachments, | ||
| .attachments-browser .uploader-inline, | ||
| .attachments-browser .media-toolbar, | ||
|
|
@@ -2827,6 +2832,10 @@ | |
| position: fixed; | ||
| } | ||
|
|
||
| .options-general-php .crop-content.site-icon { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| .media-sidebar { | ||
| z-index: 1900; | ||
| max-width: 70%; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -849,6 +849,8 @@ function wp_default_scripts( $scripts ) { | |
|
|
||
| $scripts->add( 'wp-lists', "/wp-includes/js/wp-lists$suffix.js", array( 'wp-ajax-response', 'jquery-color' ), false, 1 ); | ||
|
|
||
| $scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery', 'jcrop' ), false, 1 ); | ||
|
|
||
| // WordPress no longer uses or bundles Prototype or script.aculo.us. These are now pulled from an external source. | ||
| $scripts->add( 'prototype', 'https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js', array(), '1.7.1' ); | ||
| $scripts->add( 'scriptaculous-root', 'https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js', array( 'prototype' ), '1.9.0' ); | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.