I have a table in my mysql db that contains path for images.
I want to display thumbnails of this images.
Can you tell me what is the best solution for that.
This is how i display the full size images from db:
<?php for($i=1; $i<=5; $i++)
{$query = mysql_query("SELECT * FROM photos WHERE product_id='".$i."'");
$row = mysql_fetch_array($query);
$t="img/";
$file = $t .$row[1];
echo "<li><img src = " . $file . "></li>";
} ?>
You can use this http://mightystuff.net/php-thumbnail-script
Either resize the images in css/html (bad) or make a php script that gets a filename as input then returns the scaled down version as output (better) or have thumbnails stored on your server (best)
You should avoid having to resize the images using CSS or HTML. Before saving the images onto the server, you should use ImageMagick to resize it. Do you really want to store a bunch of 6MB images? If that's not feasible, then saving the images as is and pointing to the path would suffice. However, if you end up with hundreds or thousands of images, you'll want to explore a better option.
I agree with the approach of storing the file path (instead of the binary file itself).
So your question is "how do you create a thumbnail?"
The best answer is ImageMagick:
http://www.imagemagick.org/
http://valokuva.org/?p=45
http://php.net/manual/en/book.imagick.php
Related
I am storing all the images in a folder. These images are uploaded by the user through his account. Hence, the images are of different sizes.
I want to display the images in 2 div elements with a fixed width and height (but different from each other) . The sizes may be of the order 40*40 pixels and 200*200 pixels. What would be the better way to do it -
1) Storing images of different sizes in the folder while uploading at the first place, or
2) Using the 'height' and 'width' attributes in img tag in HTML to display the image in the correct size.
Or is there some other way?
Thanks in advance.
Of course it's better to store images already resized and cropped.
If you want to have multiple images with different dimensions .
It will send less data across.
The better way is too store all sizes of all images.In that case it works much faster.
original/test.jpg
40x40/test.jpg
200x200/test.jpg
Also please read this article
http://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/
The best way is to store the original image and request the correct sized image from the client. At that time if the correct size image is not found, create it and add it to a cache folder. Then, deliver the correct size image from the cache.
So if image.png of size 1200x800 is uploaded, store that in original_images folder.
Then, construct a php script sized_image.php and use it in your HTML like this
<img src="sized_image.php?img=image.png&height=200&width=200" />
In your sized_image.php script you would do the following
$fileName = "cached_image/{$_GET['width']}x{$_GET['height']}_{$_GET['img']}";
if (!file_exists($fileName))
{
//resize and store in $fileName
}
$type = 'image/png'; //Or whatever type the image is
header('Content-Type:' . $type);
header('Content-Length: ' . filesize($fileName));
readfile($fileName);
exit();
I am new in web development, i need to create a website for portfolio purposes in which i need to show thumbnail and a little description of my project underneath it and all content should be dynamically displayed. I have basic knowledege of PHP, wordpress, javascript, jquery, python, and HTML/CSS so this i am doing for learning purpose.
I want you guys to please tell me the way how can i do it, just guide me rest of it i will handle.
Some similar examples are
http://themes.themepunch.com/?theme=megafoliopro_jq
http://codecanyon.net/item/dzs-scroller-gallery-cool-jquery-media-gallery/full_screen_preview/457913?ref=ibrandstudio
I am new to this forum and expect someone will answer my question
Thanks a lot mates.
Download CMS Made Simple and get either the album or gallery module. This is one out of many ways to get the job done.
You could glob() a directory to generate your thumbnails using PHP. I use this method on my photography site:
<?php
$counter = 0; // Set counter to 0
foreach (glob("images/photo-strip/thumb/*.jpg") as $pathToThumb) { // Grab files from the thumbnail path and save them to variable
$th_filename = basename($pathToThumb); // Strip the thumbnail filename from the path
$filename = str_replace('th_', '', $th_filename); // Strip th_ from the filename and save it to a different variable
$pathToFull = 'images/photo-strip/' . $filename; // Rebuild the path to the full-size image
echo ("<section class=\"photo-box\"><img src=\"$pathToThumb\" /></section>"); // Echo the photobox
$counter++; // Increment counter by 1 until no file exists
}
?>
You could expand on this code some in order to generate your "captions" perhaps even style your captions off a title="" property inside the <img> tag. How you match those captions up to the file is up to you.
After doing research, I found that it is more recommended to save the image name in database and the actual image in a file directory. Two of the few reasons is that it is more safer and the pictures load a lot quicker. But I don't really get the point of doing this procedure because every time I retrieve the pictures with the firebug tool i can find out the picture path in the file directory which can lead to potential breach.
Am I doing this correctly or it is not suppose to show the complete file directory path of the image?
PHP for saving image into database
$images = retrieve_images();
insert_images_into_database($images);
function retrieve_images()
{
$images = explode(',', $_GET['i']);
return $images;
}
function insert_images_into_database($images)
{
if(!$images) //There were no images to return
return false;
$pdo = get_database_connection();
foreach($images as $image)
{
$path = Configuration::getUploadUrlPath('medium', 'target');
$sql = "INSERT INTO `urlImage` (`image_name`) VALUES ( ? )";
$prepared = $pdo->prepare($sql);
$prepared->execute(array($image));
echo ('<div><img src="'. $path . $image . '" /></div>');
}
}
One method to achieve what you originally intended to do by storing images in database is still continue to serve image via a PHP script, thus:
Shielding your users from knowing the actual path of an image.
You can, and should have, images stored outside of your DocumentRoot, so that they are not able to be served by web server.
Here's one way you can achieve that through readfile():
<?php
// image.php
// Translating file_id to image path and filename
$path = getPathFromFileID($_GET['file_id']);
$image = getImageNameFromFileID($_GET['file_id']);
// Actual full path to the image file
// Hopefully outside of DocumentRoot
$file = $path.$image;
if (userHasPermission()) {
readfile($file);
}
else {
// Better if you are actually outputting an image instead of echoing text
// So that the MIME type remains compatible
echo "You do not have the permission to load the image";
}
exit;
You can then serve the image by using standard HTML:
<img src="image.php?file_id=XXXXX">
You can use .htaccess to protect your images.
See here:
http://michael.theirwinfamily.net/articles/csshtml/protecting-images-using-php-and-htaccess
I'm also working on a project which stores the url path of images on the database (Amazon RDS) and the actual images in a cloud managed file system in Amazon S3.
The decision to do so came primarily with the concern of price, scalability and ease of implementation.
Cheaper: Firstly, it is cheaper to store data in a file system (Amazon S3) compared to a database (Amazon EC2 / RDS).
Scalable: And since the repository of images may grow pretty big in the future, you might also need to ensure that you have the adequate capacity to serve them. On this point, it is easier to scale up a filesystem compared to a database. In fact, if you are using cloud storage (like Amazon S3), you don't even need to worry about having not enough space as it has been managed for you by Amazon! you would just need to pay for what you use.
Ease of Implementation: In terms of implementation, storing images in a file system is much easier. If you were to serve images directly from databases, you would probably need to implement additional logic to convert blob files into html src blob strings to serve images. And from the look of it, this might actually take up quite substantial processing power which might slow your web server down.
On the other hand, if you were to use a filesystem, all you would require is to put down the url path of the image from the database to the src attribute of the image and its all done!
Security: As for security of the images, i have changed the image name to a timestamp concatenated with a random string so that it will prove really difficult for someone to browse for pictures without knowing the file name.
ie. 1342772480UexbblEY7Xj3Q4VtZ.png
Hope this helps!
NB: Please edit my post if you find anything wrong here! this is just my opinion and everyone is welcome to edit!
i need display modyfied image , i have 2 option as i see it
to create temp image that is modified and then delete it
or to create the image on the fly and display it with passthru
for example :
$photo="foo.jpg";
$THUMB_SZ = 125;
$THUMB_PRESZ = $THUMB_SZ * 2;
$QUALITY = 87;
$convert = "/usr/bin/convert";
$command = "$convert -size $THUMB_PRESZ".'x'."$THUMB_PRESZ \"$photo\"" .
" -thumbnail $THUMB_SZ".'x'."$THUMB_SZ" .
" -unsharp 0.2x0.6+1.0" .
" -quality $QUALITY JPG:-";
header("Content-type: image/jpeg");
passthru($command, $retval);
and then in the html part <img src="foo.php">
If you need to create the image more than once, then I would suggest you create the file on disk, for two reasons
It saves creating it more than once.
With the correct caching headers, you can save transferring the data to the same client more than once as well.
If you really only need to show it once, ever, then you can do it using passthrough (or, if you're interested in performance, use the PHP Imagick bindings, it's faster, cleaner and safer than using imagick via the command line).
If you don't need to keep the modified image then using passthru saves a disk write and a delete. Your app is probably not that speed sensitive though.
If I really concern for performance, I would avoid the passthru choice. It would needlessly execute external command each time a user requested the image. If you use temp image, and changed the img src reference to the temp image, only the web server will retrieve the image and send it to the user, no PHP nor convert will be involved. Of course, I was assuming the image is changed not very often.
i'm just feeling that my head will explode unless someone help me with this problem:
I have stored a pair of TIFF images (related by a common key) for each one of almos 100.000 registries. And I create a PHP script that receives a key and echo the tiff image, so the browser return the tiff image:
<?php
// Determine the primary key to relate with the image table
$numero_registro = $_GET['numero_registro'];
$imagen = $_GET['imagen'];
if ($numero_registro != "")
{
$con = mysql_connect("localhost","XXXXX","XXXXXX");
if (!$con)
{
die('Problems with db: ' . mysql_error());
}
mysql_select_db("XXXXX", $con);
$result = mysql_query("SELECT img FROM image_table i WHERE i.fk_civil_registry_code = $numero_registro");
$i = 1;
while($row = mysql_fetch_array($result) )
{
if ( $imagen == $i )
{
#img is a long blob field
$ext="tiff";
header("Content-type: image/{$ext}");
echo $row['img'];
}
$i++;
}
mysql_close($con);
}
?>
This just works and the tiff image is displayed by the browser. But, this is a tiff image, so is displayed lonely (and viewed using alternaTiff). Until know this was no problem, cause I just needed to print a single image. But now my boss buy a big automatic duplex printer, and put it on his office, so I need a way to generate a pdf (of two pages) and put both images (echo $row['img'];) each one on a single page, so they can print the PDF.
Can anyone help me to do that?
Thank you very much.
So you want to generate a 2-page PDF which consists of a tiff image on each page?
Perhaps the following links will be of interest:
http://www.fpdf.org/
http://kevin.vanzonneveld.net/techblog/article/php_tiff2pdf/
Then you can just flush the PDF to the browser.
Are you stuck with PHP? If you can work with ASP.NET, my company has a set of tools that will display and print TIFF images from AJAX controls as well as code that will generate self-printing PDF files. If you did the latter, you could keep your web work in PHP and hook up to a .NET service that takes N tiff files and generates a single printable PDF.
To give you a sense of what that would look like, the C# code to take two tiff images and convert to PDF would be:
FileSystemImageSource images = new FileSystemImageSource(pathToTiff1, pathToTiff2);
PdfEncoder encoder = new PdfEncoder();
encoder.CreateSelfPrintingPdf = true;
encoder.Save(outputStream, images, null);
Instead of a pdf document you could also use an html document with page-break-before css properties. e.g. try
<html>
<head><title>...</title></head>
<body>
<div><img src="http://sstatic.net/so/img/logo.png" /></div>
<div style="page-break-before:always;"><img src="http://sstatic.net/so/img/logo.png" /></div>
</body>
</html>
and then go to the print preview in your browser.