This module works nice and smooth, thanks.

Just a small feature request,

I've got users that are lazy, and just place an image without resizing at all.
Images with sizes of 1280x1024 aren't resized because the image has the correct corresponding width and height tags.

A nice feature would be to let the admin set a maximum width (or height) tag,
So a website will not break up thanks to lazy users.

Example: So if an image has a width larger than for example 600, the image will be scaled down to a width of 600 with the corresponding height.
The rest of the story is the same.

With this, users really don't have to worry about scaling image sizes again.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Kit_Hally’s picture

its what i am looking 4 also
but i cant seem to get the image resize fileter to work no matter what i do
im running drupal 6.10 and with or with out tinymce and even rearranging as some suggested
in input it still not works ? beats me what i am doing wrong

p.s. this works for me ? so far that is to resize remoted hosted pictures in firefox don't know if it works in ie6 but does in the latest IE to ( i only did node for now but think could do with comment and forum to )

i placed it in my theme content.css ( you can add it to the theme style.css to instead of content.css)

/* test picture resize  remote works*/
.node img {
max-width: 400px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* for IE6 */
* html  .node img {
width: 400px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* end for IE6 */

not know how to apply the ie6 yet

div { 
width:400px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth>399?"400px":"auto");
}

quicksketch’s picture

ARG! Quit editing your comment! I've looked at this thread 3 times today thinking a new comment had been posted, but it's just the same comment being edited repeatedly. Please post new comments so that others can follow your thought process rather than just updating the same one with your conclusions.

Kit_Hally’s picture

my apologizes won't happen again !

quicksketch’s picture

Thanks. :D

I'll look into this feature request. It'll take a bit more work than might be expected, because it would involve actually removing the existing height and width tags, rather than just reading the tags and adjusting the image src, which is how it works currently.

Kit_Hally’s picture

cool, and i never thought coding was easy lol
if it was then we all would be doing it?
i know i cant

-----------------------------
p.s. update on my post above all placed in either theme content.css or theme style.css
now have this works with comment and forum 2

/* test picture resize  remote works*/
.node img {
max-width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* for IE6 */
* html .node img {
width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* end for IE6 */
.comment img {
max-width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* for IE6 */
* html .comment img {
width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* end for IE6 */

i got this because i use the same tech on the profile picture to show different on the blog/forum
etc. then on the user profile / user account

/* test profile picture resize for comment and post / forum*/
.comment .picture img {
max-width: 80px !important;
max-height: 80px !important;
border:0px;
float:left;
margin:0em;
}
/* for IE6 */
* html .comment .picture img {
width: 80px !important;
height: 80px !important;
border:0px;
float:left;
margin:0em;
}
/* end for IE6 */
.node .picture img {
max-width: 80px !important;
max-height: 80px !important;
border:0px;
float:left;
margin:0em;
}
/* for IE6 */
* html .node .picture img {
width: 80px !important;
height: 80px !important;
border:0px;
float:left;
margin:0em;
}
/* end for IE6 */
Arjean-1’s picture

Just tried something simple, and it seems to work fine.
This code just works around the original code so there are no changes to the actual proces,
It just inputs new width information when needed, en replacing when required.
A simple checkbox option (at admin > settings > filter) has been added with textbox to set the max width, for example 300. No max height for now.

NOTE: It's not really a patch, just a simple editing to show the concept works.
I'm sure my code is below standard, but maybe it can be a helping hand.

I'm new to the CVS system, so I hope I did things right.

Arjean-1’s picture

@Kit_Hally, you can use the imagecache module in combination with the imagecache_profiles module to scale down the images of your users.

http://drupal.org/project/imagecache
http://drupal.org/project/imagecache_profiles

CSS is quick and easy indeed but it doesn't actualy resize the image.
These modules provide the things you might want.
Hope it helps.

Kit_Hally’s picture

yeap i know and tried that module but i like the css better
but thanks for pointing it out shows people care !
(well atleast you do)
whoopy
winks

p.s. i try to use as litlle modules as posible for mutiple reasons

and there is a module that can fix a restriction of css for ie
http://drupalmodules.com/module/ie-unlimited-css-loader
i hope that helps those who have a prob with that

catherine77-2’s picture

How would I get this to work in Advanced forums?

/* test picture resize  remote works*/
.node img {
max-width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* for IE6 */
* html .node img {
width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* end for IE6 */
.comment img {
max-width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* for IE6 */
* html .comment img {
width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* end for IE6 */
quicksketch’s picture

I realized as a feature request, this is more difficult than I would like. Basically for users that are doing their editing in a WYSIWYG (which is really the intended purpose of this module), they'll be able to make the image as large as they want when editing, but then it will be scaled down on output. I'd prefer not to have this inconsistency, since what we're going for here is better WYSIWYG behavior, adding a max width on output (but not on input) is going to reduce the user experience.

Really a better solution would be to do it the other way around, and restrict the width in the WYSIWYG (and then maybe later do it with image_resize_filter).

Kit_Hally’s picture

try this ?

.forum-post-panel-main img {
max-width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* for IE6 */
* html .forum-post-panel-main img {
width: 471px !important;
height: auto !important;
border:0px;
margin:0em;
}
/* end for IE6 */

Kit_Hally’s picture

i agree with you on the fact that it could/would be more handy if it was done with in the editor itself
in my case tninymce
so far i had no luck in making that happen.
there for the only way to prevent the layout from breaking by people who really either do not care what size there placing or who have no idea or keep forgetting that there is a max size for now would be in a module or by css etc.

Arjean-1’s picture

I've been given it some thought and must say you made your point clear quicksketch (#10).
It would be better indeed if users would see what will happen during editing. Not just afterwards.

As for TinyMCE, the result would be a plugin: Advanced Image Scale.
http://code.google.com/p/tinymce-plugin-advimagescale/wiki/Usage
It will scale down the image during editing.

A quick test shows it works with drupals WYSIWIG Api module.
Sadly though the AdvImageScale will only scale during certain actions.
Seems it needs some more triggers, will give it a look later on.

quicksketch’s picture

Status: Active » Closed (won't fix)

Nice Arjean, that looks like it would be the perfect solution for some of my own sites. I'm also working on a solution for FileField/ImageField to insert images (see #438666: Display Image Field Inline) that would allow you to cap the width when the file is originally inserted. In any case though, I don't think Image Resize Filter is the correct place for this feature, so I'm marking won't fix.

Arjean-1’s picture

Just putting the comment here to show some results. (for now I don't know where to place it otherwise )

This just applies for using TinyMCE image insert, not for CCK imagefield sadly.
After some testing with advresizer I couldn't figure out the trigger for an image being inserted. So just edited the image plugin instead.
When a user selects an image and presses insert, the script just checks if the width is not too wide and otherwise corrects it.
The user will directly see that the image has been changed/corrected and when the user tries to make it larger again the advresizer jumps in.
Only problem might be when a user uses copy/paste to insert an image into the editor. Nothing is triggered untill the user resizes the image.
O well, not a problem for now, maybe work for later on.

at: sites\all\modules\wysiwyg\tinymce\jscripts\tiny_mce\themes\advanced\js\image.js

diff -u -r1.3 image.js
--- image.js	29 Apr 2009 08:55:19 -0000
+++ image.js	29 Apr 2009 08:56:53 -0000
@@ -76,6 +76,19 @@
 		} else
 			args.style = this.styleVal;
 
+		// constrain image to default wide.
+		var override = 450; // maximum width
+		var ratio = '';
+		// retreive image info
+		t = ImageDialog;
+		// tinymce automatically input the preloadimg.width when a form is empty.
+		// read the form value.		
+		if (f.width.value > override){
+			f.width.value = override;
+			ratio = t.preloadImg.height/t.preloadImg.width;
+			f.height.value = Math.round(ratio * f.width.value);
+		}
+			
 		tinymce.extend(args, {
 			src : f.src.value,
 			alt : f.alt.value,

Status won't fix seems fine.

NaheemSays’s picture

Leaving as closed as that is the will of the maintainer, however not everyone uses tinymce - I am using BUEditor on a site and would like to have the option for a max image size. While that may not help everyone, it does help many. Well, it helps me. :)

Is it possible to reconsider the decision to "won't fix" this issue?

quicksketch’s picture

nbz, you might consider using something like FileField Insert for inserting images into textareas. It will auto-populate height/width values for you based on the size of the image, and it does have a "max-width" setting, and will automatically scale down the height based on the original image. Combined with Image Resize Filter, they can make for a super-simple workflow.

NaheemSays’s picture

Thanks for that, it seems to be good for sites where most content a node, but its not the right solution for me. filefield/cck seems to be too much for simple forum comments (even if they even work at all - I doubt you can add cck to comments?)

I do use image.module, img_assist for node content (and may convert that over to filefield as that also fits the bill), but that is overkill for the forums and I wanted something simple as many users did not want to insert the images they want to post to the forums.

(also, I use bueditor tag editor, not a wysiwyg).

Anyway, thanks for this great module. I can always get someone to edit too large images to add the max dimensions.

RikiB’s picture

Id also request reopening this and having some sort of automatic resize feature when someone puts any img link in their post.

I used vbulletin for a time and they have a great module for this called The Image Resizer: http://www.vbulletin.org/forum/showthread.php?t=184571&highlight=resize

Thanks for the effort on this great module :)

metastate’s picture

Using FileField Insert and Image Resize Filter is a great way to go to control maximum width of images, regardless of which WYSIWYG you are using.

I have a site where users can upload a photo to a node using CCK + ImageField. (I personally think it's best to remove the uploading from the WYSIWYG and use ImageField - simpler interface and more future-friendly.)

Users then insert the photo into the text area with FileField Insert. FileField Insert lets me control the maximum width so users can't add images that are too big for the layout. For consistent design across the site, I also offer two preset image sizes (ImageCache) for the user to choose from when inserting the image - awesome feature. But users can still manually resize the image in their WYSIWYG if they like and the Image Resize Filter will do it's magic.

If you want to upload images through a WYSIWYG, the maximum width feature should really be added to your WYSIWYG module. Max width should be set at the time of upload/insert, not after the fact with the Image Resize Filter, as quicksketch mentioned.

NaheemSays’s picture

That only works for local images that are attached to nodes. Many people prefer using services such as imageshack and most discussions in forums are comment posts that are afaik not field-able til Drupal 7.

metastate’s picture

Yes, the method I am using is definitely for node content with locally stored images. It works well for users editing site content. Working with images from a remote server would be a different story.

mohamnag’s picture

Hi every body here,
I have done a clean change to this module and it is now containing two new features named max width and max height. Either the image has width and height attached or not, every image in site will be limited to this maximums. however when the user specified width and height are not bigger than this maximums the module works like before.
setting the maximums in module's config page.

bryancasler’s picture

I'm having trouble getting this to work with the patch found here http://drupal.org/node/620108#comment-2529648 Any possibility of combining the two and posting again :) I'm on windows so I patch by hand, but I just can't get the two to work together.

opteronmx’s picture

I needed exactly this feature.

Thanks mohamnag for the modified module.

I've made a patch to current stable (6.x-1.9) based on mohamnag attachment.

Enjoy!

mherchel’s picture

I hate to be presumptuous, but why can't this patch be incorporated (its current status is 'wont fix')??

This would be a great feature to include!

floridaproject’s picture

If anyone is free to help with an image similar to this, paid, please contact us. We have a production site using imagecache and need someone creative to help us solve a problem. Thanks!

polskikrol’s picture

Status: Closed (won't fix) » Active

Can a patch be created for 6.x-1.13 based on #25? Would be happy to test.

fasdalf@fasdalf.ru’s picture

Patch in #25 breaks aspect ratio.

AlfTheCat’s picture

I haven't tried this yet, but I will:
The project page of the insert module states as one of it's features:

Maximum width setting for inserted images (for combined use with the Image Resize Filter module)

Has anyone tried that as a solution?

Anonymous’s picture

In fact that would be a great feature for people not only for lazy people, but for people who needs to do some automatic tasks.

Let's take an example, I import feeds with Full HTML to get the images of the feed item.
In order to not break my theme (If some big images is inserted), that is cool to have something that limit the size of the image.

My 2 cents :)

adr_p’s picture

Version: 6.x-1.1 » 6.x-1.13
Status: Active » Needs review
FileSize
26.34 KB

Below you can find the patch extended and adapted to the current stable version - 1.13. It works only for the files kept locally. For remote files you'll have to use one of the css or js solutions. Also a major changes in the module (e.g. using getimagesize() on remote files) are worth trying out IMHO.

Please don't hesitate to post comments.

fenstrat’s picture

Status: Needs review » Needs work

I've not tested this yet but it looks well done.

We have need of this feature to limit image sizes in a responsive design. Quick but admittedly ugly solution is to limit resized images to 300px wide (20px gutters for targetted min width iPhone 320px), thus stopping resized images from breaking the design on mobile.

Code review:

+++ b/tests/image_resize_filter_basic.test
@@ -0,0 +1,692 @@
+    ¶

3 white space issues in the test.

Nice to see the tests though!

+++ b/image_resize_filter.module
@@ -55,6 +55,9 @@ function image_resize_filter_filter($op, $delta = 0, $format = -1, $text = '', $
+      $settings['lim'] = variable_get('image_resize_limit_all_image_sizes_'. $format, '');
+      $settings['limw'] = variable_get('image_resize_filter_limit_all_image_sizes_width_'. $format, '');
+      $settings['limh'] = variable_get('image_resize_filter_limit_all_image_sizes_height_'. $format, '');

Overly verbose variable names. What about 'image_resize_filter_limit_max_size_', 'image_resize_filter_max_width_' and 'image_resize_filter_max_height_'
Coding standards: '. $format => ' . $format

+++ b/image_resize_filter.module
@@ -181,10 +184,51 @@ function image_resize_filter_form($format) {
+    '#description' => t('Images bigger than that will be scaled down to this size. Having or not the size attributes.'),

Last sentance isn't great English, try 'Images bigger than that will be scaled down to this size if they have the size attribute or not.'

+++ b/image_resize_filter.module
@@ -181,10 +184,51 @@ function image_resize_filter_form($format) {
+  ¶

White space.

adr_p’s picture

Your comments are fair. I'll try to prepare improved version. The patch was based on http://drupal.org/node/433116#comment-3676336 which in turn was based on another one. I noticed the variable names issue after posting changes on d.o and I didn't want to mess around with new attachments. The rest of the bugs passed unspotted ;) Thanks for your comments.

AlfTheCat’s picture

Last sentance isn't great English, try 'Images bigger than that will be scaled down to this size if they have the size attribute or not.'

My suggestion:

"Larger images will be scaled down to this size, disregarding the size attributes of the original image."

fenstrat’s picture

@AlfTheCat Yep, that's much better.

jcisio’s picture

FYI, I've released a module that does only one thing: this feature request: http://drupal.org/project/image_autosize

You specify an imagecache preset, then could can force all image resized with that preset.

fenstrat’s picture

@jcisio Interesting approach. Haven't tried the module but it seems it'll lock the images into one size only (as in the image style preset you've defined), is this correct? Whereas image_resize_filter allows arbirary sizes as set by the content editor when click/drag resizing image, with the idea in this issue being to add a max allowable size.

jcisio’s picture

Re #38: my idea works with the assumption that the resize is only used to fit image into the content. In my website, users never want to scale image down less than the content width.

I also give users another choice: when image is float to left or right, another preset (e.g. 40% of the content width) is used.

adr_p’s picture

Status: Needs work » Needs review
FileSize
26.17 KB

@fenstrat
I've introduced your suggestions in attached patch.

fenstrat’s picture

@adr_p, thanks. I've made some changes to #40. Detailed in the interdiff.
image_resize_filter.js needs to be changed to control the visiblity of the width/height like it does for "If resized ...".
I've not tested on d6.

Also ported to D7, tested, works well.
#states could be added to control "If resized ..." setting and remove image_resize_filter.js (and probably remove the theme_image_resize_filter_form() alltogether) - but this is probably better handled in a different issue.

adr_p’s picture

@fenstrat
Thank you for your work! Is there anything I could do?

fenstrat’s picture

Status: Needs review » Reviewed & tested by the community

@adr_p Given this is mostly your work, and that #41 is working for you I'm going to mark this as RTBC. Time to get @quicksketch's take on this.

fax8’s picture

Just tested D7 version of #41 - Huge thumbs up!

jsobiecki’s picture

I have tested version for D6, and everything seems to work OK, with one notable exception:

In patch for D6, http://drupal.org/files/433116-41-max_size_limit-d6.patch, lines 611 - 620

 // Override any inline style width/height attributes with their expected size.
+  if (isset($image['attributes']['style']) && strpos($image['attributes']['style'], 'width') !== FALSE) {
+    $image['attributes']['style'] = preg_replace('/(width):\s*(\d+)([^d;]*)(;)?/i', "$1:{$image['expected_size']['width']}px$4", $image['attributes']['style']);
+  }
+  if (isset($image['attributes']['style']) && strpos($image['attributes']['style'], 'height') !== FALSE) {
+    $image['attributes']['style'] = preg_replace('/(height):\s*(\d+)([^d;]*)(;)?/i', "$1:{$image['expected_size']['height']}px$4", $image['attributes']['style']);
+  }
+

Those preg_replace calls aren’t valid. For example, they affect additional expressions like "border-width". Also [^d;] should be replaced with [^\d;].
Those bugs lead to unvalidated code. If image_resize_filter is used with filter "fix unvalid html", this can produce unexpected (for enduser) behaviour.

Attached patch includes (hopefully) fixed version.

soulfroys’s picture

Status: Reviewed & tested by the community » Needs work

Awesome needed feature!

Unfortunately, it doesn't work here, neither #41, nor #45... (details ASAP).

soulfroys’s picture

Status: Needs work » Needs review
FileSize
9.81 KB

It's just a minor fix (max_width VS max_height):

-      $settings['max_width'] = variable_get('image_resize_filter_max_height_' . $format, '');
+      $settings['max_height'] = variable_get('image_resize_filter_max_height_' . $format, '');

Attached patch: #45 + minor fix... needs review.

soulfroys’s picture

Version: 6.x-1.13 » 7.x-1.13
Status: Needs review » Reviewed & tested by the community

Well, worked so far as i could test it. Back to RTBC and changed to the newest version.

ram4nd’s picture

Version: 7.x-1.13 » 7.x-1.x-dev
Issue summary: View changes
Status: Reviewed & tested by the community » Needs work

Please re-roll against 7.x-1.x-dev.

jsobiecki’s picture

Status: Needs work » Needs review
FileSize
9.31 KB

Attached patch is a re-roll against newest version of module in 7.x-1.x branch. It required some small refactoring (because D7 version doesn't use variable_get/variable_set for a settings storage).

I made some basics testing and feature seems to work for me, but as usual, it requires review :)

Leagnus’s picture

Version: 7.x-1.x-dev » 6.x-1.x-dev

#50 looks nice but i've got PHP Fatal error: Allowed memory size of 134 217 728 bytes exhausted (tried to allocate 14032 bytes) in .../ modules/system/image.gd.inc on line 232

joelpittet’s picture

Version: 6.x-1.x-dev » 7.x-1.16

Weird what happened to the '7.x-1.x-dev' branch.