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:
le="color: #000000"><?php 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:
le="color: #000000"><?php 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)
le="color: #000000"><?php 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
le="color: #000000"><?php <body>
replace with:
le="color: #000000"><?php <body onLoad="ImagesResize()">
open themes/your theme/style.css
add this class:
le="color: #000000"><?php .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.
