checking image size when converting BBCode text - php

Question

on my mission to use ckEditor as a BBCode editor i am faced with an issue directly for my site.
I have user submitted content that can contain [img] tags.
I really want the images to have a width of 100%, which is fine. I convert any [img] tags to html and apply a class which is styled as i wish.
function basicbbcode($text) {
$text = str_replace("[IMG]", "<img class='buildimage' src='", "$text");
$text = str_replace("[/IMG]", "'>", "$text");
$text = str_replace("[img]", "<img class='buildimage' src='", "$text");
$text = str_replace("[/img]", "'>", "$text");
}
The issue is when someone uses a small / low res image. I dont wish to stretch that image because its going to look horrible.
My aim was to find a threshold, so if the image is more than 800px wide, give it the class of buildimage. If its smaller, give it a class of buildimage-small.
I would then just keep the natural size of that image. I am trying to promote the users providing high quality images but at the same time want to keep the site looking great and no having poorly stretched images because there is res is small.
So, is there a way to check the image size when it is out from the database as the $text variable and then act accordingly. Ideally with php, but maybe jquery?
No idea on this one, possible?

Answer 1

You can use getimagesize():
The getimagesize() function will determine the size of any given image
file and return the dimensions along with the file type and a
height/width text string to be used inside a normal HTML IMG tag and
the correspondant HTTP content type.
<?php
list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
?>
Source: http://us3.php.net/getimagesize

Answer 2

To do it in jQuery it could be as simple as:
var box = $("#boxWithImageInside"),
img = box.find("img.buildimage");
if (img.width() > box.width()) {
img.width("100%");
img.height("auto");
}
The code was not tested, so you may have to adjust it to to what you need.

Answer 3

If you want to solve your problem on client side maybe this helps : FIDDLE
$(function () {
isImgLargerThan800px = function (src) {
var img = new Image();
img.onload = function () {
if (this.width < 800) {
alert('this image need SMALL class')
} else {
alert('this image need LARGE class')
}
};
img.src = src;
};
//TEST
$('a').on('click', function () {
isImgLargerThan800px($(this).text());
alert('Now checking for image size of URL : ' + $(this).text())
})
});