1
If users link to images that are large in size, this can result in a stretched page.. likewise if you don't want large images to be displayed and only want a thumbnail image to be viewed instead (a link underneath each image will show the full size image) then this hack is what you need..
open class/module.textsanitizer.php
FIND:
if ($allowimage != 1) {
$replacements[] = '<a href="\3" target="_blank">\3</a>';
$replacements[] = '<a href="\1" target="_blank">\1</a>';
$replacements[] = '<a href="'.XOOPS_URL.'/image.php?id=\4" target="_blank">\4</a>';
$replacements[] = '<a href="'.XOOPS_URL.'/image.php?id=\2" target="_blank">\3</a>';
} else {
$replacements[] = '<img src="\3" align="\2" alt="" />';
$replacements[] = '<img src="\1" alt="" />';
$replacements[] = '<img src="'.XOOPS_URL.'/image.php?id=\4" align="\2" alt="\4" />';
$replacements[] = '<img src="'.XOOPS_URL.'/image.php?id=\2" alt="\3" />';
}
replace with:
if ($allowimage != 1) {
$replacements[] = '<div class="thumb"><a href="\3" target="_blank">\3</a></div>';
$replacements[] = '<div class="thumb"><a href="\1" target="_blank">\1</a></div>';
$replacements[] = '<div class="thumb"><a href="'.XOOPS_URL.'/image.php?id=\4" target="_blank">\4</a></div>';
$replacements[] = '<div class="thumb"><a href="'.XOOPS_URL.'/image.php?id=\2" target="_blank">\3</a></div>';
} else {
$replacements[] = '<div class="thumb"><img src="\3" align="\2" alt="" /></div>';
$replacements[] = '<div class="thumb"><img src="\1" alt="" /></div>';
$replacements[] = '<div class="thumb"><img src="'.XOOPS_URL.'/image.php?id=\4" align="\2" alt="\4" /></div>';
$replacements[] = '<div class="thumb"><img src="'.XOOPS_URL.'/image.php?id=\2" alt="\3" /></div>';
}
open include/xoops.js
add this to the bottom of the file:
(to change the width of thumbnail, then change the width value (250) to what size you want in both places in the below function)
function ImagesResize() {
var obj = document.getElementsByTagName("div");
for(var i = 0;i<obj.length;i++) {
if (obj[i].className == "thumb") {
var img = obj[i].getElementsByTagName("img");
if (img[0].width > 250) { obj[i].innerHTML = '<div align=center><img src="' + img[0].src + '" width="250">' + '<br><a href="' + img[0].src + '" target="_blank">Show Image In Full Size</a></div>'; }
}
}
}
open themes/your theme/theme.html
find
<body>
replace with:
<body onLoad="ImagesResize()">
open themes/your theme/style.css
add this class:
.thumb {
display: block;
clear: all;
}
you're finished..
now whenever someone uses the [ img] tag on your site a thumbnail will be used instead of the full size image.
note: existing images will not be altered, to change existing images then you would need to edit the post/article etc and submit it again.
