Page 1 of 1
Created an "imageboard" too
Posted: Mon Dec 17, 2007 1:34 pm
by primetch
I'm a bit of a programmer, so I decided to make a PHP-based image server a little while back. I wanted a gallery with upload that wouldn't require any MySQL to work. Here is the result; not perfect, but decent and customizable too.
http://primetech.free-web-hosting.biz/
(Looks a little better in IE6 than Firefox) Let me know what you think if you care to beta-test it!
Posted: Mon Dec 17, 2007 1:41 pm
by Ran
(Relocated to proper section for you. ^_^)
Not a bad way to get started. Maybe start with getting the images to resize without pixelizing? Good luck with the construction.
Posted: Tue Dec 18, 2007 1:32 pm
by primetch
The image resize is the only part that I didn't design myself... it's from the GD plugin library, which is quite fickle when I tested it myself. If I may be so bold to ask, how does *this* site manage such smooth thumbnails?
(GD is a big pain in the neck to install, and that's what it makes.)
Posted: Tue Dec 18, 2007 2:14 pm
by anonymous_object
I use GD as well. See
http://php.net/imagecopyresampled for details.
Posted: Tue Dec 18, 2007 4:10 pm
by primetch
It doesn't seem to help? I switched my imagecopyresized with imagecopyresampled but got the same result.
Posted: Tue Dec 18, 2007 5:55 pm
by A.Dantes
Wrong procedure somewhere mayhap? I was fiddling with things here and all the test images were resized smoothly. PHP version is 5.2.5.
The function I was using:
Code: Select all
// Function resizeImage: Takes an image, resizes it, and saves the result to a file
// $image: Path to input file.
// $thumb: Path to output file.
// $dim1: If dim2 is not NULL, target width to resize to. Otherwise, length of the longest edge.
// $dim2: Target height to resize to. Omit if resizing along the longest edge instead.
// Return Value: TRUE on success, FALSE on error.
function resizeImage( $image, $thumb, $dim1, $dim2=NULL ) {
if ( !file_exists( $image ) ) return FALSE;
list( $width_old, $height_old ) = getimagesize( $image );
$image_old = imagecreatefromjpeg( $image );
if( $dim2==NULL ) {
if ( $height_old > $width_old ) {
$width = $width_old / $height_old * $dim1;
$height = $dim1;
}
else {
$width = $dim1;
$height = $height_old / $width_old * $dim1;
}
}
else {
$width = $dim1;
$height = $dim2;
}
$image_new = imagecreatetruecolor( $width, $height );
imagecopyresampled( $image_new, $image_old, 0, 0, 0, 0, $width, $height, $width_old, $height_old );
imagejpeg( $image_new, $thumb, 80 );
}
Posted: Wed Dec 19, 2007 3:37 pm
by primetch
Hey, this "resampling" works well! Now the trick will be to apply the same to PNG, GIF, etc, which aren't showing up now.
Posted: Wed Dec 19, 2007 4:52 pm
by A.Dantes
At least with the function I was using, the trick would lie with this line:
Code: Select all
$image_old = imagecreatefromjpeg( $image );
The PHP GD library has a imagecreatefrom function for each of the major file types (imagecreatefrompng, imagecreatefromgif), so you will need to add a switch based off of the filetype. The two simplest solutions would be to either pull the mime-type from the $_FILES upload array or use strrchr to parse the file name for its extension. Note when checking mime-types that IE will return the invald type "image/pjpeg" for some jpegs.
Posted: Thu Dec 20, 2007 8:51 am
by primetch
I've seen pjpeg, as well as x-png, too. Ah, found correct function for PNG, (last arg is 0 for no compression), and success! Now all I have to do is get the images to align in a nice expandable/compressible table.
Posted: Thu Dec 20, 2007 11:51 am
by A.Dantes
Tables are so passé. Try this instead:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test Gallery</title>
<link rel="stylesheet" href="screen.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="screen-ie.css" type="text/css" /><![endif]-->
</head>
<body>
<ul class="gallery">
<!-- This block gets repeated for each thumbnail and caption -->
<li>
<div>
<a href="foo.jpg">
<span class="thumb">
<img src="foo.jpg" alt="" height="150" width="200" />
<span></span>
</span>
<span class="caption">Foo!</span></img></li>
</a>
</div>
</li>
<!-- End Block -->
</ul>
</body>
</html>
screen.css:
Code: Select all
.gallery {
list-style: none; }
.gallery li {
text-align: center;
width: 222px;
display: -moz-inline-box;
display: inline-block;
vertical-align: top;
margin: 10px; }
.gallery li a {
cursor: pointer;
cursor: hand; }
.gallery li div {
display: table;
width: 222px; }
.thumb {
height: 220px;
width: 220px;
border: 1px solid black;
display: table-cell;
vertical-align: middle; }
.thumb img {
vertical-align: middle;
border: 0; }
.caption {
display: block;
width: 100%;
overflow: hidden; }
a:link, a:visited { text-decoration: none; }
screen-ie.css
Code: Select all
.gallery li {
display: inline; }
.thumb {
display: block; }
.thumb span {
vertical-align: middle;
height: 100%;
display: inline-block; }