Exclusive eBooks, Software Solutions, Quality Guaranteed
Web NukeBiz
Welcome to NukeBiz · Members
Amazon
show cart or checkout0 items
Cart Value: 0.00


ForumsPlus » DragonflyCMS Projects » ForumsPlus » Auto Image sizing
Auto Image sizing
Enhanced CPG-BB.
Topic initiation via Bugger.

Post new topic    Reply to topic    Printer Friendly Page     Forum Index »  Community » ForumsPlus

View previous topic :: View next topic  
Author Message
hybrid
New Poster
New Poster

Offline Offline
Joined: Aug 01, 2010
Posts: 2
Location: Sydney, Australia
PostPosted: Sun Aug 01, 2010 3:13 am
Post subject: Auto Image sizing

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.


hybrid's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
[img]http://www.mustangtech.com.au/serverspecs.php[/img]
Back to top
View user's profile Visit poster's website
Phoenix
Chairman
Chairman

Offline Offline
Joined: Mar 18, 2004
Posts: 1420
Location: Netizen
PostPosted: Tue Aug 03, 2010 1:53 am
Post subject: Re: Auto Image sizing

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.

_________________
DonationsPro for vBulletin, SMF, MyBB, DragonflyCMS


Phoenix's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux / 2.2.21 / 5.0.92 / 5.2.17 / 10.0.5
Back to top
View user's profile Visit poster's website ICQ Number Yahoo Messenger Photo Gallery
Phoenix
Chairman
Chairman

Offline Offline
Joined: Mar 18, 2004
Posts: 1420
Location: Netizen
PostPosted: Tue Aug 03, 2010 3:09 pm
Post subject: Re: Auto Image sizing

This simple solution only resizes images (including signatures) within forum posts.

It uses the existing forum admin settings for maximum attachment width and height.

Right click and view image to see original size 840px restricted to 500px.



Phoenix's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux / 2.2.21 / 5.0.92 / 5.2.17 / 10.0.5
Back to top
View user's profile Visit poster's website ICQ Number Yahoo Messenger Photo Gallery
greenday2k
Nice Poster
Nice Poster

Offline Offline
Joined: Jun 18, 2009
Posts: 7

PostPosted: Thu Aug 05, 2010 6:17 pm
Post subject: Re: Auto Image sizing

There's several options to fix it ;D

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:

www.greenday2k.net/For...13063.html

check the first post.

_________________
[img]http://greenday2k.net/serverspecs.php[img]

greenday2k's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
[img]http://greenday2k.net/serverspecs.php[img]
Back to top
View user's profile
Phoenix
Chairman
Chairman

Offline Offline
Joined: Mar 18, 2004
Posts: 1420
Location: Netizen
PostPosted: Fri Aug 06, 2010 2:33 pm
Post subject: Re: Auto Image sizing

Regrettably, a css solution using max-width and max-height can produce distorted images.

Due to the continuing significant useage of IE 5+, the following css/js max-width solution is more appropriate:
Quote::
div.postbody img {
max-width: 500px;
width: expression(document.body.clientWidth > 500 ? "500px" : "auto");
}

_________________
DonationsPro for vBulletin, SMF, MyBB, DragonflyCMS


Phoenix's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux / 2.2.21 / 5.0.92 / 5.2.17 / 10.0.5


Last edited by Phoenix on Mon Nov 28, 2011 2:27 am; edited 2 times in total
Back to top
View user's profile Visit poster's website ICQ Number Yahoo Messenger Photo Gallery
hybrid
New Poster
New Poster

Offline Offline
Joined: Aug 01, 2010
Posts: 2
Location: Sydney, Australia
PostPosted: Wed Aug 11, 2010 6:06 pm
Post subject: Re: Auto Image sizing

Thanks for the replies fellas.
I guess I could look at using javascript.

I was thinking more along the lines of the BBCode to html conversion doing it.

So in the image tag, we could have [img=800x600]http://link.to.image.com[/img]

Then when the real img tag is produced, we have:
Code::
<img width=800 height=600 src=http://link.to.image.com>

