vb.org Archive
Page 1 of 4 1 23 Last »
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)

TECK 09-06-2007 10:00 PM
Dynamic Picture Resize for [IMG] tag
 
If an image submited by a user (using the [IMG] bbcode tag) is to big, chances are that it will break your current vBulletin style. This hack will dynamically resize that image to acceptable dimensions, that you previously specified. It will do it for pictures inserted into postbit or user signature.

The code modifications listed below were tested into a clean installed vBulletin board. They work 100%.

Installation
In order to perform an efficient modification of your files, I recommend you to use Komodo Edit or Textpad.
Both editors will allow you to complete all steps without any coding errors.

You will need to make one small change for each of the following files:

? vbulletin_global.js (folder /clientscript)
? class_bbcode.php (folder /includes)

Make sure you modify, save and upload one file at the time to your server.
Then, simply run the product-dynamicpic.xml file.

Once the product installed, don't forget to enable it.
Go to your vBulletin Options, click on Dynamic Picture Resize setting group and set all your options.
If you encounter any problems, feel free to post in the support thread.

Learn how to open the image into a new tab/window.
But you should stop using the target tag, since it will be deprecated soon.
There is a reason why all browsers have now the Shift and CTRL options to open a new tab/window with the link you click on.

TECK 09-07-2007 03:52 AM
For a quick look, visit this vBulletin Blog entry on Lizard King's server.
As you notice, my hack works on the vBulletin forum and blog. :)

Hornstar 09-07-2007 04:17 AM
Thanks, when I get a chance I will take a look at this for sure. thanks.

TECK 09-07-2007 04:30 AM
NeutralizeR was begging the site administration guys to help him with the hack, but nobody wanted to.
It took me 10min to write and implement the hack and one hour to make the readme file. Go figure...

Honestly, I felt bad because nobody wanted to help him. NeutralizeR, my new friend... there are people who still care. Enjoy the hack, I did it especially for you.

Njm 09-07-2007 04:42 AM
thanx man ..

but is there any problom in my site 4 load server same the other products that resizer the image

another que can u edit the product soo the image may open in new Window

thanx agin ...

njm

TECK 09-07-2007 04:54 AM
Njm, my hack will not generate any server load. The process is completed through JavaScript.
In other words, the client (browser) does the job, not the server. :)

About your request to open the link into a new tab/window:
Open vbulletin_global.js file (where you edited the code originally) and find:
Code:
window.location.href = link;
Replace it with:
Code:
window.open(link, '_blank');

You are done. :)

2ndCz 09-07-2007 05:39 AM
Read the other thread... Wow, this was nice of you to do for them. :)

Clicked install. This is what I've been hoping for as well, something dynamic.
Thank you for sharing with everyone, TECK. I can now replace my old re-sizer. :)

kambiz 09-07-2007 06:32 AM
Thanks a lot. was looking for this a long time.

Clicked install.

kambiz 09-07-2007 06:49 AM
hmmm is it possible to show a message (or alert ) on the top of the picture to indicate the picture has been resized?

valdet 09-07-2007 08:18 AM
This feature is similar to this hack..
https://vborg.vbsupport.ru/showthread.php?t=125500

TECK 09-07-2007 11:23 AM
Quote:
Originally Posted by kambiz (Post 1334078)
hmmm is it possible to show a message (or alert ) on the top of the picture to indicate the picture has been resized?
Everything is possible. If many other users request it, I will do it... is that fair? :)
I wanted a solution that is very clean and it does not modify the way vBulletin behaves originally.

Quote:
Originally Posted by valdet (Post 1334100)
This feature is similar to this hack..
https://vborg.vbsupport.ru/showthread.php?t=125500
There are many hacks out there that do a similar thing. That does not mean they are written properly.
I want you to tell me what is wrong with the above hack, because there is something wrong with it. :)

NeutralizeR 09-07-2007 11:33 AM
Thank you TECK, installing and testing it now:)

Edit: I'm grateful for all your effors and help! No matter if this hack does whatever i want or not.

If you check my post at that thread you can understand what i need:
https://vborg.vbsupport.ru/showpost....4&postcount=15

Dynamic resizing won't help us much as we have many big images on a single page so the layout will be broken till it completely loads all of the images.

PHP Code:
return '<img class="resize" src="' .  $link . '" border="0" alt="" />'; 
If we can find a way to wrap oversized images with "<a href="$link">...</a>" it'll be done.

The method on vbulletin.org does what i'm asking for but they denied to help me and it's ok :)

Best Regards to Floren Munteanu

TECK 09-07-2007 12:07 PM
Aha, so you basically don't want to open the enlarged picture, when you click on it?
Please be more specific. And you cannot resize an image with JavaScript, before is loaded. It would not know the actual picture dimensions, in order to resize it properly.

In other words, this is the process:
1. Picture is loaded, for the first time. (it will show the full size)
2. Picture size is detected.
3. Picture is formatted to new dimensions.

NeutralizeR 09-07-2007 12:21 PM
Quote:
Originally Posted by TECK (Post 1334199)
Aha, so you basically don't want to open the enlarged picture, when you click on it?
Please be more specific. And you cannot resize an image with JavaScript, before is loaded. It would not know the actual picture dimensions, in order to resize it properly.

In other words, this is the process:
1. Picture is loaded, for the first time. (it will show the full size)
2. Picture size is detected.
3. Picture is formatted to new dimensions.
I want it to be resized before the picture is loaded and have the link to the original picture :) I know javascript can't do it.

I need an advanced version of this hack with the clickable url of the resized picture:
https://vborg.vbsupport.ru/showpost....4&postcount=15

kambiz 09-07-2007 01:00 PM
Quote:
Originally Posted by TECK (Post 1334168)
Everything is possible. If many other users request it, I will do it... is that fair? :)
I wanted a solution that is very clean and it does not modify the way vBulletin behaves originally.
yeah sure.:)

TECK 09-07-2007 01:11 PM
Quote:
Originally Posted by NeutralizeR (Post 1334204)
I want it to be resized before the picture is loaded and have the link to the original picture :) I know javascript can't do it.
You definitely do not want that... because it will ruin your server performance in no time.
There are many hacks on Google that will do this, but from my tests, they will skyrocket the server load, like really really high. And you can do it with JavaScript if you really want to do it like that.

So what you want is to have like a thumbnail displaying a link to the original picture.
That's what it does right now the hack (except the resizing before loading, which I really don't recommend). You cannot see it on your example because the file is very small and it loads instantly. The hack I have listed here is identical to the vBulletin.org one. And I wrapped the [IMG] with a link, like you showed in the example above. If you click on the image, it will show the image... but if you right-click it and open it on a new tab/window with the actual link, not the image.

I recommend you to disable the [IMG] bbcode tag and attach always images. It will do what exactly you need. In the other hand you lose space on your disk. If you go with your desired method, you will kill your server. Is up to you what you want, it is your server. :)

I forgot to mention one important thing. The way this hack is written now, it will work with all browsers. Altering the code to add features will reduce or completely render it unusable.

TECK 09-07-2007 01:27 PM
Hmm, after reading again your post, I noticed that you have many large images on a single page. So you definitely need a resizing option, or somehow to hide the image, before is loaded. The problem with this is that it will render the hack unusable in IE6 and below.

I will think of a clean way to do it, I get the clear picture now related to what you need exactly.
However, I want you post here an example where you have many large images on the same page. I would like to see the effect it does.

Also, the link wrapping... you want that to be done automatically?
If yes, it will mess your signature pictures. Let me know.

Lizard King 09-07-2007 02:50 PM
I was using ncode image resizer however that wasnot working with vB Blog. This one works perfectly. Demo for vb blog http://www.ayyas.com/blog.php?b=787
Thanks Floren :)

NeutralizeR 09-07-2007 04:54 PM
The method i've been using for a while has nothing to do with the server loads as it resize the images with CSS (instead of javascript) and it resize them before the page completely loads.

Only missing thing is the automatic linking to the original image dimensions. Check this page for example:
http://www.msxlabs.org/forum/fantazi...tml#post682559

The picture in the first post is resized (actually shrunk) to 728px width. It's actual width is 1024px.

NeutralizeR 09-07-2007 05:22 PM
I did it thanks to TECK.

vbulletin_global.js:
Code:
/**
* Function to resize an image used with the [IMG] bbcode tag
*
* @param    string    Image object
* @param    string    Image link
* @param    integer    Image max width
*/
function resize_image(obj, link, maxwidth)
{
    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.location.href = link;
            return false;
        };
    }
}

/**
* Function to emulate document.getElementById
CSS:
HTML Code:
.resize {
max-width: 728px; width: expression(this.width > 728 ? 728: true);
}
class_bbcode.php:
PHP Code:
return '<img class="resize" src="' .  $link . '" border="0" alt="" onload="resize_image(this, \'' .  $link . '\', 727);" />'; 
But unfortunately automatic linking to the original dimensions only work for IE and Opera. I at least need it for Firefox, too.

Test page:
http://www.msxlabs.org/forum/fantazi...r-2-a-202.html

ERuiz 09-07-2007 07:42 PM
Does it work with VB 3.6.7?

TECK 09-07-2007 08:36 PM
Quote:
Originally Posted by ERuiz (Post 1334440)
Does it work with VB 3.6.7?
Yes.

Quote:
Originally Posted by NeutralizeR (Post 1334354)
I did it thanks to TECK.
But unfortunately automatic linking to the original dimensions only work for IE and Opera. I at least need it for Firefox, too.

Test page:
http://www.msxlabs.org/forum/fantazi...r-2-a-202.html
I still need your help to understand what exactly you need to do. I'm sorry. I'm pretty smart and I catch up right away when someone is asking me something, but this time I have no idea what you try to accomplish. I thought I got it, but after your new post... I lost you again.

With your link posted above, I don't see any difference between FF and IE.
If anyone understands what NeutralizeR needs, please explain it in different terms, so I get it.

What do you mean by: automatic linking to the original dimensions?

TECK 09-07-2007 08:39 PM
Quote:
Originally Posted by Lizard King (Post 1334276)
I was using ncode image resizer however that wasnot working with vB Blog. This one works perfectly. Demo for vb blog http://www.ayyas.com/blog.php?b=787
Thanks Floren :)
She does like the camera, ehh? You are in trouble when she will be 18, heh.

pspmaster93 09-07-2007 10:09 PM
INSTALLED.

This always was annoying when it screwed up the skin thanks.
But one thing that would make this SO much better is have a little bar above the image saying "This image was resized to meet the maximum image width set by the administrator"
THAT WOULD BE COOL for any future updates on this mod.

NeutralizeR 09-07-2007 10:34 PM
Quote:
Originally Posted by TECK (Post 1334469)
Yes.


I still need your help to understand what exactly you need to do. I'm sorry. I'm pretty smart and I catch up right away when someone is asking me something, but this time I have no idea what you try to accomplish. I thought I got it, but after your new post... I lost you again.

With your link posted above, I don't see any difference between FF and IE.
If anyone understands what NeutralizeR needs, please explain it in different terms, so I get it.

What do you mean by: automatic linking to the original dimensions?
This image is clickable on IE:
http://www.msxlabs.org/forum/682559-mesaj1006.html

But Firefox doesn't support your js edit.

TECK 09-07-2007 10:35 PM
Quote:
Originally Posted by pspmaster93 (Post 1334523)
INSTALLED.

This always was annoying when it screwed up the skin thanks.
But one thing that would make this SO much better is have a little bar above the image saying "This image was resized to meet the maximum image width set by the administrator"
THAT WOULD BE COOL for any future updates on this mod.
You are person no. 2 who requested the above feature. :)
Keep in mind this: There is no way (for now) to separate the [IMG] bbcode from actual postbit and signature. In other words, if you have a message because the image is resized, this message will show anywhere, including the signature, which will make users upset.

I will definitely not edit the code in several vBulletin files, just to avoid this feature in the signature... so be aware what you ask for. :)
Trust me, the best way is to leave it act like vBulletin [IMG] code is supposed, no extra gadgets on the side. If there are more then 20 people who will request this, I will do it, as an optional code. I have a ton of projects I work on it and I certainly don't need a trojan horse on my back. :)

Off Topic: I bought today the new Blackberry 8830. It kicks arse big time, simply an amazing phone. I will blog about it tonight or tomorrow...

TECK 09-07-2007 10:38 PM
Quote:
Originally Posted by NeutralizeR (Post 1334536)
This image is clickable on IE:
http://www.msxlabs.org/forum/682559-mesaj1006.html

But Firefox doesn't support your js edit.
Yes, it does. :)

NeutralizeR 09-07-2007 10:39 PM
Quote:
Originally Posted by TECK (Post 1334540)
Yes, it does. :)
No, it doesn't if you use class="resize" :(

TECK 09-07-2007 10:43 PM
Ok, why do you need to use resize class. To avoid displaying the original sized picture?

Let's fix this baby together. :)
Tell me if the current fix, listed on my server is working properly. If it doesn't the way you want, tell me what is missing, in detailed terms.

NeutralizeR 09-07-2007 10:47 PM
Quote:
Originally Posted by TECK (Post 1334545)
Ok, why do you need to use resize class. To avoid displaying the original sized picture?

Let's fix this baby together. :)
Tell me if the current fix, listed on my server is working properly. If it doesn't the way you want, tell me what is missing, in detailed terms.
I need it because the images won't shrink till the pages completely load.

I combined my previous resizing method with your hack. Current problem is the Firefox issue i mentioned above. You can't click resized images to see their original versions on Firefox.

We can PM or IM each other if you want or i can keep flooding this thread. This hack is dedicated to me, isn't it? :p

TECK 09-07-2007 10:55 PM
Yes, the hack is dedicated to you and to Lizard King... also. :)
We will talk here. It will be a good learning experience for users, since we will talk about code.

OK, I took 2 screenshots, in FF... it is working perfectly. Tell me if I missed something.

NeutralizeR 09-07-2007 11:02 PM
TECK, you may think i'm crazy but it was not working a few hours ago. Both me and Lizard King tested it on IE, Firefox, Opera and Safari.

Somehow... it's also working on Firefox now.. really weird... (of course i updated my browser cache)

Anyway... my final request is being able to see the resized images in a new browser window (or tab) when i click on it.

Lizard King 09-07-2007 11:13 PM
Floren try on here http://www.ayyas.com/blog.php?b=787 we both have the same file edits and css however this is not working.

TECK 09-08-2007 12:53 AM
I see what you guys mean. Mert, when I click on Mina's picture, it should open so you can see the full size picture, right? It does not, currently.

Post what you guys did with the code, you broke it nice. :)
You have to add the class in the JavaScript code. Let see how you did it...

Lizard King 09-08-2007 01:02 AM
class_bbcode edit :

Code:
        return '<img src="' .  $link . '" border="0" alt="" class="imageresize" onload="resize_image(this, \'' .  $link . '\', 540);" />';
vbulletin_global.js edit

Code:
* @param        string        Image object
* @param        string        Image link
* @param        integer        Image max width
*/
function resize_image(obj, link, maxwidth)
{
        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.location.href = link;
                        return false;
                };
        }
}
and the css

HTML Code:
.imageresize      {
        text-decoration: none;
        padding : 4px;
        border : 4px solid #eeeeee;
        max-width: 540px; width: expression(this.width > 540 ? 540: true);
}

TECK 09-08-2007 07:08 AM
Version 1.0.1 released. Code improved related to initial image resize.
http://67.68.90.251/forum/showthread.php?t=3

Do a CRTL + F5 to see what I mean. :)
Ya, you can do it in Firefox also.

TECK 09-08-2007 07:12 AM
Quote:
Originally Posted by NeutralizeR (Post 1334555)
My final request is being able to see the resized images in a new browser window (or tab) when i click on it.
Read the thread, please.
https://vborg.vbsupport.ru/showpost....53&postcount=6

xandizitxu 09-08-2007 08:55 AM
Didn't work for me, im not sure where Should I insert the css if a screenshot is avaible please ^^

NeutralizeR 09-08-2007 11:12 AM
You are my hero :)

Works great now!

TECK 09-08-2007 12:59 PM
Quote:
Originally Posted by xandizitxu (Post 1334725)
Didn't work for me, im not sure where Should I insert the css if a screenshot is avaible please ^^
Read the readme from A to Z. :)

Guys, anyone with IE6 can test the link and see if it's working as it should?
http://67.68.90.251/forum/showthread.php?t=3

And I need demos from other sites, I will not keep up in public mode my server.
I need to play with code and there are chances it will break from time to time. :)


All times are GMT. The time now is 10:31 AM.
Page 1 of 4 1 23 Last »
Show 40 post(s) from this thread on one page

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.01508 seconds
  • Memory Usage 1,861KB
  • 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
  • (2)bbcode_html_printable
  • (2)bbcode_php_printable
  • (15)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)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