vb.org Archive - Show Thread Enhancements - Dynamic Picture Resize for [IMG] tag

Page 3 of 4

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)

- - Show Thread Enhancements - Dynamic Picture Resize for [IMG] tag (https://vborg.vbsupport.ru/showthread.php?t=157228)

Pocket Aces

09-22-2007 06:57 AM

There's already a image resizer mod, but 1 thing i dont want about it is it still loads the image. Is this the same as that? Would be good if this mod will just load the thumbnail, then the user may click the thumbnail to load the actual image size.
Same principle as attached images.

jawatkin

09-24-2007 02:47 PM

I've got it resizing and am playing with the options, but I'm not understanding the lightbox/thickbox outlined a few posts above. Admittedly, I am awful at Javascript. I'm using this thickbox hack for attachments and am wondering how to have the 'clicked' image open the thickbox. I know it's easy, but... not for me :P

kontrabass

09-25-2007 02:07 PM

Most excellent hack, installed on 3.6.8 no prob. Love the javascript approach.

TECK	09-27-2007 03:39 PM

Quote:

Originally Posted by Pocket Aces (Post 1344416)

My hack will load the image... but at the desired size directly. The other hack will load the image at it's full size, then shrink it... which ruins all the hack purpose because you see a huge image then it becomes all of the sudden small, once loaded.

Also, Lizard King reported that the above hack you mentioned does not work with vB Blog.
My hack works with it.

Pocket Aces

09-29-2007 10:49 PM

Quote:

Originally Posted by TECK (Post 1348312)

Sounds good. Im installing it right now and see how it works. [s]*installed* *ncode unistalled*[/s]

edit:
Just the same, i was hoping the loading time of resized images is less but it still loads the actual filesize.

Lizard King

09-29-2007 11:48 PM

Quote:

Just the same, i was hoping the loading time of resized images is less but it still loads the actual filesize

There is no way to decrease the file size of external images on fly.

ncangler

10-02-2007 06:12 PM

I installed this with no problem at all. However it is cropping images instead of resizing them. Did I miss something or is there a way to have it resize linked images rather than cropping them? Thanks!

rapidphim

10-05-2007 12:14 AM

Teck, can you please let me know if your hack comes with or working with lightbox when click on the images?

TECK	10-06-2007 04:13 PM

Quote:

Originally Posted by ncangler (Post 1351607)

The image will not be resized using ImageMagick or GD.
You don't want to kill your server for an externally hosted image, right? :)
This hack with resize the displayed image using only JavaScript techniques and user's browser, without putting any stress on the server.

Quote:

Originally Posted by rapidphim (Post 1353194)

Teck, can you please let me know if your hack comes with or working with lightbox when click on the images?

Yes it is working, one of the users managed to do it very easy.
Start reading from this post, then ask him to post his instructions here. :)

rapidphim

10-07-2007 03:13 AM

Quote:

Originally Posted by Acers (Post 1339360)

TECK, great hack m8,
just wondering though, when the javascript detects a image is greater than specified, can't the link window be somehow set to say rel="lightbox" and then the final image opens up in a new lightbox window?

EDIT: Never mind, i got the lightbox working with this code. Works brilliantly now.

Acers,
Can you please post the instruction on how to intergrate the lightbox with this code? Thanks!

Teck,
Can you please let me know if the image host on imageshack work with this mod? Or it HAS to be uploaded/attached?

TECK	10-09-2007 04:03 PM

rapidphim, this hack will work great with files uploaded to the imageshack.us site. :)
Simply use the direct image link (last option on their list).

rapidphim

10-09-2007 08:04 PM

I always used the direct image link but sometime the images did not resize itself. So... just want to make sure.

urstorm.com

10-16-2007 12:45 PM

i did not under stand this ... explain pls

Quote:

Main CSS: Additional CSS Definitions
Insert into the second text area, the following CSS code:

.resizeimage { max-width: 800px; }
* html .resizeimage { width: expression((this.width > 799) ? '800px' : 'auto'); }

rapidphim

10-16-2007 03:11 PM

Go to your admincp, styles & templates, style manager, at the style that you want to make the edit, click on the drop down menu on the right, select Main CSS, scroll down all the way to the bottom, on the second box of the Additional CSS Definitions, copy and paste the above code to the end of the second box. That's it.

begore

10-16-2007 05:03 PM

Superb mod dude, installed! :D

rapidphim

10-20-2007 04:57 AM

Can anyone let me know how to apply the lightbox to this hack? Also, how are you going to center the image automatically? Thanks.

Fabikus

10-25-2007 01:36 PM

I think there is a little bug on Internet Explorer 7 with this script, it works good but when i click in my forum home page, where there is last message, and i click on thread title (showthread.php?goto=newpost&t=2) if the thread has a resized IMG it gives an error when make the redirect to showthread.php?p=355#post355

If i disable IMG resizer it works correctly.

TECK	11-07-2007 12:28 AM

Should not do this, at all. There is no relation to it.

