Created an "imageboard" too
Created an "imageboard" too
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!
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!
[witty remark here]
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.)
(GD is a big pain in the neck to install, and that's what it makes.)
[witty remark here]
- anonymous_object
- Site Admin
- Posts: 1584
- Joined: Tue Jan 24, 2006 2:04 pm
- Location: Good old US of A
- Contact:
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:
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 );
}
At least with the function I was using, the trick would lie with this line:
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.
Code: Select all
$image_old = imagecreatefromjpeg( $image );
Tables are so passé. Try this instead:
screen.css:
screen-ie.css
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>
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; }
Code: Select all
.gallery li {
display: inline; }
.thumb {
display: block; }
.thumb span {
vertical-align: middle;
height: 100%;
display: inline-block; }