One of my forums has a lot of non-computer savvy people who don't understand the concept of resizing images to suit a forum.
Is it possible to have a function that checks img locations used in a forum post to see if they are over a certain size, and if so, add a size to the html img tags that are created?
That way, we can keep images at no wider than say 640px.
Please enter your server specs in your user profile! 😢
PhoenixOffline
Joined: Mar 18, 2004
Posts: 1543
Location: Netosphere
Presumably you just mean those images linked remotely via the [img] tag, since uploaded image size can already be controlled in forum admin attachment settings.
There are various solutions, most of which are client side (javascript), which will resize on the run.
In fact, I believe one such option is outlined on the DF site - just search for image resize.
Eventually I could add such a feature to ForumsPlus and would most likely use a jQuery plug-in which would either use a max width setting in config or auto image fit to the space available.
as Phoenix said the most common will be a javascript solution, but also you can try the css option, wich will be compatible with almost every modern browser (no IE6, and maybe NOT ie7).
add to you css (themes/THEME/style/style.css);
div.postbody img {max-height:640px;max-height:400px;}
images should be resized.
Phoenix, i've got a nice effect on my forum, wich is using lightbox to see the full size images:
Regrettably I had edited a ForumsPlus file and that has dozens of changes in it.
However, I seem to recall the change was simple. Open viewtopic.php and find these lines at the top
if (!defined('CPG_NUKE')) { exit; }
require_once('modules/'.$module_name.'/nukebb.php');
require_once('includes/nbbcode.php');
Then add this immediately after:
$attach_config['img_max_width_remote'] = 1;
if ($attach_config['img_max_width_remote']) {
$modheader .= '<script src="includes/javascript/jquery.js" type="text/javascript"></script>';
# code courtesy of Eric Juden
$modheader .= '<script>
$(document).ready(function() {
$(\'.postbody img\').load(function() {
$(\'.postbody img\').each(function() {
var maxWidth = '.$attach_config['img_max_width'].'; // Max width for the image
var maxHeight = '.$attach_config['img_max_height'].'; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});
});
});
</script>
';
}
Of course, you also need jquery.js in the includes/javascript/ folder.
Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Last edited by Phoenix on Mon Nov 28, 2011 12:56 pm; edited 2 times in total
macuserauOffline
Joined: Nov 26, 2006
Posts: 21
Location: New South Wales, Australia
