vb.org Archive

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)

nsanden 09-25-2006 10:00 PM

Resize large [IMG] images and link them to original
 
This mod should resize [IMG] images wider than 'max_width' and link them to their original size. Not very well tested, i'm hoping for some feedback/suggestions. I have tested in firefox/IE latest versions and it seems to work fine. Should be a pretty quick install.

INSTALL:

1) Edit /includes/class_bbcode.php around line 1879 for me.

Look for:
Code:

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

return '<img src="' . $link . '" border="0" alt="" class="img_tag" />';
2) Add the following to the headinclude template.

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.className == "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>';
            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>


Comalies 09-26-2006 12:22 AM

Demo/screenshot please.

teedizz 09-26-2006 12:42 AM

will this also resize sigs in the [IMG] tags? if so can you prevent that. thanks.

COBRAws 09-26-2006 01:56 AM

Quote:

Originally Posted by Comalies
Demo/screenshot please.

here:
Quote:

his mod should resize [IMG] images and link them to their original size.

nsanden 09-26-2006 02:45 AM

You can demo it on http://www.timesharetrap.com/forums/...tyleid=1#post7

nsanden 09-26-2006 02:52 AM

Quote:

Originally Posted by teedizz
will this also resize sigs in the [IMG] tags? if so can you prevent that. thanks.

I believe it would. Why wouldn't you want that though?

teedizz 09-26-2006 03:04 AM

because some of my members use sigs like 650x650 & it still resizes those. I just want it for pictures in threads.

teedizz 09-26-2006 03:06 AM

the other img hack wouldnt do that. I like this one alot better so hopefully you can add that as an option ;)

nsanden 09-26-2006 03:45 AM

Updated, so the images are hidden until the browser actually resizes them. (This way you don't see the page loading with big images and then all of a sudden shrink to the right size.)

nsanden 09-26-2006 03:46 AM

Sorry teedizz i don't think i'm going to add that change. Doesn't make sense to me. No reason to resize images in the post if you aren't going to resize images in the signature as well. Whole point is to NOT break your design.

principino1984 09-26-2006 06:10 AM

id doesn't work on my forum, as soon as I write down the headinclude text all the images in my forum won't show up anymore.

Marco

NeutralizeR 09-26-2006 01:35 PM

Hi,

I've almost tried all image resizing hacks and will install this one soon.

Note: You should also consider this adding for private messages, too: <if condition="THIS_SCRIPT == ''">

epicbear 09-26-2006 02:12 PM

I tried it because an upgrade killed my old fix and I can't remember which version I had installed...but it wrote the dimensions into the html so that they were resized as they were downloading. I liked that better than a blank page till all are downloaded.

I also added a link target to your code so they don't open in the same browser.

nsanden 09-26-2006 04:39 PM

Quote:

Originally Posted by principino1984
id doesn't work on my forum, as soon as I write down the headinclude text all the images in my forum won't show up anymore.

Marco

What browser and OS are you using?

principino1984 09-26-2006 04:43 PM

Quote:

Originally Posted by nsanden
What browser and OS are you using?


firefox and winxp sp2

Marco

nsanden 09-26-2006 04:45 PM

Quote:

Originally Posted by principino1984
firefox and winxp sp2

Marco

Is it only on your forum or also when you view this thread? http://www.timesharetrap.com/forums/...tyleid=1#post7

There should be 2 images in that thread.

transitbus 09-26-2006 05:51 PM

doesnt work at all. Infact it removed the images instead of making a link

nsanden 09-26-2006 06:59 PM

hmm strange. guess i'll take out the part that hides the images until they resize then.

principino1984 09-26-2006 09:26 PM

any news? as soon as I try to install this hack when I send the post the image disappear instead of showin the link for the resized image.

Marco

nsanden 09-26-2006 10:49 PM

Quote:

Originally Posted by principino1984
any news? as soon as I try to install this hack when I send the post the image disappear instead of showin the link for the resized image.

Marco

Look at my previous reply to you. https://vborg.vbsupport.ru/showpost....3&postcount=16

NeutralizeR 09-26-2006 10:51 PM

This is the fastest way to resize giant images (vBulletin 3.6) if you don't mind the "click to view the full version of the image" feature:
https://vborg.vbsupport.ru/showpost....&postcount=144

principino1984 09-27-2006 07:29 AM

just in my forum, cause when I look @ that link you gave me it works fine

Marco

Tralala 09-27-2006 07:43 AM

Quote:

Originally Posted by transitbus
doesnt work at all. Infact it removed the images instead of making a link


Same here, using Safari on a Mac.

Masiello 09-27-2006 07:51 AM

Quote:

Originally Posted by nsanden
Sorry teedizz i don't think i'm going to add that change. Doesn't make sense to me. No reason to resize images in the post if you aren't going to resize images in the signature as well. Whole point is to NOT break your design.

I agree

nsanden 09-27-2006 08:21 PM

Quote:

Originally Posted by principino1984
just in my forum, cause when I look @ that link you gave me it works fine

Marco

Try reinstalling the hack then. It will probably work.

PabloAM 09-27-2006 08:23 PM

Resize in News in VBadvanced???

Thx

nsanden 09-27-2006 08:25 PM

Quote:

Originally Posted by Tralala
Same here, using Safari on a Mac.

Yeah doesn't suprise me. Sorry :)

principino1984 09-27-2006 08:33 PM

Quote:

Originally Posted by nsanden
Try reinstalling the hack then. It will probably work.


why should it work now? i already tried to reinstall the hack twice or three times... there's no way it will work now if you haven't change sometin in the code

Marco

nsanden 09-27-2006 09:31 PM

Quote:

Originally Posted by principino1984
why should it work now? i already tried to reinstall the hack twice or three times... there's no way it will work now if you haven't change sometin in the code

Marco

I have changed it a couple times.

Just look for the: <style>#img_tag { display: none } </style> part and remove it from the headinclude template.

teedizz 09-27-2006 10:05 PM

Quote:

Originally Posted by nsanden
Sorry teedizz i don't think i'm going to add that change. Doesn't make sense to me. No reason to resize images in the post if you aren't going to resize images in the signature as well. Whole point is to NOT break your design.


well tha reason i ask is because I allow usres to have sigs 600x350 which doesnt break my design. on the other hand I have members who add pictures to threads which are like 1568x900 which does break my design. for instance, we have a thread named " post your desktop " & people are literally just taking screen shots & posting the whole thing. if this doesnt affect a sig thats 600x350 thats wrapped in [img] tags then i will install. thanks.

principino1984 09-27-2006 10:15 PM

Quote:

Originally Posted by nsanden
I have changed it a couple times.

Just look for the: <style>#img_tag { display: none } </style> part and remove it from the headinclude template.


where do i found this code?

listen this is the fourth time i try to install this hack, i put the code in the class_bbcode.php, then the other code in the headinclude at the begin of it and the images won't work anymore... as soon as I get off the headinclude code everything restart working...

Marco

nsanden 09-28-2006 05:06 AM

Quote:

Originally Posted by principino1984
where do i found this code?

listen this is the fourth time i try to install this hack, i put the code in the class_bbcode.php, then the other code in the headinclude at the begin of it and the images won't work anymore... as soon as I get off the headinclude code everything restart working...

Marco

Nobody is making you install the hack. Feel free to uninstall it and find something else to suit your needs. I'm just trying to help get it working for you and anyone else that wants to use it.

<style>#img_tag { display: none } </style> is part of the code you added to the headinclude template. Remove <style>#img_tag { display: none } </style> and it SHOULD fix it.

nsanden 09-28-2006 05:10 AM

Quote:

Originally Posted by teedizz
well tha reason i ask is because I allow usres to have sigs 600x350 which doesnt break my design. on the other hand I have members who add pictures to threads which are like 1568x900 which does break my design. for instance, we have a thread named " post your desktop " & people are literally just taking screen shots & posting the whole thing. if this doesnt affect a sig thats 600x350 thats wrapped in [img] tags then i will install. thanks.

Change max_width = 700 to max_width = 600; and only images wider than 600 (thus not your signature images) will get resized down.

principino1984 09-28-2006 07:49 AM

Quote:

Originally Posted by nsanden
Nobody is making you install the hack. Feel free to uninstall it and find something else to suit your needs. I'm just trying to help get it working for you and anyone else that wants to use it.

<style>#img_tag { display: none } </style> is part of the code you added to the headinclude template. Remove <style>#img_tag { display: none } </style> and it SHOULD fix it.


thanks for helpin me, and sorry if I seemed upset or what, i didn't want to ;), but for real I can't fine the tad you tell me to remove... :confused:

Marco

Ricsca 09-28-2006 10:30 PM

Finally a product that works me with my forum integrated in the portal... ;)

