Hi I am having users register on my site. They upload a picture of themselves. I wish to have that image always display the same size (regardless of original upload image size) it would be about a thumbnail size (I am using Bootstrap). Can someone make a suggestion as to how to do this? Thanks! Karen
Are you asking about physically changing the image size in pixels, or simply changing the display size?
It’s simple enough to change the display size with html using the width and height attributes on the <img> element or using css to set the image display size.
Though you may encounter problems with varying aspect ratios if setting both the height and width, if the uploaded image doesn’t match the aspect you set.
There are fixes, you could set only the width (or height) attribute then set the other dimension to auto in css. You could have a script to query the aspect, then set H & W accordingly. Or you could use object-fit to enforce your chosen aspect to any image.
The other problem with taking images as they come is efficiency. If not processed the user submitted images may be well over size for a thumbnail. Someone may upload a 20 megapixel photo straight from their DSC which ends up displayed as a 200px wide thumb.
Since you are taking uploads, I assume there is some back-end scripting going on. So it’s probably best to process the images on upload, there you can set the overall size to something sensible for a thumb. Then with the aspect, either query the image aspect to use for H & W, or crop it to a specific aspect you want.
Hi Sam. Thanks this is more complicated (of course then I thought)
Is there a series of scripts or more thorough analysis of this problem on a step by step basis?
I have a script to determine the type and size (and fail if too big / inappropriate), upload the image to my uploads file (outside web root access) , rename it, And retrieve it again but these steps to 
“. it’s probably best to process the images on upload, there you can set the overall size to something sensible for a thumb. Then with the aspect, either query the image aspect to use for H & W, or crop it to a specific aspect you want”
A ny suggestions on where to go for this?
What are you using for server-side processing?
Hi Sam
These are the scripts I have completed:
- Add User Is a simple script for adding a user to the database (PHP / MySQL with prepared statements)
- Upload image (included see below)
- View user - simple retrieve and display
- Show image - proxy script to retrieve the image from outisde the web root directory.
Upload_image
// Check for an uploaded file:
if (is_uploaded_file($_FILES['upload']['tmp_name'])){
//&& $_FILES['upload']['size'] <= 3072000) {
// Validate the type. Should be JPEG or PNG.
$allowed = array ('image/pjpeg', 'image/gif', 'image/jpeg', 'image/JPG', 'image/X-PNG', 'image/PNG', 'image/png', 'image/x-png');
if (in_array($_FILES['upload']['type'], $allowed)) {
// Create a temporary name
$temp = '../uploads/' . md5($_FILES['upload']['name']);
// Move the file over.
if (move_uploaded_file($_FILES['upload']['tmp_name'], $temp)) {
echo '<p><em>The file has been uploaded!</em></p>';
// Set the $i variable to the image's name:
$i = $_FILES['upload']['name'];
} else { // Invalid type couldn't move the fie over
$errors[] = 'Please upload a JPEG or PNG image or smaller image.';
$temp = $_FILES['upload']['tmp_name'];
}
} // End of isset($_FILES['upload']) IF No uploaded file
else {
$errors[] = 'The file has not been uploaded or the size is too big. Please try again!';
$temp = NULL;
}
// Check for an error:
if ($_FILES['upload']['error'] > 0) {
echo '<p class="error">The file could not be uploaded because: <strong>';
// Print a message based upon the error.
switch ($_FILES['upload']['error']) {
case 1:
//print 'The file load_max_filesize setting in php.ini.';
print 'The file size is too big!';
break;
case 2:
print 'The file size is too big!';
break;
case 3:
print 'The file was only partially uploaded.';
break;
case 4:
print 'No file was uploaded.';
break;
case 6:
print 'No temporary folder was available.';
break;
case 7:
print 'Unable to write to the disk.';
break;
case 8:
print 'File upload stopped.';
break;
default:
print 'A system error occurred.';
break;
} // End of switch.
print '</strong></p>';
} // End of error IF.
// Delete the file if it still exists:
if (file_exists ($_FILES['upload']['tmp_name']) && is_file($_FILES['upload']['tmp_name']) ) {
unlink ($_FILES['upload']['tmp_name']);
}
} // else wrong!
OK, so it’s php at the back-end. You can use the image processing functions to adjust the image as you want.
http://php.net/manual/en/book.image.php
You just need to decide what you want to change. Do you keep the image’s original aspect, or will you force a specific aspect?
You can use getimagesize to get the height and width and work out the original aspect.
http://php.net/manual/en/function.getimagesize.php
imagecrop can crop an image to whatever aspect you want.
http://php.net/manual/en/function.imagecrop.php
imagescale will resize it to a thumbnail.
http://php.net/manual/en/function.imagescale.php
There are a whole load of other image function you may or may not want to use.
Thanks so much I’ll read through those
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.