NEW: Allow configuration of initial insertion width for images and media

Moved default insertion dimensions logic from JS to PHP to allow setting through config API
silverstripe · Jun 24, 2013 · ffc764d · ffc764d
1 parent 1edf45f
commit ffc764d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 11 deletions.
diff --git a/forms/HtmlEditorField.php b/forms/HtmlEditorField.php
@@ -14,6 +14,12 @@ class HtmlEditorField extends TextareaField {
 	 */
 	private static $use_gzip = true;
 
+	/**
+	 * @config
+	 * @var Integer Default insertion width for Images and Media
+	 */
+	private static $insert_width = 600;
+
 	protected $rows = 30;
 
 	/**
@@ -620,10 +626,10 @@ protected function getFieldsForOembed($url, $file) {
 				'CSSClass',
 				_t('HtmlEditorField.CSSCLASS', 'Alignment / style'),
 				array(
-					'left' => _t('HtmlEditorField.CSSCLASSLEFT', 'On the left, with text wrapping around.'),
 					'leftAlone' => _t('HtmlEditorField.CSSCLASSLEFTALONE', 'On the left, on its own.'),
-					'right' => _t('HtmlEditorField.CSSCLASSRIGHT', 'On the right, with text wrapping around.'),
 					'center' => _t('HtmlEditorField.CSSCLASSCENTER', 'Centered, on its own.'),
+					'left' => _t('HtmlEditorField.CSSCLASSLEFT', 'On the left, with text wrapping around.'),
+					'right' => _t('HtmlEditorField.CSSCLASSRIGHT', 'On the right, with text wrapping around.')
 				)
 			)->addExtraClass('last')
 		);
@@ -634,12 +640,12 @@ protected function getFieldsForOembed($url, $file) {
 					TextField::create(
 						'Width', 
 						_t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), 
-						$file->Width
+						$file->InsertWidth
 					)->setMaxLength(5),
 					TextField::create(
 						'Height', 
 						_t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), 
-						$file->Height
+						$file->InsertHeight
 					)->setMaxLength(5)
 				)->addExtraClass('dimensions last')
 			);
@@ -744,10 +750,10 @@ protected function getFieldsForImage($url, $file) {
 				'CSSClass',
 				_t('HtmlEditorField.CSSCLASS', 'Alignment / style'),
 				array(
-					'left' => _t('HtmlEditorField.CSSCLASSLEFT', 'On the left, with text wrapping around.'),
 					'leftAlone' => _t('HtmlEditorField.CSSCLASSLEFTALONE', 'On the left, on its own.'),
-					'right' => _t('HtmlEditorField.CSSCLASSRIGHT', 'On the right, with text wrapping around.'),
 					'center' => _t('HtmlEditorField.CSSCLASSCENTER', 'Centered, on its own.'),
+					'left' => _t('HtmlEditorField.CSSCLASSLEFT', 'On the left, with text wrapping around.'),
+					'right' => _t('HtmlEditorField.CSSCLASSRIGHT', 'On the right, with text wrapping around.')
 				)
 			)->addExtraClass('last')
 		);
@@ -757,12 +763,12 @@ protected function getFieldsForImage($url, $file) {
 					TextField::create(
 						'Width', 
 						_t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), 
-						$file->Width
+						$file->InsertWidth
 					)->setMaxLength(5),
 					TextField::create(
 						'Height', 
 						" x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'),
-						$file->Height
+						$file->InsertHeight
 					)->setMaxLength(5)
 				)->addExtraClass('dimensions last')
 			);
@@ -908,6 +914,29 @@ public function getHeight() {
 		return $this->oembed->Height ?: 100;
 	}
 
+	/**
+	 * Provide an initial width for inserted media, restricted based on $embed_width
+	 * 
+	 * @return int
+	 */
+	public function getInsertWidth() {
+		$width = $this->getWidth();
+		$maxWidth = Config::inst()->get('HtmlEditorField', 'insert_width');
+		return ($width <= $maxWidth) ? $width : $maxWidth;
+	}
+
+	/**
+	 * Provide an initial height for inserted media, scaled proportionally to the initial width
+	 * 
+	 * @return int
+	 */
+	public function getInsertHeight() {
+		$width = $this->getWidth();
+		$height = $this->getHeight();
+		$maxWidth = Config::inst()->get('HtmlEditorField', 'insert_width');
+		return ($width <= $maxWidth) ? $height : round($height*($maxWidth/$width));
+	}
+
 	public function getPreview() {
 		if(isset($this->oembed->thumbnail_url)) {
 			return sprintf('<img src="%s" />', $this->oembed->thumbnail_url);
@@ -964,6 +993,29 @@ public function getHeight() {
 		return ($this->file) ? $this->file->Height : $this->height;
 	}
 
+	/**
+	 * Provide an initial width for inserted image, restricted based on $embed_width
+	 * 
+	 * @return int
+	 */
+	public function getInsertWidth() {
+		$width = $this->getWidth();
+		$maxWidth = Config::inst()->get('HtmlEditorField', 'insert_width');
+		return ($width <= $maxWidth) ? $width : $maxWidth;
+	}
+
+	/**
+	 * Provide an initial height for inserted image, scaled proportionally to the initial width
+	 * 
+	 * @return int
+	 */
+	public function getInsertHeight() {
+		$width = $this->getWidth();
+		$height = $this->getHeight();
+		$maxWidth = Config::inst()->get('HtmlEditorField', 'insert_width');
+		return ($width <= $maxWidth) ? $height : round($height*($maxWidth/$width));
+	}
+
 	public function getPreview() {
 		return ($this->file) ? $this->file->CMSThumbnail() : sprintf('<img src="%s" />', $this->url);
 	}

diff --git a/javascript/HtmlEditorField.js b/javascript/HtmlEditorField.js
@@ -1255,9 +1255,6 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 
 				this.setOrigVal(parseInt(this.val(), 10));
 
-				// Default to a managable size for the HTML view. Can be overwritten by user after initialization
-				if(this.attr('name') == 'Width') this.closest('.ss-htmleditorfield-file').updateDimensions('Width', 600);
-
 			},
 			onunmatch: function() {
 				this._super();