Possible ? to make to see a notice when the image resize?

Thanks 1000

Tralala 09-29-2006 02:16 AM

Quote:

Originally Posted by nsanden
Yeah doesn't suprise me. Sorry :)

So it doesn't work for any forum visitor using Firefox, Mozilla, Safari... instead of resizing, it makes ALL IMAGES DISAPPEAR.

"Sorry."

How about a browser-detect instead, where visitors using those browsers see the original?

PersianImmortal 09-29-2006 03:44 AM

This hack has promise, but is it possible to set both the maximum width and maximum height in the code - remembering that very 'tall' images can also be very annoying in making threads much longer than they have to be.

Also, I notice in Firefox 2 RC1 when you click on the image in the test link you provide, it goes to the enlarged image rather than either showing the image enlarged in the current thread, or opening the larger image in a popup.

nsanden 09-29-2006 09:25 PM

Quote:

Originally Posted by Ricsca
Finally a product that works me with my forum integrated in the portal... ;)

Possible ? to make to see a notice when the image resize?

Thanks 1000

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';

nsanden 09-29-2006 09:27 PM

Quote:

Originally Posted by Tralala
So it doesn't work for any forum visitor using Firefox, Mozilla, Safari... instead of resizing, it makes ALL IMAGES DISAPPEAR.

"Sorry."

How about a browser-detect instead, where visitors using those browsers see the original?

It works for Firefox and Internet Explorer on Windows. I haven't tried it for any other browsers or OS's. That individual was using Safari on Mac, so it didn't surprise me that it didn't work.

Also, it shouldn't make any images dissapear (anymore). It should either resize or NOT resize depending on whether the browser understands the javascript or not.

nsanden 09-29-2006 09:36 PM

Quote:

Originally Posted by PersianImmortal
This hack has promise, but is it possible to set both the maximum width and maximum height in the code - remembering that very 'tall' images can also be very annoying in making threads much longer than they have to be.

Not possible currently. Could be done though.

Quote:

Originally Posted by PersianImmortal
Also, I notice in Firefox 2 RC1 when you click on the image in the test link you provide, it goes to the enlarged image rather than either showing the image enlarged in the current thread, or opening the larger image in a popup.

That's true, it doesn't have a target="_blank" (which would make the image open in a new window) in the demo. This is because the demo is using a slightly older version of the hack. The current hack code has the target="_blank" in it and indeed would open the image in a new window.


All times are GMT. The time now is 02:38 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01357 seconds
  • Memory Usage 1,837KB
  • 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
  • (5)bbcode_code_printable
  • (23)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
  • (40)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