I have a feature on my site where a user can upload a background image for their specific "channel." The problem that I'm having is that some users upload pictures at resolutions of 3000+px x 2000+px while others upload at 1280 x 720, and so on.
What is the best way to go about this situation? Should I keep letting them upload huge resolutions like that? Or restrict the upload to a certain pixel amount? How would I go about doing this?
Here is where the user can upload a background image:
<?
$images = glob(base_root().'uploads/channels/'. $Channels->id .'/background/{*.jpg,*.Jpg,*.JPG,*.jpeg,*.Jpeg,*.JPEG,*.gif,*.Gif,*.GIF,*.png,*.Png,*.PNG}', GLOB_BRACE);
if(is_array($images) AND count($images) >= 1) {
$imagePaths = pathinfo($images[0]);
$channelBackgroundSrc = base_url() .'uploads/channels/'. $Channels->id .'/background/'. $imagePaths['basename'] .'?rand='. mt_rand(0, 9999);
?>
Here is the code that is on the top of each user's "channel" where it gets the background image for that specific channel.
$(document).ready(function() {
<?
$images = glob(base_root().'uploads/channels/'. $channel['id'] .'/background/{*.jpg,*.Jpg,*.JPG,*.jpeg,*.Jpeg,*.JPEG,*.gif,*.Gif,*.GIF,*.png,*.Png,*.PNG}', GLOB_BRACE);
if(is_array($images) AND count($images) >= 1) {
$imagePaths = pathinfo($images[0]);
$channelBackgroundSrc = base_url() .'uploads/channels/'. $channel['id'] .'/background/'. $imagePaths['basename'] .'?rand='. mt_rand(0, 9999);
?>
document.getElementById('userBackground');
$("#userBackground").css("background", "url('<?=$channelBackgroundSrc?>') repeat-x scroll 0px 0px transparent");
$("#userBackground").css("background-attachment", "fixed");
<?
}
?>
});
I think the best approach is limit the upload filesize from php.ini, and then do a server image resize to finally store it in an optimal resolution.
Here is a great code to resize images in PHP http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/
You can achieve a way to resize the image dynamically to make it fit into the size you want it to from the front-end; however, that's not going to stop them from using your bandwidth and making the site slower to everyone.
The best solution is to set a size, that it's good enough dimension-wise and size-wise and then go with it. Crop it if needed.