From 8fd26355acdb5ac7b9e9f86c167a0e2730670a34 Mon Sep 17 00:00:00 2001
From: lstoyanov <lstoyanov@htmlbox.net>
Date: Fri, 31 Jan 2020 17:54:56 +0200
Subject: [PATCH 1/3] Add method for defining custom preview size for the image
 field

---
 core/Field/Image_Field.php           | 62 ++++++++++++++++++++++++++++
 packages/core/fields/file/index.js   | 18 +++++++-
 packages/core/fields/file/style.scss |  6 +++
 3 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/core/Field/Image_Field.php b/core/Field/Image_Field.php
index 9a753362f..7f607989d 100644
--- a/core/Field/Image_Field.php
+++ b/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;
+	}
 }
diff --git a/packages/core/fields/file/index.js b/packages/core/fields/file/index.js
index c89ff1ed7..4705ffee9 100644
--- a/packages/core/fields/file/index.js
+++ b/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 ( previewSize.width > size.width || previewSize.height > size.height ) {
+				size = data.sizes.full;
+			}
 
 			if ( size ) {
 				return size.url;
@@ -72,6 +77,15 @@ class FileField extends Component {
 		return data.filename || data.file_name;
 	}
 
+	getPreviewSize() {
+		const { preview_size: previewSize } = this.props.field;
+
+		return {
+			maxWidth: previewSize.width,
+			height: previewSize.height
+		};
+	}
+
 	/**
 	 * Handles the file meta set.
 	 *
@@ -142,7 +156,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 }
diff --git a/packages/core/fields/file/style.scss b/packages/core/fields/file/style.scss
index 4dbaa51c1..d44f51d3e 100644
--- a/packages/core/fields/file/style.scss
+++ b/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;

From ece71f6e556915cdd8b63473c3b9c94883b40e78 Mon Sep 17 00:00:00 2001
From: lstoyanoff <lstoyanov.2create@gmail.com>
Date: Fri, 31 Jan 2020 19:23:17 +0200
Subject: [PATCH 2/3] Fix image field preview size

---
 packages/core/fields/file/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/fields/file/index.js b/packages/core/fields/file/index.js
index 4705ffee9..a3a5c1eb6 100644
--- a/packages/core/fields/file/index.js
+++ b/packages/core/fields/file/index.js
@@ -51,7 +51,7 @@ class FileField extends Component {
 			let size = data.sizes.thumbnail || data.sizes.full;
 
 			if ( previewSize.width > size.width || previewSize.height > size.height ) {
-				size = data.sizes.full;
+				size = data.sizes.large || data.sizes.full;
 			}
 
 			if ( size ) {

From 80d2fe08f560078150741e8e4d6c03f947892482 Mon Sep 17 00:00:00 2001
From: lstoyanoff <lstoyanov.2create@gmail.com>
Date: Sat, 1 Feb 2020 08:59:23 +0200
Subject: [PATCH 3/3] Fix preview size for file field

---
 packages/core/fields/file/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/core/fields/file/index.js b/packages/core/fields/file/index.js
index a3a5c1eb6..e1faca673 100644
--- a/packages/core/fields/file/index.js
+++ b/packages/core/fields/file/index.js
@@ -50,7 +50,7 @@ class FileField extends Component {
 		if ( data.sizes ) {
 			let size = data.sizes.thumbnail || data.sizes.full;
 
-			if ( previewSize.width > size.width || previewSize.height > size.height ) {
+			if ( typeof previewSize !== 'undefined' && ( previewSize.width > size.width || previewSize.height > size.height ) ) {
 				size = data.sizes.large || data.sizes.full;
 			}
 
@@ -80,6 +80,10 @@ class FileField extends Component {
 	getPreviewSize() {
 		const { preview_size: previewSize } = this.props.field;
 
+		if ( typeof previewSize === 'undefined' ) {
+			return {};
+		}
+
 		return {
 			maxWidth: previewSize.width,
 			height: previewSize.height