kevcj

11-07-2007 01:33 AM

Thank you for this wonder add on - BUT, I was confused where the

Quote:

Main CSS: Additional CSS Definitions
Insert into the second text area, the following CSS code:

was at?

Could some more detailed instructions please be provided in the zip file?

Marks installed, finally.

yoyoyoyo

11-07-2007 02:05 AM

Quote:

Originally Posted by kevcj (Post 1377444)

Thank you for this wonder add on - BUT, I was confused where the

was at?

Could some more detailed instructions please be provided in the zip file?

Marks installed, finally.

Admin Control Panel -> Styles & Templates -> Style Manager -> Main CSS
at the bottom of the page you will see a box that says: Additional CSS Definitions

paste the code supplied in to the second box

ahoogerhuis

11-07-2007 04:01 AM

I'm looking for a hack like this, and it seems nice. I've read the thread and I wondered if it would be possible to make the code resize the IMG-embedded picture relative to the client's own screen resolution.

In other words, instead of having static max px height/width in the AdminCP, would it be possible to define my site's template overhead in number of pixles and then make this mod resize to the client's maximum width less the defined overhead?

This would allow people on small laptops, like me, to get images sized at 1024 - N px width, and desktop users with e.g. 1600px width will get it resized to fir their width automagically?

Also, I assume the mod will resize anything as long as the dimensions are largerthan the defined limits, so that it will not upsize anyting?

-A

midweststreets

11-08-2007 02:50 AM

Very nice.. it was just what i was looking for.

there was one thing i did however notice. that is sometimes when the images are in a spoiler tag, it will resize them, however it will not allow you to click on it to see it in its orginal size(in my case i have it open in a new window).

mask31

11-08-2007 07:35 AM

hi Teck, thanks, i just installed and it works great.
however i have an issue with my signatures. in Vbulletin i set the max image size to 600 x 200 for all usergroups for their signatures.

however on your hack i configured the max width to be 700.

the thing is, it's not considering my max allowed image size of 600 x 200 for signatures anymore.
usually it gives the user an error stating that their image is too big. i'm not getting that anymore, it's allowing all image size and it's reducing it to 700.
i don't want that for my signatures.

could you help me on this issue please?

thanks

apiasto

11-08-2007 10:04 AM

very useful hack,is there a way if you can make this to be moderated like attachments.so if anyone uses an [image] tag it will be moderated by admin before showing on the main forum.thanks

CCV_Pinto

11-10-2007 12:57 AM

hi..
great work here..

but I would like to resize the images depending of the user resolution...

i thinked about setting a maximum width like a percentage of the resolution or the width like the resolution - K (where K is a constant that I want configure through admin cp)

i choosed the second option... because its better at my case...

so, I did this modification at vbulletin_global.js

Code:

function resize_image(obj, link, k)

{



    var browserwidth = window.document.body.clientWidth;

    var maxwidth = browserwidth - k; 



        if (obj.width > maxwidth)

        {

                obj.style.cursor = 'pointer';

                obj.style.width = maxwidth + 'px';

                obj.style.height = parseInt(obj.height * maxwidth / obj.width) + 'px';

                obj.onclick = function()

                {

                        window.open(link, '_blank');

                        return false;

                };

        }

}

I think this will work fine.. i am posting before trying...

but I dont know why I have to modify the CSS... thats for resizing when javascript is disabled?

I will try to make my mod and use it without the CSS mods... then I post here the results... but if someone knows the answer then can help me...

thnks

ps: it worked fine!
but I am curious about what that css will do... i think thats because of javascript desabled.. or that avoid to load the image and then resize it.... but i am not sure...

TECK	11-14-2007 05:52 PM

Quote:

Originally Posted by apiasto (Post 1378327)

very useful hack,is there a way if you can make this to be moderated like attachments.so if anyone uses an [image] tag it will be moderated by admin before showing on the main forum.thanks

You cannot moderate BBCode. :)
Because that's what it is after all, a BBCode tag, used a little different.

CCV_Pinto

11-14-2007 11:18 PM

hey teck... can you explain me why do you use the css modification?

i think that css avoid loading the image before and then resize it.... but i am not sure...

I am asking because I wanna set the maxwidth to "resolution player - constant"... did you read my post? I just modified the javascript and it worked... but I wanna know if this css has another function...

thanks for the excellent mod and thanks for the support you are giving

regards

TECK	11-16-2007 01:15 PM

Quote:

Originally Posted by mask31 (Post 1378276)

In Vbulletin I set the max image size to 600 x 200 for all usergroups for their signatures...

This hack only interacts with the BBCcde tag [IMG], it has nothing to do with images attached into database. The max with error message you get it only for images uploaded into database, if I'm not wrong. I will check later on to make sure, can't remember.
Explain more if you think I missed something, but first, make sure the images are not uploaded into database.
If they are, the hack will not influence their format in any way.

Quote:

Originally Posted by CCV_Pinto (Post 1382688)

