<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[BuddyPress][10206] trunk/src/bp-core: Avatar UI: make sure to display the full content of the image during the cropping step.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://buddypress.trac.wordpress.org/changeset/10206">10206</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://buddypress.trac.wordpress.org/changeset/10206","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>imath</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-10-07 16:47:14 +0000 (Wed, 07 Oct 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Avatar UI: make sure to display the full content of the image during the cropping step.
When a user uploads an image to set his avatar, we are saving a temporary version of it resized using the `bp_core_avatar_original_max_width()` dimension (by default 450px). This resized image will be output to the user so that he can edit it during the cropping step. Once the avatar is saved, we are deleting this temporary image.
Sometimes, the Avatar UI width is smaller than this resized version of the image and as a result the image is truncated on its right side (this mainly happens on mobile devices). To avoid this, the Avatar UI is now informing about its available width and if it is smaller than `bp_core_avatar_original_max_width()`. This available width will be used to generate the tempory image so that the full content of the image will be displayed to the user when cropping his avatar.
Fixes <a href="http://buddypress.trac.wordpress.org/ticket/6586">#6586</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcbpcorebpcoreavatarsphp">trunk/src/bp-core/bp-core-avatars.php</a></li>
<li><a href="#trunksrcbpcoreclassesclassbpattachmentavatarphp">trunk/src/bp-core/classes/class-bp-attachment-avatar.php</a></li>
<li><a href="#trunksrcbpcorejsbppluploadjs">trunk/src/bp-core/js/bp-plupload.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcbpcorebpcoreavatarsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-core/bp-core-avatars.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-core/bp-core-avatars.php 2015-10-07 15:56:36 UTC (rev 10205)
+++ trunk/src/bp-core/bp-core-avatars.php 2015-10-07 16:47:14 UTC (rev 10206)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -820,8 +820,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // The Avatar UI available width
+ $ui_available_width = 0;
+
+ // Try to set the ui_available_width using the avatar_admin global
+ if ( isset( $bp->avatar_admin->ui_available_width ) ) {
+ $ui_available_width = $bp->avatar_admin->ui_available_width;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Maybe resize.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $bp->avatar_admin->resized = $avatar_attachment->shrink( $bp->avatar_admin->original['file'] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $bp->avatar_admin->resized = $avatar_attachment->shrink( $bp->avatar_admin->original['file'], $ui_available_width );
</ins><span class="cx" style="display: block; padding: 0 10px"> $bp->avatar_admin->image = new stdClass();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // We only want to handle one image after resize.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -933,6 +941,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $bp->avatar_admin = new stdClass();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * The BuddyPress upload parameters is including the Avatar UI Available width,
+ * add it to the avatar_admin global for a later use.
+ */
+ if ( isset( $bp_params['ui_available_width'] ) ) {
+ $bp->avatar_admin->ui_available_width = (int) $bp_params['ui_available_width'];
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Upload the avatar
</span><span class="cx" style="display: block; padding: 0 10px"> $avatar = bp_core_avatar_handle_upload( $_FILES, $bp_params['upload_dir_filter'] );
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcbpcoreclassesclassbpattachmentavatarphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-core/classes/class-bp-attachment-avatar.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-core/classes/class-bp-attachment-avatar.php 2015-10-07 15:56:36 UTC (rev 10205)
+++ trunk/src/bp-core/classes/class-bp-attachment-avatar.php 2015-10-07 16:47:14 UTC (rev 10206)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -117,6 +117,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Maybe shrink the attachment to fit maximum allowed width.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 2.3.0
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 2.4.0 Add the $ui_available_width parameter, to inform about the Avatar UI width.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @uses bp_core_avatar_original_max_width()
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -124,18 +125,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @return mixed
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public static function shrink( $file = '' ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public static function shrink( $file = '', $ui_available_width = 0 ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> // Get image size
</span><span class="cx" style="display: block; padding: 0 10px"> $avatar_data = parent::get_image_data( $file );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Init the edit args
</span><span class="cx" style="display: block; padding: 0 10px"> $edit_args = array();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Defaults to the Avatar original max width constant.
+ $original_max_width = bp_core_avatar_original_max_width();
+
+ // The ui_available_width is defined and it's smaller than the Avatar original max width
+ if ( ! empty( $ui_available_width ) && $ui_available_width < $original_max_width ) {
+ /**
+ * In this case, to make sure the content of the image will be fully displayed
+ * during the cropping step, let's use the Avatar UI Available width.
+ */
+ $original_max_width = $ui_available_width;
+
+ // $original_max_width has to be larger than the avatar's full width
+ if ( $original_max_width < bp_core_avatar_full_width() ) {
+ $original_max_width = bp_core_avatar_full_width();
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Do we need to resize the image ?
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isset( $avatar_data['width'] ) && $avatar_data['width'] > bp_core_avatar_original_max_width() ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( isset( $avatar_data['width'] ) && $avatar_data['width'] > $original_max_width ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $edit_args = array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'max_w' => bp_core_avatar_original_max_width(),
- 'max_h' => bp_core_avatar_original_max_width(),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'max_w' => $original_max_width,
+ 'max_h' => $original_max_width,
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcbpcorejsbppluploadjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-core/js/bp-plupload.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-core/js/bp-plupload.js 2015-10-07 15:56:36 UTC (rev 10205)
+++ trunk/src/bp-core/js/bp-plupload.js 2015-10-07 16:47:14 UTC (rev 10206)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -60,13 +60,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {plupload.Uploader} uploader Uploader instance.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> this.uploader.bind( 'Init', function( uploader ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var container = $( '#' + self.params.defaults.container ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var container = $( '#' + self.params.defaults.container ),
</ins><span class="cx" style="display: block; padding: 0 10px"> drop_element = $( '#' + self.params.defaults.drop_element );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 'html4' === uploader.runtime ) {
</span><span class="cx" style="display: block; padding: 0 10px"> uploader.settings.multipart_params.html4 = true;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Avatars need to be cropped, by default we are using an original
+ * max width of 450px, but there can be cases when this max width
+ * is larger than the one of the Avatar UI (eg: on mobile). To avoid any
+ * difficulties, we're adding a ui_available_width argument to the bp_params
+ * object and set it according to the container width. This value will be
+ * checked during the upload process to eventually adapt the resized avatar.
+ */
+ if ( 'bp_avatar_upload' === uploader.settings.multipart_params.action ) {
+ uploader.settings.multipart_params.bp_params.ui_available_width = container.width();
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( uploader.features.dragdrop && ! self.params.browser.mobile ) {
</span><span class="cx" style="display: block; padding: 0 10px"> container.addClass( 'drag-drop' );
</span><span class="cx" style="display: block; padding: 0 10px"> drop_element.bind( 'dragover.wp-uploader', function() {
</span></span></pre>
</div>
</div>
</body>
</html>