Add method for defining custom preview size for the image field

core/Field/Image_Field.php

@@ -2,6 +2,8 @@
 
 namespace Carbon_Fields\Field;
 
+use Carbon_Fields\Exception\Incorrect_Syntax_Exception;
+
 /**
  * Image field class.
  *
@@ -10,4 +12,64 @@
  */
 class Image_Field extends File_Field {
 	public $field_type = 'image';
+
+	/**
+	 * The size of the image preview
+	 *
+	 * @see set_preview_size()
+	 * @var string|array
+	 */
+	protected $preview_size = [
+		'width' => 130,
+		'height' => 130,
+	];
+
+	/**
+	 * Get the image preview size.
+	 *
+	 * @return  string|array
+	 */
+	public function get_preview_size() {
+		return $this->preview_size;
+	}
+
+	/**
+	 * Set the image preview size.
+	 *
+	 * @param  string|array  $size
+	 * @return self  $this
+	 */
+	public function set_preview_size( $size ) {
+		if ( is_array( $size ) ) {
+			$this->preview_size = [
+				'width' => $size[0],
+				'height' => $size[1],
+			];
+		} else {
+			$registered_image_sizes = get_intermediate_image_sizes();
+			if ( ! in_array( $size, $registered_image_sizes ) ) {
+				Incorrect_Syntax_Exception::raise( 'Image preview size is not found. Must be one of the following - ' . implode( ', ' , $registered_image_sizes ) . ' ("' . $size . '" passed).' );
+			}
+
+			$this->preview_size = [
+				'width' => intval( get_option( "{$size}_size_w" ) ),
+				'height' => intval( get_option( "{$size}_size_h" ) ),
+			];
+		}
+
+		return $this;
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function to_json( $load ) {
+		$field_data = parent::to_json( $load );
+
+		$field_data = array_merge( $field_data, array(
+			'preview_size' => $this->get_preview_size(),
+		) );
+
+		return $field_data;
+	}
 }

packages/core/fields/file/index.js

@@ -45,9 +45,14 @@ class FileField extends Component {
 	 */
 	getThumb() {
 		const { data } = this.state;
+		const { preview_size: previewSize } = this.props.field;
 
 		if ( data.sizes ) {
-			const size = data.sizes.thumbnail || data.sizes.full;
+			let size = data.sizes.thumbnail || data.sizes.full;
+
+			if ( typeof previewSize !== 'undefined' && ( previewSize.width > size.width || previewSize.height > size.height ) ) {
+				size = data.sizes.large || data.sizes.full;
+			}
 
 			if ( size ) {
 				return size.url;
@@ -72,6 +77,19 @@ class FileField extends Component {
 		return data.filename || data.file_name;
 	}
 
+	getPreviewSize() {
+		const { preview_size: previewSize } = this.props.field;
+
+		if ( typeof previewSize === 'undefined' ) {
+			return {};
+		}
+
+		return {
+			maxWidth: previewSize.width,
+			height: previewSize.height
+		};
+	}
+
 	/**
 	 * Handles the file meta set.
 	 *
@@ -142,7 +160,7 @@ class FileField extends Component {
 			>
 				{
 					( { openMediaBrowser } ) => {
-						return <div className="cf-file__inner">
+						return <div className="cf-file__inner" style={ this.getPreviewSize() }>
 							<input
 								type="hidden"
 								name={ name }

packages/core/fields/file/style.scss

@@ -13,6 +13,12 @@
 	box-sizing: border-box;
 }
 
+.cf-field.cf-image {
+	.cf-file__inner {
+		width: auto;
+	}
+}
+
 .cf-file__content {
 	position: absolute;
 	top: -1px;