For now I'll check out javascript and see if that will do the job.


hybrid's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
[img]http://www.mustangtech.com.au/serverspecs.php[/img]
Back to top
View user's profile Visit poster's website
macuserau
Nice Poster
Nice Poster

Offline Offline
Joined: Nov 25, 2006
Posts: 17
Location: New South Wales, Australia
PostPosted: Mon Nov 22, 2010 9:24 am
Post subject: Re: Auto Image sizing

Phoenix what is the name of the module, you have used as your image example above?

Do you know where I can find a copy of it?

Cheers


macuserau's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
unix / Apache 2.2.15 / MySQL 5.0.90 / PHP 5.3.2/ CMS 9.2.1
Back to top
View user's profile Visit poster's website
Phoenix
Chairman
Chairman

Offline Offline
Joined: Mar 18, 2004
Posts: 1420
Location: Netizen
PostPosted: Mon Nov 22, 2010 9:36 am
Post subject: Re: Auto Image sizing

hmm, lost it when upgrading the site - that's why the image I provided isn't actually reduced.

I'll have to go look for it.


Phoenix's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux / 2.2.21 / 5.0.92 / 5.2.17 / 10.0.5
Back to top
View user's profile Visit poster's website ICQ Number Yahoo Messenger Photo Gallery
Phoenix
Chairman
Chairman

Offline Offline
Joined: Mar 18, 2004
Posts: 1420
Location: Netizen
PostPosted: Mon Nov 22, 2010 10:43 am
Post subject: Re: Auto Image sizing

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
Quote::
if (!defined('CPG_NUKE')) { exit; }
require_once('modules/'.$module_name.'/nukebb.php');
require_once('includes/nbbcode.php');
Then add this immediately after:
Quote::
$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.


Phoenix's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux / 2.2.21 / 5.0.92 / 5.2.17 / 10.0.5


Last edited by Phoenix on Mon Nov 28, 2011 2:26 am; edited 2 times in total
Back to top
View user's profile Visit poster's website ICQ Number Yahoo Messenger Photo Gallery
macuserau
Nice Poster
Nice Poster

Offline Offline
Joined: Nov 25, 2006
Posts: 17
Location: New South Wales, Australia
PostPosted: Thu Nov 25, 2010 6:02 am
Post subject: Re: Auto Image sizing

Any luck remembering the name of the module, you have used as your image example above?


macuserau's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
unix / Apache 2.2.15 / MySQL 5.0.90 / PHP 5.3.2/ CMS 9.2.1
Back to top
View user's profile Visit poster's website
Phoenix
Chairman
Chairman

Offline Offline
Joined: Mar 18, 2004
Posts: 1420
Location: Netizen
PostPosted: Thu Nov 25, 2010 6:11 am
Post subject: Re: Auto Image sizing

Oh, you meant the actual module in the image Laughing

nukebiz.com/DragonflyAds/

nukebiz.com/Downloads/...ils/id=70/

_________________
DonationsPro for vBulletin, SMF, MyBB, DragonflyCMS


Phoenix's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
Linux / 2.2.21 / 5.0.92 / 5.2.17 / 10.0.5
Back to top
View user's profile Visit poster's website ICQ Number Yahoo Messenger Photo Gallery
macuserau
Nice Poster
Nice Poster

Offline Offline
Joined: Nov 25, 2006
Posts: 17
Location: New South Wales, Australia
PostPosted: Thu Nov 25, 2010 6:45 am
Post subject: Re: Auto Image sizing

Yeah sorry another mis-interpretation. I hope to get the right message across to you one day! May save us both some time. LOL


macuserau's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)
unix / Apache 2.2.15 / MySQL 5.0.90 / PHP 5.3.2/ CMS 9.2.1
Back to top
View user's profile Visit poster's website
Display posts from previous:   
Post new topic    Reply to topic    Printer Friendly Page    Forum Index »  Community » ForumsPlus
Page 1 of 1
All times are GMT



Jump to:  


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum