resize image
mrsketch - September 6, 2007 - 18:20
So i enabled the use of html img tags for the posting of content on my site (stories, comments, forums etc). My problem is if the image is too large it will over flow the boundaries. Is there a way to resize the images to a certain max size?
Here's what i'm talking about: http://www.socalairsoft.dreamhosters.com/
Any help would be appreciated.
Image size
some image modules let you define the size of images you use and sometimes a maximum size . i think cck image field or image 5.x-1.5 does this. image 5.x-1.5 lets you define several different image sizes eg:
thumbnails 100 X 80
frontpagesize 400 X 300
mini image 150 x 130
big image 600x500
Those seems to work with
Those seems to work with only uploaded image. What if the user want to "hot link" an image off a different server using html? Anyone has any idea how to automatically shrink those kinds of image to a given size when it's displayed?
i need that too... maybe
i need that too...
maybe there is a way to overwrite the filters to add some width and height attributes..? with a link to the original image as target="_blank" ?
i am no coder... sorry, so i cant do that... :/
Also Interested
..
it´s basic html
in the img tag you should give a width value.
take a look at a hmtl book to now how to do it. If you use timynce, the sotware let you to give a size to the images also.
Oskar
gestión del conocimiento y de la información con software libre
that is not the
that is not the point..
we're talking about non coding people
the masses just dont use html-tags nor do they resize images in wysiwyg editors - they just dont care...
thatswhy all common forum-software resizes pictures automatically.. its not only because of a "nice to have", its because of the noobness of 95% of the internet-users
i dont like "tips" like those... do we want to teach html to the whole world? do it need to be like this?
sorry.. thats not against you, oskar.. ;)
html or not?
Hello, i think html is really easy, and everyone need to know about , to change the theme node or page, to improve his/her drupal
it's true that with ime you can make a resi of the image.
Ok, take a look at this picture:
http://farm2.static.flickr.com/1118/1358951455_975a8f66c0_o.png
you see that i make a X and a XX
the box near the X say the width of the image.
the box near the XX say de heigh of the image.
The best choice is to say only the width,
You get this window clicking in the imce button in the timynce htmleditor.
Oskar
gestión del conocimiento y de la información con software libre
you got me wrong..its not
you got me wrong..
its not me, asking for myself - i know how to handle that..., its me asking for the tons of my users...
they dont care if that pic is oversized.. they wont even resize it.. they just complain about the broken layout if the image is wider than x pixel.
i just want them to post without learning html or in wysiwyg-editors... you know smf (www.simplemachines.org)? take a look how this forum handles pic's:
how to attach an image: http://charts.market-talk.de/view/258
how it's shown: http://charts.market-talk.de/view/259
how you see the original image: http://charts.market-talk.de/view/260
so, thatswhy i want something similar.. i dont wanna argue with the upload-thingy (only 1 attachement during posting), the user should be able to insert images via wysiwyg or upload or within img-tags (html or bbcode) and the proper width should be added automatically.. thats my favorite solution...
i know that it is a nogo to come here and f*ck around with all you guys.. believe me, i dont do that.. i love drupal for everything else.. just the image-handling is not optimal and i cannot sleep anymore cause i have no clue how to switch from smf to drupal if there is no simple upload and image handling for the masses.. i knwo they'll kill me :)
so, dont feel offended, it's just i am excited when it comes to images :)
thank you
Anreas
You may program a content
You may program a content filter which scans node body before output for img tag and inserts appropriate attributes like width when image size exceeds desired maximum. This will automatically affect all user-submitted nodes regardless of actual image placement.
yes, that was my first
yes, that was my first suggestion in this thread.. :-)
but i dont know how to do that... thats my problem.. :/
On the second thought
in case you allow images from other sites, 'filter' approach may not work. There is still a good tool for such things, named jQuery. Here is a quick piece of code you may try to insert in your page.tpl.php just before closing
</script>tag:(restrict image size to no more than 100 pixels inside node content blocks)
<script type="text/javascript" src='misc/jquery.js'> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
$(".node .content img").each(function() {
if($(this).width() > 100) {
$(this).attr({width : "100"});
}
});
})
</script>
this looks promising - thank
this looks promising - thank you..
but it scales even small images to the width, provided with ({width : "100"}); and dont scale the height... hmm.. is it even possible to get proper aspect ratios..?
and.. is there a way to not just replace the width, also add a link to the original image with (as an example) class="thickbox" or so...?
so.. in the end: 2 issues
getting the proper height and maybe adding a link to the originial image if its an image from another site..
anyway thanks a lot for your help, emzi! i do appreciate that!
Andreas
This was just an example
Here is modified version with correct aspect ratio:
<script type="text/javascript" src='misc/jquery.js'> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
var h;
$(".node .content img").each(function() {
if($(this).width() > 100) {
h=$(this).height()/$(this).width()*100;
$(this).attr({height : h });
$(this).attr({width : "100"});
}
});
})
</script>
And of course, it is possible to insert any available attribute modification in this loop, like thickbox support.
/Michael
Michael, that rocks!
excellent job..
well, i hate that begging but i really have no clue how to implement the thickbox-thingy...
can you help us one more time? it should add a link to the image with target="_blank" and as addon with class="thickbox"...
that would be awesome!
thanks ALOT!
Andreas
Hope this will help
<script type="text/javascript" src='misc/jquery.js'> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
var h, s;
$(".node .content img").each(function() {
if($(this).width() > 100) {
h=$(this).height()/$(this).width()*100;
$(this).attr({height : h });
$(this).attr({width : "100"});
s="<a href='"+$(this).attr("src")+"' class='thickbox' target='_blank'></a>";
$(this).wrap(s);
}
});
})
</script>
/Michael
thank you!
the link works.. the thickbox-thingy doesnt... hmm..
anyway, thank you so much!
Andreas
Thank you so much!
This is just what i am looking for!
You have to insert all thickbox stuff after this code
or it would not work.
/Michael
i dont get that... you mean
i dont get that...
you mean pasting all thickbox-js?
No, I mean place thickbox init code
below mine. Order should be as follows:
1. include jquery.js
2. include thickbox.js
3. my snippet
4. thickbox init code
/Michael
well.. thickbox is already
well.. thickbox is already implemented... but nonfunctional with "your replacement"... it's working with all gallery images (image-modul) and works if i type a class="thickbox" manually... (?)
Well, I'm afraid I can't tell anything
perhaps if you send me generated page output...
/Michael
thanks for your help...
well.. before i paste the wrong sections - i bet i would.. :)
http://www.market-talk.de/artikel/test-0
Andreas
Hmm, try to insert my code between $styles and $scripts
like that:
<?php print $styles ?>
<script type="text/javascript" src='misc/jquery.js'> </script>
<script type="text/javascript">
... my code ...
</script>
<?php print $scripts ?>
hope this will help
/Michael
just use thickbox init code...
<script type="text/javascript" src='misc/jquery.js'> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
var h, s;
$(".node .content img").each(function() {
if($(this).width() > 100) {
h=$(this).height()/$(this).width()*100;
$(this).attr({height : h });
$(this).attr({width : "100"});
s="<a href='"+$(this).attr("src")+"' class='thickbox'></a>";
$(this).wrap(s);
}
});
})
// thickbox init code
if (Drupal.jsEnabled) {
//on page load call tb_init
$(document).ready(function(){
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
imgLoader = new Image();// preload image
});
}
</script>
And maybe it will be much better to remove this thickbox init code from /modules/thickbox/thickbox.js manually
hmm.. still a
hmm.. still a NoGo..
strange...
anyone else reading in here where it works? or dont work also?
thank you!
Andreas
You change: to:It work! :)
You change:
script type="text/javascript" src='misc/jquery.js'> </script>to:
<script type="text/javascript" src='/misc/jquery.js'> </script>It work! :)
Done! BUT, the thickbox
Done! BUT, the thickbox returns unreadable codes instead of enlarging the image when i click on the resized image, what's the problem?.
I've implemented this but
I've implemented this but have noticed that it won't resize the image on the first viewing of the page. Even if the js was loaded previously. The js is loaded in the header.
Anybody have an idea?
I've not been able to get the thickbox to work yet either. That would be cool but the resized image is critical.
Dan