By mrsketch-1 on

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.

⋅ Categories: Drupal 5.x

Comments

bleak26’s picture

bleak26 commented

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

mrsketch-1’s picture

mrsketch-1 commented

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?

Goose4all’s picture

Goose4all commented

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... :/

John Bryan’s picture

John Bryan commented

..

oskar_calvo’s picture

oskar_calvo commented

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

Goose4all’s picture

Goose4all commented

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.. ;)

oskar_calvo’s picture

oskar_calvo commented

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

Goose4all’s picture

Goose4all commented

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

emzi’s picture

emzi commented

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.

Goose4all’s picture

Goose4all commented

yes, that was my first suggestion in this thread.. :-)

but i dont know how to do that... thats my problem.. :/

emzi’s picture

emzi commented

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>
Goose4all’s picture

Goose4all commented

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

emzi’s picture

emzi commented

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

Goose4all’s picture

Goose4all commented

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

emzi’s picture

emzi commented 
<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

Goose4all’s picture

Goose4all commented

the link works.. the thickbox-thingy doesnt... hmm..

anyway, thank you so much!

Andreas

mrsketch-1’s picture

mrsketch-1 commented

This is just what i am looking for!

emzi’s picture

emzi commented

or it would not work.

/Michael

Goose4all’s picture

Goose4all commented

i dont get that...

you mean pasting all thickbox-js?

emzi’s picture

emzi commented

below mine. Order should be as follows:
1. include jquery.js
2. include thickbox.js
3. my snippet
4. thickbox init code

/Michael

Goose4all’s picture

Goose4all commented

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... (?)

emzi’s picture

emzi commented

perhaps if you send me generated page output...

/Michael

Goose4all’s picture

Goose4all commented

well.. before i paste the wrong sections - i bet i would.. :)

http://www.market-talk.de/artikel/test-0

Andreas

emzi’s picture

emzi commented

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

kepi’s picture

kepi commented 
<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

eyveneena’s picture

eyveneena commented

how would i implement an additional function for portraits that has a height of more than 100px

I tried

 if($(this).width() > 100) {
            $(this).attr({width : "100"});
}else{

if($(this).height() > 100) {

$(this).attr({height: "100"});

}

i also tried 

 if($(this).width() > 100) {
            $(this).attr({width : "100", height: "auto"});

}else{

if($(this).height() > 100) {

$(this).attr({height: "100", width: "auto"});

}

i also used jquery-latest.js

Goose4all’s picture

Goose4all commented

hmm.. still a NoGo..

strange...

anyone else reading in here where it works? or dont work also?

thank you!
Andreas

pbn’s picture

pbn commented

You change:

script type="text/javascript" src='misc/jquery.js'> </script>

to:

<script type="text/javascript" src='/misc/jquery.js'> </script>

It work! :)

neopet001’s picture

neopet001 commented

Done! BUT, the thickbox returns unreadable codes instead of enlarging the image when i click on the resized image, what's the problem?.

kindafun’s picture

kindafun commented

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

minesota’s picture

minesota commented

subscribed