Silverstripe : tinymce improvements for image handling

The image button on the tinymce instance of silverstripe html text fields is really nice and well layed out : it gives editors one of the best text / image integration, with a minimum user actions that's both powerful, intuitive, and reactive thanks to AJAX calls to the folder structure.

One small drawback is that it comes with one small feature that can be annoying at times, especially when you're looking for inserting images without resampling them, especially for transparent images or tight image integration / quality that Silverstripe resampling functions (PHP based) cannot match (check out the original image hack).

Image size limit feature

In silverstripe, when you select a big image, width and height are automatically resized to a maximum of 600 pixels. Quick hackers might want to deactivate this feature by commenting the resize algorithm in cms/code/ThumbnailStripField.php (lines 73/80 of 2.3 rc2).

But for those who want the best of both worlds (enjoy limitation AND allow original size), here is a hack that will allow editors to choose between the limited image size (max 600, very useful for huge uploads straight from high definition camera) and the original size (very useful for reasonable image size, like example here of 800). Next trick would be to allow editor to type in width and height with automatic calculation of the image proportion. We're getting closer to photoshop indeed.

Usage : check or uncheck 'OriginalDimension' BEFORE image selection. Please comment below or in the dedicated thread on Silverstripe forum.

Hack for silverstripe 2.3rc2 :

  • \sapphire\forms\HtmlEditorField.php:438
    add new checkboxfield :

    new CheckboxField(_t('HtmlEditorField.ORIGINALIMAGEDIMENSIONS', 'OriginalDimensions'),  'OriginalDimensions')
  • cms\code\ThumbnailStripField.php:72
    add original size in class attribute of the image

    $originalWidth=',originalwidth=' . round($width) . ',originalheight=' . round($height) . '';

    and at line 84

    '<img class="destwidth=' . round($width) . ',destheight=' . round($height) . $originalWidth .  '" src="'. $thumbnail->URL . '?r=' . rand(1,100000) . '" alt="' . $image->Title . '" title="' . $image->Title .   '" />'
  • jsparty\tiny_mce_improvements.js:440
    test checkbox before entering image width and height

    $('Form_EditorToolbarImageForm_Width').value = imgTag.className.match(/originalwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
    $('Form_EditorToolbarImageForm_Height').value = imgTag.className.match(/originalheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
    $('Form_EditorToolbarImageForm_Width').value = imgTag.className.match(/destwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
$('Form_EditorToolbarImageForm_Height').value = imgTag.className.match(/destheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null; }


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *