vb.org Archive - Forum Display Enhancements - Resize large [IMG] images and link them to original

Page 2 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.6 Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=194)

- - Forum Display Enhancements - Resize large [IMG] images and link them to original (https://vborg.vbsupport.ru/showthread.php?t=127577)

Ricsca

09-30-2006 12:12 AM

Quote:

Originally Posted by nsanden

Yep, look for:

Code:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a>';

in the hack, and simply add to the end of it like:

Code:

var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image Resized Down';

Thanks

PersianImmortal

09-30-2006 02:52 AM

Quote:

Originally Posted by nsanden

Not possible currently. Could be done though.

Actually it's fairly simple once I experimented with it (I shouldn't have been lazy in the first place :)).

All you need to do is add a new variable at the top under max_width called max_height, and then add an else if statement to the resizeImages function so that it also checks maximum height and resizes. Seems to work without any problems on IE7 and Firefox, haven't tested it extensively yet.

The completed modified code to get this hack working with all the bells and whistles is this:

Edit /includes/class_bbcode.php as normal, that is changing:

Code:

return '<img src="' . $link . '" border="0" alt="" />';

to:

Code:

return '<img src="' . $link . '" border="0" alt="" id="img_tag" />';

Then use the following code in headinclude instead:

Code:

<if condition="THIS_SCRIPT == 'showthread'">



<script type="text/javascript">



max_width = 500;

max_height = 400;



if(document.documentElement.outerHTML == null) {

   HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {

   var r = this.ownerDocument.createRange();

   r.setStartBefore(this);

   var df = r.createContextualFragment(sHTML);

   this.parentNode.replaceChild(df, this);

});

}



function resizeImages() {

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images[i];

      if(img.id == "img_tag") {

         if(img.width > max_width && ((max_width / img.width) * img.height) < max_height) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

         } else if(img.height > max_height && ((max_height / img.height) * img.width) < max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

         } else if(img.height > max_height && img.width > max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

        }

      }

   }

}



if (window.addEventListener) {

  window.addEventListener('load', resizeImages, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', resizeImages);

} else {

  window.onload = resizeImages;

} 



</script>

</if>

(Note: code modified as per my post further below)

Here's some screenshots of how it looks and works on my forums:

Maximum width (set to 500 on my forums) enforced without affecting smaller images, note the neat notification under each image, so users won't be confused:
http://img213.imageshack.us/img213/4...led1vn3.th.jpg

When the image is clicked it opens the full-sized image in a new window. Hovering the mouse over the image shows the 'Click to enlarge' alt text.

Maximum height (set to 400 on my forums) enforced again without any problems, and again with the notification:
http://img208.imageshack.us/img208/4...led2fy9.th.jpg

Thanks for creating this code in the first place nsanden, and with some subtle modifications it seems to meet all my needs now, so I've clicked Install :)

newbe_haselina

09-30-2006 05:16 AM

Thanks for this hack ... *install* ... i like this one

I includes all the suggested changes, e.g. to resize also the hight of the images, but it doesn't seem to work correctly. I can't describe it, but what happens if the width AND the hight have to be resized? In my forum it seems that only one is resized .. .the hight OR the width? Some images are only resized in the width, not in the hight. Others are sized perfectly ...

Any idea?

Edit: To show what I tried to explain, please see this thread of my forum http://www.auftrab.de/Forum//showthread.php?t=336. In the first threadbox, the images are resized, in the second one they have the original size...

PersianImmortal

09-30-2006 08:27 AM

Actually after a moment's thought I realized that my max_height "fix" isn't really a true fix. All it does is check to see if a picture meets the maximum width first or the maximum height - one or the other, not both.

That is, if a picture is both wide and tall, it only resizes the width not the height because that's the first thing it checks. I'll test out some more code and post the full solution shortly.

/EDIT: OK, I believe I've solved this problem. I just included another else if statement and modified the first two statements to check more throughly. This should cover all situations and should keep the correct aspect ratio for resized images.

Code:

<if condition="THIS_SCRIPT == 'showthread'">



<script type="text/javascript">



max_width = 500;

max_height = 400;



if(document.documentElement.outerHTML == null) {

   HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {

   var r = this.ownerDocument.createRange();

   r.setStartBefore(this);

   var df = r.createContextualFragment(sHTML);

   this.parentNode.replaceChild(df, this);

});

}



function resizeImages() {

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images[i];

      if(img.id == "img_tag") {

         if(img.width > max_width && ((max_width / img.width) * img.height) < max_height) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

         } else if(img.height > max_height && ((max_height / img.height) * img.width) < max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

         } else if(img.height > max_height && img.width > max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

        }

      }

   }

}



if (window.addEventListener) {

  window.addEventListener('load', resizeImages, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', resizeImages);

} else {

  window.onload = resizeImages;

} 



</script>

</if>

newbe_haselina

09-30-2006 08:34 AM

Thanks a lot for helping :) ... That's what I thought it would do ... but I'm very unexperienced in coding, so it was just a guess. Promise to wait patiently ;)

newbe_haselina

09-30-2006 09:01 AM

Quote:

Originally Posted by PersianImmortal

/EDIT: OK, I just included another else if statement and modified the first two statements. This should cover all situations. Note however that it can distort images which are both wide and tall - that is it will force an image which is both wider and taller than the maximums to be resized to be exactly the height and width of the maximums. This shouldn't be a huge problem, since people can click on the image to see the original in its proper shape. And usually most images are either too wide or too tall, not both.

Code:

<if condition="THIS_SCRIPT == 'showthread'">



<script type="text/javascript">



max_width = 500;

max_height = 400;



if(document.documentElement.outerHTML == null) {

   HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {

   var r = this.ownerDocument.createRange();

   r.setStartBefore(this);

   var df = r.createContextualFragment(sHTML);

   this.parentNode.replaceChild(df, this);

});

}



function resizeImages() {

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images[i];

      if(img.id == "img_tag") {

         if(img.width > max_width && img.height < max_height) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

         } else if(img.height > max_height && img.width < max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

         } else if(img.height > max_height && img.width > max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img height = "' + max_height + '" img width = "' +max_width + '" src="' + img.src + '" border=0 alt="Click to enlarge" /></a><br /><FONT SIZE=1>Image automatically resized to meet Image Guidelines - Click to enlarge</font>';

            img.outerHTML = strNewHTML;

        }



      }

   }

}



if (window.addEventListener) {

  window.addEventListener('load', resizeImages, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', resizeImages);

} else {

  window.onload = resizeImages;

} 



</script>

</if>

Thanks for your very fast help, I just included the code changes, but unfortunately it doesn't seem to have any impact on "my thread" ... the images which are to high haven't been resized ... I just changes the width from 500 to 400, all the rest is copied from your code ... :cross-eyed: ... I'm afraid I do something wrong ...

EDIT: It's funny ... in some other threads in my forum the images are resized in width AND hight, only in the thread I posted it doesn't seem to work ... ??

PersianImmortal

09-30-2006 09:43 AM

Try again, I just updated the code while you were testing it. Check my previous post. I missed some basic checks and I had to fix some things. Make sure to copy and paste the entire new code over your existing one in headinclude. It should work properly now.

newbe_haselina

09-30-2006 09:48 AM

Hmm, just overwrote it again ... but please have a look http://www.auftrab.de/Forum/showthread.php?t=336 ... in the first thread it's ok, in the second one nothing happend ...

but anyway ... thanks a lot for your help ... :)

PersianImmortal

09-30-2006 09:50 AM

Looks to be working fine for me - make sure to press CTRL+F5 on your browser to refresh all the code which is being displayed. Also which browser are you using? It works for me in Internet Explorer 7 and Firefox.

newbe_haselina

09-30-2006 09:56 AM

Thanks a lot, that may be the issue ... I'm in the office and there we have IE 6.0 ... :-) ... thanks for your help :-)

PersianImmortal

09-30-2006 10:02 AM

No, you're right, I just checked your page and it works in Firefox, but not in IE7 - the second set of pictures are not resized for some reason.

On my site however it seems to work, here is a thread from my site which has it working: http://forums.tweakguides.com/showthread.php?t=4535

Note that I edited my post on the bottom of the first page to include the same images again, and as you can see both the top set of images and bottom set of images should be working (at least they are for me in Firefox and IE7).

So maybe there's something in particular about your forums which is causing this? Any feedback from others will also be helpful.

newbe_haselina

09-30-2006 10:17 AM

You're right, I just tested it with the Mozilla/Firefox Browser, and it works perfectly :cross-eyed:

Hmmmm, hopefully most of my users use Mozilla ;) ... but anyway, even if it doen't work 100% with IE, it's an improvment for my community :)

principino1984

09-30-2006 07:14 PM

I found out why this hack is not working on my forum...

this is what I see with IE:

https://vborg.vbsupport.ru/

and as I click on the image... see the url:

https://vborg.vbsupport.ru/

Well, this is the problem, when this hack tries to resize the picture, it changes the url and thats why the image "disappear" on firefox..

can you help me?

thanks a lot

Marco

PersianImmortal

10-01-2006 01:43 AM

For the code I've posted on the previous page, I've tested it in Firefox 1.5.0.7 and Firefox 2 RC1, as well as Internet Explorer 7 and it doesn't seem to have any problems at all, working perfectly on my forum (see test link further above).

All I can suggest is that you follow the instructions to edit your class_bbcode.php file first, then try using the original code for the hack to see if it works, then try replacing it with my code instead and see if it works.

principino1984

10-01-2006 06:56 AM

where do I find those instruction... cause the hack is workin right i think, but it still write me the url like this:

http://yurlmyforum/http://imageurl

where do I have to chage to make it ok?

Marco

nsanden

10-02-2006 06:07 PM

Ah I see. Well the screen shots help, but I really need to view the page myself (so I can view the source).

Quote:

Originally Posted by principino1984

I found out why this hack is not working on my forum...

this is what I see with IE:

http://img179.imageshack.us/img179/2814/resize1qm5.jpg

and as I click on the image... see the url:

http://img400.imageshack.us/img400/1329/resize2lp3.jpg

Well, this is the problem, when this hack tries to resize the picture, it changes the url and thats why the image "disappear" on firefox..

can you help me?

thanks a lot

Marco

principino1984

10-02-2006 06:35 PM

i think the problem is VBSEO that rewrite all the links... right now i've just installed another hack, but If it helps you for the support for the other guy I can post you my headinclude or just tell me what do you need

Marco

nsanden

10-02-2006 06:39 PM

If you can link me to the thread in your screen shot that should be all i need. Of course if you installed another image resize hack and uninstalled mine, I won't be able to figure out the problem :) Up to you, my guess is you are right, its just another hack conficting with it.

Quote:

Originally Posted by principino1984

GoNz00

10-12-2006 09:53 AM

seems to be working fine here, the "other" image tag resizer lagged the forum to hell and back, may have been the .js file included. normal speed resumed with this one :)

egelforum

10-12-2006 02:57 PM

Anyone with vB 3.6.2 around? I can't get to work ANY of this image resize addons. Not even one. They just don't do anything. I think the cause is an incompatibility with 3.6.2.

GoNz00

10-12-2006 03:06 PM

works fine for me bud.

egelforum

10-12-2006 03:19 PM

I don't understand why it doesen't work then.

I have changed the line in class_bbcode.php, and put the script at the top of the headinclude template, but absolutely nothing happens... Any ideas?

GoNz00

10-12-2006 03:26 PM

i put the script at the bottom, wonder if that will make it work, dont think it matters tho' ?

egelforum

10-12-2006 03:48 PM

I already tried in the bottom, nothing happens. It's strange because it is a simple script...
I suspect that the problem lies within the class_bbcode.php
I will upload a clean version of the file and see if it works.

Edit: nopes :(

GoNz00

10-12-2006 04:02 PM

heres mine, give it a try ?

i removed my licence number :) copy yours over

egelforum

10-12-2006 04:20 PM

Appreciate that. It didn't worked neither =(
It really puzzles me...
We need this or a similar addon very badly because of the thin layout of our forums... A big image simply destroys the design in a thread...

Edit: Can you post here exactly the code you put in the headerinclude?
They were so many changes all along the thread that maybe i have a broken one (?)

GoNz00

10-12-2006 07:31 PM

Code:

<if condition="THIS_SCRIPT == 'showthread'">



<script type="text/javascript">



max_width = 700;



if(document.documentElement.outerHTML == null) {

   HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {

   var r = this.ownerDocument.createRange();

   r.setStartBefore(this);

   var df = r.createContextualFragment(sHTML);

   this.parentNode.replaceChild(df, this);

});

}



function resizeImages() {

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images[i];

      if(img.id == "img_tag") {

         if(img.width > max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image resized, click for original';

            img.outerHTML = strNewHTML;

         }

      }

   }

}



if (window.addEventListener) {

  window.addEventListener('load', resizeImages, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', resizeImages);

} else {

  window.onload = resizeImages;

} 



</script>



</if>

after the
</if>
</if> that was already there..

this is the entire page with mod for you to compare

Code:

<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />

<meta name="generator" content="vBulletin $vboptions[templateversion]" />

<if condition="$show['threadinfo']">

<meta name="keywords" content="$threadinfo[title], $vboptions[keywords]" />

<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$threadinfo[title] $foruminfo[title_clean]" />

<else />

        <if condition="$show['foruminfo']">

<meta name="keywords" content="$foruminfo[title_clean], $vboptions[keywords]" />

<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$foruminfo[description_clean]" />

        <else />

<meta name="keywords" content="$vboptions[keywords]" />

<meta name="description" content="$vboptions[description]" />

        </if>

</if>



<!-- CSS Stylesheet -->

$style[css]

<if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">

<style type="text/css">

ul, ol { padding-left:20px; }

</style>

</if>

<!-- / CSS Stylesheet -->



<script type="text/javascript">

<!--

var SESSIONURL = "$session[sessionurl_js]";

var IMGDIR_MISC = "$stylevar[imgdir_misc]";

var vb_disable_ajax = parseInt("$vboptions[disable_ajax]", 10);

// -->

</script>



<script type="text/javascript" src="clientscript/vbulletin_global.js?v=$vboptions[simpleversion]"></script>

<if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js?v=$vboptions[simpleversion]"></script></if>

<if condition="$vboptions['externalrss']">

<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] RSS Feed" href="external.php?type=RSS2" />