hey teck... can you explain me why do you use the css modification?

The CSS is used to define from start the image size you want to display.

Alfa1

11-16-2007 11:36 PM

Can you please add highslide integration to you hack?

mask31

11-17-2007 04:51 AM

Quote:

Originally Posted by TECK (Post 1383741)

hi Teck, the images are not uploaded into database. like i said i set it to 600 x200 max for images in signatures, using the bbcode tag [img]. and it was running fine before inserting your hack, but now we don't get the error when it's bigger than 600 x 200, it's just resizing it.
so no , images are not uploaded into database.

thanks , i'll wait for your help on this

Alibass

12-30-2007 03:40 PM

Nice little hack and it works well on 3.7.0 b3 for me also. :) **Installed**

gforce75

12-30-2007 06:44 PM

Awesome hack. Should be in vb by default.

gforce75

12-30-2007 07:08 PM

hmm, it messed up vb. The .js modificatiom made my chatbox stop working. The img sized rework. Just make sure u pay attention to this.

Alien

12-30-2007 11:54 PM

Has this been resolved yet? :)

Quote:

Originally Posted by mask31

CCV_Pinto

01-06-2008 05:07 AM

teck,

do you know if is easy to modificate your javascript to do enlarge the image inside the post, like this mod:

https://vborg.vbsupport.ru/showthrea...118048&page=49

(see the javascript attached at the mod)

what I want to do is use my mod of your mod (quoted below)

but with this functionality of enlargement

I know that for the javascript work properly it has to:

1. when loading the images, add an "identifier" to each one that exceeds the max width and saving the original width (and it would be good to add the warning like the link above)

2. if the user click on the image, just restore the original size (and changing the warning text)

3. if the user click it again, then resize it again

I think this can be easy.. and it would be less "destructive" than the mod which I posted the link... and I have seen that all javascript is done on that post... and it make exactly what I have said... i just dont know how it manages the identifier of the images..

Quote:

Originally Posted by CCV_Pinto (Post 1379410)

Code:

function resize_image(obj, link, k)

{



    var browserwidth = window.document.body.clientWidth;

    var maxwidth = browserwidth - k; 



        if (obj.width > maxwidth)

        {

                obj.style.cursor = 'pointer';

                obj.style.width = maxwidth + 'px';

                obj.style.height = parseInt(obj.height * maxwidth / obj.width) + 'px';

                obj.onclick = function()

                {

                        window.open(link, '_blank');

                        return false;

                };

        }

}

ParsianSat_Net

01-06-2008 10:29 AM

Please
give me screen hosts

TECK	01-13-2008 01:28 AM

Quote:

Originally Posted by Alien (Post 1412288)

Has this been resolved yet? :)

See post 108.

kiennt718

01-14-2008 10:57 PM

I've tried this mod, thanks TECK, it works well.

But I need some enhancements, pls help !

In my forum, users send a lot of image in posts, and I want the images have better layout:

1. Don't touch the small in-line image like this https://vborg.vbsupport.ru/external/2008/01/437.gifone
2. For the image that larger than 200 px wide, I would like to have them center-aligned,

http://www.thai-ridgeback.nl/img/fot...0show/10gr.gif

so i did some modifications in the code

PHP Code:


		
			
$dynimage = '';
        if ($this->registry->options['dynamicpic_enabled'])
        {
            $dynwidth = intval($this->registry->options['dynamicpic_width']) - 1;
            $dynimage = ($dynwidth > 0) ? 'class="resizeimage" onload="resize_image(this, \'' .  $link . '\', ' .  $dynwidth . ');" ' : '';
            list($width, $height, $type, $attr) = getimagesize($link);
         }
      if ($width >200) 
      {
      
       return '<div align="center"><img src="' .  $link . '" style="border: 12px solid #EBEBEB" alt="" ' . $dynimage . '/></div>';
      }
         else
     {
     return '<img src="' .  $link . '" border="0" alt="" ' . $dynimage . '/>';
     }

Live demo at: http://forum.vietpet.com/showthread.php?p=3198#post3198

But here, I used php getimagesize(), which connects to remote server to get actual width of the image. It slows the page load EXTREMELY.

May be CSS can help? But I don't know how to modify CSS :)

CAN YOU GIVE A SOLUTION?

Thanks a lot in advance

Kien, NT

Chevy II

01-14-2008 11:43 PM

I have one skin that does not resize the images, I made the same changes to all skins. What could the problem be?

Thanks for your assistance!

kiennt718

01-15-2008 03:27 AM

Quote:

Originally Posted by Chevy II (Post 1421588)

I have one skin that does not resize the images, I made the same changes to all skins. What could the problem be?

Thanks for your assistance!

May be, you install the skin AFTER the mod has been installed? Do import product again, overwrite = YES

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

Page 3 of 4

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01524 seconds Memory Usage 1,860KB 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 (2)bbcode_code_printable (1)bbcode_php_printable (17)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (3)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
Messages: