I had this installed and I thought the problems were hammered out, but my users pointed out that certain pictures smaller than a certain size caused text to show up after the image.
Unfortunately I have to click uninstall until these problems are resolved.
Good idea, though. And this is a needed hack that should be in the base code for vBulletin.
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.
Thanks for gettin back to me, I'll try and replicate similar results and see if what I've got locks up.
Quote:
Originally Posted by m0nde
I had this installed and I thought the problems were hammered out, but my users pointed out that certain pictures smaller than a certain size caused text to show up after the image.
Unfortunately I have to click uninstall until these problems are resolved.
Good idea, though. And this is a needed hack that should be in the base code for vBulletin.
- Sid
I wouldn't give up bro I'd look over the install again, double check.. I got things running smoothly with no complaints but I haven't gone live yet I'm still messing with things. Keep trying. *Forgot to SO Click Install* :tired:
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 don't know coding that well. I tried to add the above to my POSTBIT LEGACY template to have it applied only on the signature part but it resizes all pictures. Here is where I applied the script:
Code:
<!-- sig -->
<div>
__________________<br />
$post[signature]
<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 300;
var mh = 300;
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>
</div>
<!-- / sig -->
I don't know coding that well. I tried to add the above to my POSTBIT LEGACY template to have it applied only on the signature part but it resizes all pictures. Here is where I applied the script:
Code:
<!-- sig -->
<div>
__________________<br />
$post[signature]
<script type="text/javascript">
function resizeImages() {
if (document.images) {
var mw = 300;
var mh = 300;
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>
</div>
<!-- / sig -->
How do I make it only apply to the signature?
Start by taking it out of the postbit... it would be inserting that over and over on showthread.php, so it's bloating your code.
And I haven't written a method for only reducing images in certain areas of the page, but you could conceivably add span tags around the signature area, and look for all images in all signature spans and then just reduce those.
Auto resize Huge images for [IMG] bbcode Details »»
About Developer
Visit Web Site
No support by the author.
06-30-2005, 12:23 AM