<if condition="$show['foruminfo'] OR $show['threadinfo']">

<link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] - $foruminfo[title_clean] - RSS Feed" href="external.php?type=RSS2&amp;forumids=$foruminfo[forumid]" />

</if>

</if>

<if condition="THIS_SCRIPT == 'showthread'">



<script type="text/javascript">



max_width = 700;



if(document.documentElement.outerHTML == null) {

   HTMLElement.prototype.__defineSetter__("outerHTML", function (sHTML) {

   var r = this.ownerDocument.createRange();

   r.setStartBefore(this);

   var df = r.createContextualFragment(sHTML);

   this.parentNode.replaceChild(df, this);

});

}



function resizeImages() {

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images[i];

      if(img.id == "img_tag") {

         if(img.width > max_width) {

            var strNewHTML = '<a href="' + img.src + '" target="_blank"><img width = "' + max_width + '" src="' + img.src + '" border=0 alt="" /></a><br />Image resized, click for original';

            img.outerHTML = strNewHTML;

         }

      }

   }

}



if (window.addEventListener) {

  window.addEventListener('load', resizeImages, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', resizeImages);

} else {

  window.onload = resizeImages;

} 



</script>



</if>

all i can think is to revert headinclude and try again ?

egelforum

10-12-2006 10:12 PM

It doesn't work even trying with your very same class_bbcode.php and headinclude template... I's very strange.
Not even with the default vB style!
Thank you for your patience.

GoNz00

10-13-2006 06:20 AM

maybe its time to try the other version thats out there, the one with javascript you need to upload ?

i dropped it in place of this. but it worked fine.

nsanden

10-13-2006 08:06 PM

Quote:

Originally Posted by egelforum

It doesn't work even trying with your very same class_bbcode.php and headinclude template... I's very strange.
Not even with the default vB style!
Thank you for your patience.

How are you testing to see if it works? What browser are you using? So far only confirmed to work in Firefox and IE 6+ on Windows.

You might also check the demo link, I believe 3rd or so post in this thread. If it doesn't work for you there, its your browser.

BarelyHangingOn

10-13-2006 11:26 PM

Works with 3.5.4

PersianImmortal

10-14-2006 10:59 AM

When testing your forum changes on your browser also make sure to press CTRL+F5 to force refresh the changes, just in case your browser is using cached versions of files.

Viper007Bond

11-07-2006 10:16 PM

FYI: Having multiple items with the same ID breaks XHTML validness. A CSS class should be used instead.

nsanden

11-08-2006 02:07 AM

Quote:

Originally Posted by Viper007Bond

FYI: Having multiple items with the same ID breaks XHTML validness. A CSS class should be used instead.

Yep, good point. Fixed!

Codeman05

11-14-2006 09:10 PM

I just installed it on my VB3.6.3 install and its not working either.

The images appear initially, and then disappear (once the script runs).

Any suggestions?

nsanden

11-15-2006 05:44 PM

Quote:

Originally Posted by Codeman05 (Post 1117441)

I just installed it on my VB3.6.3 install and its not working either.

The images appear initially, and then disappear (once the script runs).

Any suggestions?

Browser? OS? Are you installing the original code in the first post or the version someone else posted later?

Codeman05

11-15-2006 05:52 PM

Quote:

Originally Posted by nsanden (Post 1118070)

Browser? OS? Are you installing the original code in the first post or the version someone else posted later?

any browser, any o/s, original code.

I've switched to another script, so no worries. Thanks

harlita

04-23-2007 05:18 AM

Just installed on 3.6.5

Works like a charm <3

Thanks much!! EXACTLY what I was looking for. YOSH!

srikanthbr

04-30-2008 07:31 AM

this dosent work?

All times are GMT. The time now is 11:22 AM.

Page 2 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01353 seconds Memory Usage 1,893KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (9)bbcode_code_printable (9)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (39)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: