diff -upr img_assist-6.x-3.x-dev-2010-jul-11//img_assist.admin.inc img_assist//img_assist.admin.inc --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist.admin.inc 2009-08-13 14:32:44.000000000 -0500 +++ img_assist//img_assist.admin.inc 2010-07-08 17:52:16.000000000 -0500 @@ -117,13 +117,13 @@ function img_assist_admin_settings() { $max_size = explode('x', variable_get('img_assist_max_size', '640x640')); $oversize_count = 0; foreach (image_get_sizes() as $key => $size) { - $dimensions = $size['width'] .'x'. $size['height']; + //$dimensions = $size['width'] .'x'. $size['height']; if ((!empty($size['width']) && $size['width'] <= $max_size[0]) || (!empty($size['height']) && $size['height'] <= $max_size[1])) { - $derivatives[$dimensions] = $size['label']; + $derivatives[$key] = $size['label']; } elseif ($key == IMAGE_THUMBNAIL) { // Thumbnail option is shown even if it is larger than maximum size. - $derivatives[$dimensions] = $size['label']; + $derivatives[$key] = $size['label']; } else { $oversize_count++; @@ -143,7 +143,7 @@ function img_assist_admin_settings() { $form['image']['img_assist_default_label'] = array( '#type' => 'select', '#title' => t('Default size for inline images'), - '#default_value' => variable_get('img_assist_default_label', '100x100'), + '#default_value' => variable_get('img_assist_default_label', IMAGE_PREVIEW), '#options' => $derivatives, '#description' => t('Select a derivative to be used by default for inline images.') . $oversize_alert, ); diff -upr img_assist-6.x-3.x-dev-2010-jul-11//img_assist.module img_assist//img_assist.module --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist.module 2009-08-13 14:32:44.000000000 -0500 +++ img_assist//img_assist.module 2010-07-10 00:56:15.000000000 -0500 @@ -636,9 +636,15 @@ function img_assist_properties_form($for // administrators and those with the proper permissions, images don't have to // snap to the nearest standard size. You can create any arbitrary size you // choose. + /* Update: Now it will include the size in pixels and the derivative name, + * so that it is possible to show the image in WYSIWYG mode and also remember + * the derivative name. The derivative's original size is also stored so its + * possible to know if the size was changed and a different derivative or a custom + * size (if allowed) should be used */ $max_size = explode('x', variable_get('img_assist_max_size', '640x640')); - foreach (image_get_sizes(NULL, $image_info['aspect_ratio']) as $key => $size) { + $image_sizes= img_assist_get_sizes($image_info['aspect_ratio']); + foreach ($image_sizes as $key => $size) { // Sizes are strings, may contain '' for 0; convert to integers. settype($size['width'], 'int'); settype($size['height'], 'int'); @@ -646,12 +652,12 @@ function img_assist_properties_form($for $added_to_derivatives = FALSE; if ($key == IMAGE_ORIGINAL) { if (user_access('use original size') && $image_info['width'] <= $max_size[0] && $image_info['height'] <= $max_size[1]) { - $derivatives[$image_info['width'] .'x'. $image_info['height']] = $size['label']; + $derivatives[$image_info['width'] .'x'. $image_info['height'].'|'.IMAGE_ORIGINAL] = $size['label']; $added_to_derivatives = TRUE; } } elseif ($size['width'] <= $max_size[0] && $size['height'] <= $max_size[1]) { - $derivatives[$size['width'] .'x'. $size['height']] = $size['label']; + $derivatives[$size['width'] .'x'. $size['height'].'|'.$key] = $size['label']; $added_to_derivatives = TRUE; } @@ -659,7 +665,7 @@ function img_assist_properties_form($for // The thumbnail option will be shown even if it is larger than the // maximum size. if ($key == IMAGE_THUMBNAIL) { - $derivatives[$size['width'] .'x'. $size['height']] = $size['label']; + $derivatives[$size['width'] .'x'. $size['height'].'|'.IMAGE_THUMBNAIL] = $size['label']; } } } @@ -734,9 +740,11 @@ function img_assist_properties_form($for $form[] = array('#value' => ''); $form[] = array('#value' => '
'); $form[] = array('#value' => ''); + $def_size= variable_get('img_assist_default_label', IMAGE_PREVIEW); + $default_size_label= $image_sizes[$def_size]['width'].'x'.$image_sizes[$def_size]['height'].'|'.$def_size; $form['size_label'] = array( '#type' => 'select', - '#default_value' => variable_get('img_assist_default_label', '100x100'), + '#default_value' => $default_size_label, '#options' => $derivatives, '#attributes' => array('onchange' => 'parent.onChangeSizeLabel()'), ); @@ -784,7 +792,7 @@ function img_assist_properties_form($for '#type' => 'textfield', '#default_value' => variable_get('img_assist_default_link_url', 'http://'), '#size' => 25, - '#maxlength' => 255, + '#maxlength' => 255, '#description' => NULL, ); $form['link_options_visible'] = array( @@ -996,12 +1004,10 @@ function img_assist_display(&$node, $siz // Also, when one predefined size has changed, the derivative sizes need to // be updated. if (!is_array($size)) { - foreach (image_get_sizes() as $std_size) { - if (isset($std_size['key']) && $std_size['key'] == $label) { - $size = $std_size; - break; - } - } + $info = image_get_info(file_create_path($node->images[IMAGE_ORIGINAL])); + $sizes= img_assist_get_sizes($info['height']/$info['width']); + $size= $sizes[$label]; + $size['key']= $label; } if (is_array($size)) { $info = image_get_info(file_create_path($node->images[$label])); @@ -1044,7 +1050,7 @@ function _img_assist_build_derivatives(& if (is_array($size)) { $size = $size['key']; } - $sizes = image_get_sizes(); + $sizes = img_assist_get_sizes(); $sizes = array($size => $sizes[$size]); } // No size given: rebuild derivatives for all standard sizes. @@ -1100,7 +1106,111 @@ function img_assist_render_image($attrib if ($attributes['nid']) { $node = node_load($attributes['nid']); - + + /* Since now we're getting the selected preset this are the rules: + * + * - If "other" was selected at image insertion then the user who + * created this node has the proper permitions to generate custom size + * versions of the image. The custom size preset must be generated at insert + * time not at showing time so the preset + * img_assist_custom-"$width"x"$height" must already exist. If it doesn't + * then fall back to find the nearest preset. + * @TODO ensure that the custom preset is created, if necesary, at insertion + * time. + * + * - If a preset was selected at insert time and the current dimentions + * differ from the preset dimentions then the size was changed in the editor + * after insertion and a near sized preset must be selected. + */ + + // Get width and height of the original image. + $original_size = image_get_info(file_create_path($node->images[IMAGE_ORIGINAL])); + $default_sizes = img_assist_get_sizes($original_size['height']/$original_size['width']); + + // Find the selected preset + if ($attributes['preset']) { + $preset= $attributes['preset']; + $presetw= $attributes['presetw']; + $preseth= $attributes['preseth']; + } + elseif ($attributes['size_label']) { + if ($attributes['size_label'] == 'other') { + $preset= 'other'; + $presetw= ''; + $preseth= ''; + } + else { + // size label format: 'width'x'height'|'preset' + $xpos= strpos($attributes['size_label'], 'x'); + $barpos= strpos($attributes['size_label'], '|'); + if ($xpos !== FALSE && $barpos !== FALSE) { + $preset= substr($attributes['size_label'], $barpos + 1); + $presetw= substr($attributes['size_label'], 0, $xpos); + $preseth= substr($attributes['size_label'], $xpos + 1, $barpos - $xpos - 1); + } + } + } + // Fall back to default preset + if (!$preset) { + $preset= variable_get('img_assist_default_label', IMAGE_PREVIEW); + $presetw= $default_sizes[$preset]['width']; + $preseth= $default_sizes[$preset]['height']; + } + + // Get image size. + $width = (int) $attributes['width']; + $height = (int) $attributes['height']; + // Check to ensure that the dimensions don't exceed the max set in the + // img_assist settings. + $max_size = explode('x', variable_get('img_assist_max_size', '640x640')); + $width = ($width <= $max_size[0]) ? $width : $max_size[0]; + $height = ($height <= $max_size[1]) ? $height : $max_size[1]; + + + // If we aren't using a custom size + if ($preset != 'other') { + // check for size not changed + if ($width == (int)$presetw && $height == (int)$preseth) { + $size= $default_sizes[$preset]; + $size['key']= $preset; + } + else + $find_nearest= TRUE; + } + // Create or use custom size + else { + $size['label'] = t('Custom'); + // Add width and height to make it possible to have multiple custom + // sizes of the same image. + $size['key'] = 'img_assist_custom-' . $width . 'x' . $height; + $size['width'] = $width; + $size['height'] = $height; + } + + // No size defined yet? then find nearest match in presets + if (!$size) { + $keys= array_keys($default_sizes); + $idx= 0; + while ($default_sizes[$keys[$idx]]['width'] > $max_size[0] + || $default_sizes[$keys[$idx]]['operation'] != 'scale') + ++$idx; + $size= $default_sizes[$keys[$idx]]; + $size['key']= $keys[$idx]; + $min_error= abs($width - $default_sizes[$keys[$idx]]['width']); + for ($i = $idx+1; $i < count($keys); ++$i) { + if ($default_sizes[$keys[$i]]['width'] <= $max_size[0] + && $default_sizes[$keys[$idx]]['operation'] == 'scale') { + $error= abs($width - $default_sizes[$keys[$i]]['width']); + if ($error < $min_error) { + $size= $default_sizes[$keys[$i]]; + $size['key']= $keys[$i]; + $min_error= $error; + } + } + } + } + + /* OLD METHOD: // Get image size. $width = (int) $attributes['width']; $height = (int) $attributes['height']; @@ -1239,6 +1349,7 @@ function img_assist_render_image($attrib $size = $default_sizes[IMAGE_THUMBNAIL]; $size['key'] = IMAGE_THUMBNAIL; } + */ return theme('img_assist_inline', $node, $size, $attributes); } // Legacy img_assist filter tag. @@ -1638,6 +1749,55 @@ function img_assist_views_api() { } /** + * Helper function to return the defined sizes (or proper defaults). + * + * @param $aspect_ratio + * Float value with the ratio of image height / width. Used to calculate the + * dimentions of the generated images. + * @return + * An associative array with width, height, label, operation and link type fields. + */ +function img_assist_get_sizes($aspect_ratio = NULL) { + $defaults = array( + IMAGE_ORIGINAL => array('width' => '', 'height' => '', 'label' => t('Original'), 'operation' => 'scale', 'link' => IMAGE_LINK_SHOWN), + IMAGE_THUMBNAIL => array('width' => 100, 'height' => 100, 'label' => t('Thumbnail'), 'operation' => 'scale', 'link' => IMAGE_LINK_SHOWN), + IMAGE_PREVIEW => array('width' => 640, 'height' => 640, 'label' => t('Preview'), 'operation' => 'scale', 'link' => IMAGE_LINK_SHOWN), + ); + + $sizes = array(); + foreach (variable_get('image_sizes', $defaults) as $key => $val) { + // Only return sizes with a label. + if (!empty($val['label'])) { + /* If operation is scale and both sizes are set compute the produced + * image size */ + if ($aspect_ratio && !empty($val['width']) && !empty($val['height']) && $val['operation'] == 'scale') { + $width= $val['width']; + $height= (int)round($width * $aspect_ratio); + if ($height > $val['height']) { + $height= $val['height']; + $width= (int)round($height / $aspect_ratio); + } + $val['width']= $width; + $val['height']= $height; + } + // For a size with only one dimension specified, compute the other + // dimension based on an aspect ratio. + if ($aspect_ratio && (empty($val['width']) || empty($val['height']))) { + if (empty($val['height']) && !empty($val['width'])) { + $val['height'] = (int)round($val['width'] * $aspect_ratio); + } + elseif (empty($val['width']) && !empty($val['height'])) { + $val['width'] = (int)round($val['height'] / $aspect_ratio); + } + } + $sizes[$key] = $val; + } + } + + return $sizes; +} + +/** * @defgroup img_assist_legacy Image Assist Legacy functions * @{ * Used for backwards compatibility with original img_assist module. diff -upr img_assist-6.x-3.x-dev-2010-jul-11//img_assist_popup.js img_assist//img_assist_popup.js --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist_popup.js 2009-02-01 04:21:08.000000000 -0500 +++ img_assist//img_assist_popup.js 2010-07-09 00:26:32.000000000 -0500 @@ -58,10 +58,17 @@ function onChangeSizeLabel() { else { hideElement('size-other'); // get the new width and height - var size = formObj['edit-size-label'].value.split('x'); + //var size = formObj['edit-size-label'].value.split('x'); + // new format for value: widthxheight|preset name + var size = formObj['edit-size-label'].value.match(/^(\d+)x(\d+)/); // this array is probably a bounding box size, not an actual image // size, so now we use the known aspect ratio to find the actual size - var aspect = formObj['edit-aspect'].value; + /* Wrong! the sizes are calculated on server by calling + * image_get_sizes(NULL, $image_info['aspect_ratio']) + * by passing the ratio the function calculates missing dimentions + * so all the values have both width and height! */ + //var aspect = formObj['edit-aspect'].value; + /* var width = size[0]; var height = size[1]; if (Math.round(width / aspect) <= height) { @@ -72,9 +79,10 @@ function onChangeSizeLabel() { // height is controlling factor width = Math.round(height * aspect); } + */ // fill the hidden width and height textboxes with these values - formObj['edit-width'].value = width; - formObj['edit-height'].value = height; + formObj['edit-width'].value = size[1]; + formObj['edit-height'].value = size[2]; } } diff -upr img_assist-6.x-3.x-dev-2010-jul-11//img_assist_textarea.js img_assist//img_assist_textarea.js --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist_textarea.js 2009-02-01 04:21:08.000000000 -0500 +++ img_assist//img_assist_textarea.js 2010-07-09 14:07:48.000000000 -0500 @@ -68,9 +68,21 @@ function getFilterTag(formObj) { var align = formObj['edit-align'].value; var width = formObj['edit-width'].value; var height = formObj['edit-height'].value; + var size = formObj['edit-size-label'].value; + if (size == 'other') { + preset= size; + presetw= ''; + preseth= ''; + } + else { + var preset_vals= size.match(/^(\d+)x(\d+)\|(.*)$/); + preset= preset_vals[3]; + presetw= preset_vals[1]; + preseth= preset_vals[2]; + } // Create the image placeholder tag - var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link; + var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link + '|preset=' + preset + '|presetw=' + presetw + '|preseth=' + preseth; if (url != formObj['edit-default-url'].value) { miscAttribs += '|url=' + url; } diff -upr img_assist-6.x-3.x-dev-2010-jul-11//img_assist_tinymce.js img_assist//img_assist_tinymce.js --- img_assist-6.x-3.x-dev-2010-jul-11//img_assist_tinymce.js 2009-02-01 04:21:08.000000000 -0500 +++ img_assist//img_assist_tinymce.js 2010-07-12 17:55:00.000000000 -0500 @@ -16,7 +16,7 @@ // document.write('<\/script>'); // get variables that were passed to this window from the tinyMCE editor -var nid, captionTitle, captionDesc, link, url, align, width, height; +var nid, captionTitle, captionDesc, link, url, align, width, height, preset, presetw, preseth; function initLoader() { nid = tinyMCEPopup.getWindowArg('nid'); @@ -27,6 +27,9 @@ function initLoader() { align = '' + tinyMCEPopup.getWindowArg('align'); width = '' + tinyMCEPopup.getWindowArg('width'); height = '' + tinyMCEPopup.getWindowArg('height'); + preset = '' + tinyMCEPopup.getWindowArg('preset'); + presetw = '' + tinyMCEPopup.getWindowArg('presetw'); + preseth = '' + tinyMCEPopup.getWindowArg('preseth'); if (nid > 0) { frames['img_assist_main'].window.location.href = Drupal.settings.basePath + 'index.php?q=img_assist/properties/' + nid + '/update'; @@ -63,9 +66,14 @@ function initProperties() { // just set the size to "other". Of course, if custom // isn't an option then I guess the image size will default // back to thumbnail. - formObj['edit-size-label'].value = "other"; - formObj['edit-width'].value = width; - formObj['edit-height'].value = height; + /* If there is a preset value and the size has not changed + * then use that preset. Otherwise use "other" */ + if (preset && width == presetw && height == preseth) + formObj['edit-size-label'].value = presetw+'x'+preseth+'|'+preset; + else + formObj['edit-size-label'].value = "other"; + formObj['edit-width'].value = width; + formObj['edit-height'].value = height; } setHeader('properties'); updateCaption(); @@ -94,11 +102,22 @@ function getFilterTag(formObj) { width = formObj['edit-width'].value; height = formObj['edit-height'].value; var size = formObj['edit-size-label'].value; + if (size == 'other') { + preset= size; + presetw= ''; + preseth= ''; + } + else { + var preset_vals= size.match(/^(\d+)x(\d+)\|(.*)$/); + preset= preset_vals[3]; + presetw= preset_vals[1]; + preseth= preset_vals[2]; + } // Create the image placeholder tag // @see TinyMCE_drupalimage_cleanup() in drupalimage plugin. // Backwards compatibility: Also parse link/url in the format link=url,foo. - var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link; + var miscAttribs = 'nid=' + nid + '|title=' + captionTitle + '|desc=' + captionDesc + '|link=' + link + '|preset=' + preset + '|presetw=' + presetw + '|preseth=' + preseth; if(typeof url != 'undefined' && url != formObj['edit-default-url'].value) { miscAttribs += '|url=' + url; } diff -upr img_assist-6.x-3.x-dev-2010-jul-11//plugins/img_assist/img_assist.js img_assist//plugins/img_assist/img_assist.js --- img_assist-6.x-3.x-dev-2010-jul-11//plugins/img_assist/img_assist.js 2009-06-12 20:17:21.000000000 -0500 +++ img_assist//plugins/img_assist/img_assist.js 2010-07-12 18:41:28.000000000 -0500 @@ -15,13 +15,15 @@ Drupal.wysiwyg.plugins.img_assist = { invoke: function (data, settings, instanceId) { if (data.format == 'html') { // captionTitle and captionDesc for backwards compatibility. - var options = {nid: '', title: '', captionTitle: '', desc: '', captionDesc: '', link: '', url: '', align: '', width: '', height: '', id: instanceId, action: 'insert'}; + var options = {nid: '', title: '', captionTitle: '', desc: '', captionDesc: '', link: '', url: '', align: '', width: '', height: '', id: instanceId, action: 'insert', preset: '', presetw: '', preseth: ''}; + /* In the following the functions width() and height() can not be used + * because they refer to the css value instead of the tag attribute */ if ($(data.node).is('img.img-assist')) { - options.width = data.node.width; - options.height = data.node.height; - options.align = data.node.align; + options.width = this.getWidthAttr(data.node); + options.height = this.getHeightAttr(data.node); + options.align = $(data.node).attr('align'); // Expand inline tag in alt attribute - data.node.alt = decodeURIComponent(data.node.alt); + data.node.alt = decodeURIComponent($(data.node).attr('alt')); var chunks = data.node.alt.split('|'); for (var i in chunks) { chunks[i].replace(/([^=]+)=(.*)/g, function(o, property, value) { @@ -55,7 +57,11 @@ Drupal.wysiwyg.plugins.img_assist = { // 'class' is a predefined token in JavaScript. node['class'] = 'img-assist drupal-content'; node.src = Drupal.settings.basePath + 'index.php?q=image/view/' + node.nid; - node.alt = 'nid=' + node.nid + '|title=' + node.title + '|desc=' + node.desc; + node.alt = 'nid=' + node.nid; + var keys= ['title', 'desc', 'preset', 'presetw', 'preseth']; + for (var i= 0; i < keys.length; ++i) + if (typeof node[keys[i]] != 'undefined') + node.alt += '|'+keys[i]+'='+node[keys[i]]; if (node.link.indexOf(',') != -1) { var link = node.link.split(',', 2); node.alt += '|link=' + link[0] + '|url=' + link[1]; @@ -67,12 +73,12 @@ Drupal.wysiwyg.plugins.img_assist = { node.alt += '|url=' + node.url; } node.alt = encodeURIComponent(node.alt); - var element = '
'); + var img= $('img', element); for (var property in node) { - element += property + '="' + node[property] + '" '; + img.attr(''+property, ''+node[property]); } - element += '/>'; - return element; + return element.html(); }); return content; }, @@ -81,11 +87,51 @@ Drupal.wysiwyg.plugins.img_assist = { * Replace images with inline tags in content upon detaching editor. */ detach: function (content, settings, instanceId) { - var $content = $('
' + content + '
'); // No .outerHTML() in jQuery :( - $('img.img-assist', $content).each(function(node) { - var inlineTag = '[img_assist|' + decodeURIComponent(this.alt) + '|align=' + this.align + '|width=' + this.width + '|height=' + this.height + ']'; + var div = $('
' + content + '
'); + var plugin= this; + $('img.img-assist', div).each(function(index) { + var inlineTag = '[img_assist|' + + decodeURIComponent($(this).attr('alt')) + + '|align=' + $(this).attr('align') + + '|width=' + plugin.getWidthAttr(this) + + '|height=' + plugin.getHeightAttr(this) + + ']'; $(this).replaceWith(inlineTag); }); - return $content.html(); - } + return div.html(); + }, + + /** + * Get the right value of the width attribute. + */ + getWidthAttr: function (el) { + /* In the following the functions width() and height() can not be used + * because they refer to the css value instead of the tag attribute */ + var width= $(el).attr('width'); + /* If it fails => on IE */ + if (!width) { + var div= $('
'); + div.append($(el).clone()); + var values= div.html().match(/width="?(\d+)/i); + if (values.length > 1) + width= values[1]; + } + return width; + }, + + /** + * Get the right value of the height attribute. + */ + getHeightAttr: function (el) { + var height= $(el).attr('height'); + /* If it fails => on IE */ + if (!height) { + var div= $('
'); + div.append($(el).clone()); + var values= div.html().match(/height="?(\d+)/i); + if (values.length > 1) + height= values[1]; + } + return height; + } };