Make file/file_list field preview images work with named sizes #848

Cai333 · 2017-01-27T16:49:08Z

Fixes #844.

Add some utility methods for working with named images.
Filter the attachment meta data passed to the JS media uploader and adds all custom
(i.e. registered with add_image_size()) image sizes.
File and File List fields try to get the closest named image size if passed an array for the preview_size parameter. If passed a string, the string is checked against existing image sizes. The named size is then passed as a data attribute to the hidden field to be used by the JS media uploader.
The JavaScript that handles the media uploader now checks the named size passed from the hidden field and retrieves the correct image from the attachment object returned by the media uploader. The dimensions are then adjusted to fit within the preview size (rather than being stretched as they were before).
Changed the default preview_size from 350x350px (for file fields) and 50x50px (for file_list fields) to the named sizes large and thumbnail respectively.

Methods for getting all available image sizes and returning a named image size from an array of values without passing an actual image are needed to output the correct images from the JS media uploader.

Filter doesn’t get called if hooked from CMB2_JS or elsewhere, I assume the filter is added too late. Probably needs a better home; calling from cmb2_bootstrap() for now.

…' fields In CMB2_Type_File[_List].php – try to get the closest named image size from the ‘preview_size’ array and get the correct width and height from the named size. Pass the named size string as well as the dimensions to the hidden field to be used by the JS media uploader. In cmb2.js we can then retrieve the correct image (url and dimensions) form the returned JS attachment object. Added logic to fit the image to the preview size rather than stretching the image. Updated the default preview sizes from the hardcoded 350x350px and 50x50px to ‘large’ and ‘thumbnail’. Fixes CMB2#844

Consistent with the behaviour of wp_get_attachment_image() (otherwise we may get different preview sizes before/after reload).

jtsternberg

Overall, this is a pretty great PR. I have not tested it, but after a code review, it looks very promising. I have left several inline comments, but here are some additional thoughts:

The changes in CMB2_Type_File and CMB2_Type_File_List share similar functionality to get the image size. It would be best to move that inline and repeated logic to a utility method in their base class, CMB2_Type_File_Base.

The same goes for your JS updates.. Much of that should probably moved to methods to not have repeated logic/blocks of code.

Your last update, "Changed the default preview_size from 350x350px (for file fields) and 50x50px (for file_list fields) to the named sizes large and thumbnail respectively." will be a problem for back-compatibility, so we should remove that change.

jtsternberg · 2017-01-27T16:53:09Z

includes/CMB2_Field.php

@@ -1093,7 +1093,7 @@ public function _set_field_defaults( $args ) {
 			'date_format'       => 'm\/d\/Y',
 			'time_format'       => 'h:i A',
 			'description'       => isset( $args['desc'] ) ? $args['desc'] : '',
-			'preview_size'      => 'file' == $args['type'] ? array( 350, 350 ) : array( 50, 50 ),
+			'preview_size'      => 'file' == $args['type'] ? 'large' : 'thumbnail',


This is problematic for back-compatibility. This can't really change.

jtsternberg · 2017-01-27T17:02:23Z

includes/CMB2_Utils.php

+	 * @return false|string $data Named image size e.g. 'thumbnail'.
+	 */
+	public static function get_named_size( $size ) {
+		$image_sizes = self::get_available_image_sizes();


i'd move this inside the if ( is_array( $size ) ) { condition since it's not needed otherwise.

jtsternberg · 2017-01-27T17:06:43Z

includes/types/CMB2_Type_File.php

@@ -28,7 +60,8 @@ public function render() {
 			'class' => 'cmb2-upload-file regular-text',
 			'size'  => 45,
 			'desc'  => '',
-			'data-previewsize' => is_array( $img_size ) ? '[' . implode( ',', $img_size ) . ']' : 350,
+			'data-previewsize' => sprintf( '[%s,%s]', $size_width, $size_height ),


Couldn't this be '[%d,%d]'?

jtsternberg · 2017-01-27T17:08:48Z

includes/types/CMB2_Type_File_List.php

@@ -55,7 +87,7 @@ public function render() {
 				if ( $this->is_valid_img_ext( $fullurl ) ) {

 					$output .= $this->img_status_output( array(
-						'image'    => wp_get_attachment_image( $id, $img_size ),
+						'image'    => wp_get_attachment_image( $id, $img_size, null, array( 'class' => 'cmb-file_list-field-image', 'style' => 'height: auto;' ) ),


We should probably abandon the inlines styles here.

The 'auto' height is needed to stop the images being squashed if they're over the max-height that's set in the css, adding it here is probably just lazy though. I'll look at just adding it to the existing css.

jtsternberg · 2017-01-27T17:15:44Z

includes/CMB2_JS.php

+	 * @param  array      $meta       Array of attachment meta data ( from wp_get_attachment_metadata() ).
+	 * @return string     filtered $response array
+	 */
+	public static function prepare_image_sizes_for_js( $response, $attachment, $meta ) {


It's tough to know the best place for these things, but I feel like this static method would be better suited for CMB2_Type_File_Base.

And to hook it in, I'd probably do something similar to the other field-specific stuff, like oembed ajax hooks:

if ( in_array( $field['type'], array( 'file', 'file_list' ) ) ) { // Initiate attachment JS hooks add_filter( 'wp_prepare_attachment_for_js', 'CMB2_Type_File_Base::prepare_image_sizes_for_js', 10, 3 ); }

Honestly, it was a struggle trying to decide where to hook this in, this sounds better!

jtsternberg · 2017-01-27T17:28:03Z

includes/types/CMB2_Type_File.php

@@ -74,10 +107,9 @@ public function render() {
 			if ( $this->is_valid_img_ext( $meta_value ) ) {

 				if ( $_id_value ) {
-					$image = wp_get_attachment_image( $_id_value, $img_size, null, array( 'class' => 'cmb-file-field-image' ) );
+					$image = wp_get_attachment_image( $_id_value, $img_size, null, array( 'class' => 'cmb-file-field-image', 'style' => 'height: auto;' ) );


We should probably abandon the inlines styles here.

jtsternberg · 2017-01-27T17:28:10Z

includes/types/CMB2_Type_File.php

 				} else {
-					$size = is_array( $img_size ) ? $img_size[0] : 350;
-					$image = '<img style="max-width: ' . absint( $size ) . 'px; width: 100%; height: auto;" src="' . $meta_value . '" alt="" />';
+					$image = '<img style="width: auto; height: auto;" src="' . $meta_value . '" class="cmb-file-field-image" alt="" />';


We should probably abandon the inlines styles here.

jtsternberg · 2017-01-27T17:29:08Z

js/cmb2.js

+
+					// Preview size dimensions
+					var previewWidth  = media.previewSize[0] ? media.previewSize[0] : 150;
+					var previewHeight = media.previewSize[1] ? media.previewSize[1] : 150;


Looks like you're changing this default as well (from 50 to 15), which again, is problematic for back-compatibility.

jtsternberg · 2017-01-27T17:31:05Z

js/cmb2.js

+
+					// Get the correct dimensions and url if a named size is set and exists
+					// fallback to the 'large' size
+					if ( typeof( this.sizes[ media.sizeName ] ) !== 'undefined' ) {


use 'yoda' conditions (here and in the rest of your code)

moved get_available_image_sizes() in to the scope where it is needed.

Abandoned inline styles to and moved to external stylesheet. JS media attachment filter moved to a more appropriate place.

Cai333 · 2017-01-28T01:02:17Z

Thanks for the review @jtsternberg

Completely agree on all points; I've now moved all the repeating logic to utility methods. Your suggestion on hooking the filter makes much more sense too. Also reverted the changes to the defaults. Think I've addressed all your initial points, it's late though!

I moved the inline styles to the CSS file but my compiled CSS is totally different, uses spaces instead of tabs etc (the diff basically shows every line as replaced) so I just committed the sass file for now.

jtsternberg · 2017-01-28T03:29:14Z

Awesome, thanks for the quick turnaround. I won't get a chance to test this till next week, but feel free to keep bumping this thread if I don't get around to it. I'd like to get this in the next release. No worries about the compiled assets. I can take care of those.

Cai333 · 2017-02-15T12:58:22Z

@jtsternberg did you get a chance to test this at all?

I've been a bit snowed under myself but I'm going to try and do a bit more thorough testing on it in the next few days (I want to get this in a project I'm working on now).

jtsternberg · 2017-02-15T15:36:28Z

Reviewing/testing this now. Please don't push any more changes as I'm starting to clean up, etc. If you have other changes to propose, let me know, and i'll push up the new branch to collaborate on.

jtsternberg · 2017-02-15T17:28:10Z

Thanks a ton for your work @Cai333. This has been merged to trunk, and will be in the next release which I'll try to get out soon.

Cai333 · 2017-02-15T17:31:00Z

No problem at all @jtsternberg

Cai333 added 5 commits January 27, 2017 12:40

Add utility methods for working with named image sizes

95b1350

Methods for getting all available image sizes and returning a named image size from an array of values without passing an actual image are needed to output the correct images from the JS media uploader.

Filter attachment meta data passed to JS to include custom image sizes

2f875f1

Filter doesn’t get called if hooked from CMB2_JS or elsewhere, I assume the filter is added too late. Probably needs a better home; calling from cmb2_bootstrap() for now.

Don't get the dimensions from the named size if we're passed an array.

45d5816

Fallback to 'thumbnail' for sizes smaller than that.

84bdca6

Consistent with the behaviour of wp_get_attachment_image() (otherwise we may get different preview sizes before/after reload).

jtsternberg requested changes Jan 27, 2017

View reviewed changes

Cai333 added 3 commits January 28, 2017 00:23

wp_image_matches_ratio is only available in WP 4.6.0

3871a52

moved get_available_image_sizes() in to the scope where it is needed.

Moved repeated logic to utility methods.

228de22

Abandoned inline styles to and moved to external stylesheet. JS media attachment filter moved to a more appropriate place.

Defaults should remain for back-compatibility

4a85549

Cai333 mentioned this pull request Jan 28, 2017

Set preview size for File and File_List fields #827

Open

Filter moved to CMB2.php

24e8a3d

jtsternberg merged commit 24e8a3d into CMB2:trunk Feb 15, 2017

jtsternberg added a commit that referenced this pull request Feb 15, 2017

Give props for #848. Closes #848, Closes #844

e32cbaf

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make file/file_list field preview images work with named sizes #848

Make file/file_list field preview images work with named sizes #848

Cai333 commented Jan 27, 2017

jtsternberg left a comment •

edited

jtsternberg Jan 27, 2017

jtsternberg Jan 27, 2017

jtsternberg Jan 27, 2017

jtsternberg Jan 27, 2017

Cai333 Jan 27, 2017

jtsternberg Jan 27, 2017

jtsternberg Jan 27, 2017 •

edited

Cai333 Jan 27, 2017

jtsternberg Jan 27, 2017

jtsternberg Jan 27, 2017

jtsternberg Jan 27, 2017

jtsternberg Jan 27, 2017 •

edited

Cai333 commented Jan 28, 2017 •

edited

jtsternberg commented Jan 28, 2017

Cai333 commented Feb 15, 2017

jtsternberg commented Feb 15, 2017

jtsternberg commented Feb 15, 2017

Cai333 commented Feb 15, 2017

Make file/file_list field preview images work with named sizes #848

Make file/file_list field preview images work with named sizes #848

Conversation

Cai333 commented Jan 27, 2017

jtsternberg left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jtsternberg Jan 27, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jtsternberg Jan 27, 2017 • edited

Choose a reason for hiding this comment

Cai333 commented Jan 28, 2017 • edited

jtsternberg commented Jan 28, 2017

Cai333 commented Feb 15, 2017

jtsternberg commented Feb 15, 2017

jtsternberg commented Feb 15, 2017

Cai333 commented Feb 15, 2017

jtsternberg left a comment •

edited

jtsternberg Jan 27, 2017 •

edited

jtsternberg Jan 27, 2017 •

edited

Cai333 commented Jan 28, 2017 •

edited