Posted by Arjean on April 14, 2009 at 8:54am
| Project: | Image Resize Filter |
| Version: | 6.x-1.1 |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
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.
Comments
#1
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");
}
#2
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.
#3
my apologizes won't happen again !
#4
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.
#5
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 */
#6
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.
#7
@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.
#8
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
#9
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 */
#10
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).
#11
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 */
#12
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.
#13
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.
#14
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.
#15
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.
#16
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?
#17
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.
#18
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.
#19
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 :)
#20
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.
#21
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.
#22
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.
#23
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.
#24
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.
#25
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!
#26
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!
#27
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!
#28
Can a patch be created for 6.x-1.13 based on #25? Would be happy to test.
#29
Patch in #25 breaks aspect ratio.
#30
I haven't tried this yet, but I will:
The project page of the insert module states as one of it's features:
Has anyone tried that as a solution?