This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.
This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.
That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.
May I make a suggestion about this hack though? Perhaps another method?
Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?
Example... Put this in your headinclude... and don't bother hacking any vBulletin files:
HTML Code:
<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 800;
var mh = 800;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>
mw = maximum width in pixels.
mh = maximum height in pixels.
I've got mine set to 800 x 800, but you could put what you want in there.
Any img on the page will be resized to fit that area.
Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.
You don't have to use this version, but it's simpler methinks.
I tried this method, and it works great. A great example can be found on this page. Using the server-side resizing hack. This page would just lock up.
Also, I didn't want it to affect other parts of the site, so I used this conditional:
I had to make my figures much higher to work, but it does work. Is there a way to add text to the bottom of the pic if its too big saying "Picture has been resized, click for full size pic" . just so some will know its been resized?
This one resizes on the client using JavaScript appended to each image tag, whereas the other one (the one you quoted) uses server fetch requests to get the image and check the size and adjusts the tag as applicable.
This hack will still load pages slowly for the client, but the layout will be fine. It will be fast for the server, slow for the browser.
That hack will still load pages slowly for the client, and the layout will be fine. But it will be slow for the server, fast for the browser.
May I make a suggestion about this hack though? Perhaps another method?
Instead of adding JavaScript to every IMG tag within every post, and firing that many onloads... why not just add javascript to your headinclude template that parses all images onload?
Example... Put this in your headinclude... and don't bother hacking any vBulletin files:
HTML Code:
<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 800;
var mh = 800;
for (var ii = 0; ii < document.images.length; ii++) {
var i = document.images[ii];
var iw = i.width;
var ih = i.height;
if (ih > iw && ih > mh) {
i.style.height = mh + 'px';
} else if (iw > mw) {
i.style.width = mw + 'px';
}
}
}
}
if (window.addEventListener) {
window.addEventListener('load', resizeImages, false);
} else if (window.attachEvent) {
window.attachEvent('onload', resizeImages);
} else {
window.onload = resizeImages;
}
//-->
</script>
mw = maximum width in pixels.
mh = maximum height in pixels.
I've got mine set to 800 x 800, but you could put what you want in there.
Any img on the page will be resized to fit that area.
Of course, the end user still has to download them, but this resolves the problem with the script part going through to edits and quotes, and is also an easier install.
You don't have to use this version, but it's simpler methinks.
i put it on my headinclude, but the script resized my logo too
Which image rezie script did you use? I saw you linked to one in the OTHER thread and it reseized then onclick made a popup with original image. Did you modify this buro9's code further or switch to the other mod?
would it be possible to have this code generate the resized image as a link trageted to _blank in a new window with the original image in full size?
i install buro9's scrip with SVTBlackLight01 conditional and it works fine, but i'd like the option to click the image for the original.
It would be possible to add that link, but it would have an undesired effect.
What would happen is that when someone quoted or edited a post that had a large image, the additional code that I would have added via JavaScript would dribble through to the editor window or be stripped... this is according to vBulletin's internal stuff that basically reduces to URL tags (no knowledge of target), etc.
What I think I'm going to aim for after 3.5 is released is something far more nefarious.
If an image is detected, I'll resize it on the screen, but I'll also fire off an AJAX request to a custom web service that will edit the post and convert the offending IMG tag to a URL tag The image gets stripped and the link will appear instead.
Far more evil, far more effective... people WILL learn to reduce the image and attach if they want it to be visible
Which image rezie script did you use? I saw you linked to one in the OTHER thread and it reseized then onclick made a popup with original image. Did you modify this buro9's code further or switch to the other mod?
In that thread, what is posted there now is just smaller pics linked to the full size pics (from the gallery). I'm not using the other hack any more. It was causing pages with lots of pictures to completely lock up.
Auto resize Huge images for [IMG] bbcode Details »»
About Developer
Visit Web Site
No support by the author.
05-19-2005, 02:07 PM
A great example can be found on this page. Using the server-side resizing hack. This page would just lock up.
The image gets stripped and the link will appear instead.
