Created an "imageboard" too

primetch · Post by **primetch** » Mon Dec 17, 2007 1:34 pm

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!

Ran · Post by **Ran** » Mon Dec 17, 2007 1:41 pm

(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.

primetch · Post by **primetch** » Tue Dec 18, 2007 1:32 pm

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.)

Post by **anonymous_object** » Tue Dec 18, 2007 2:14 pm

I use GD as well. See http://php.net/imagecopyresampled for details.

primetch · Post by **primetch** » Tue Dec 18, 2007 4:10 pm

It doesn't seem to help? I switched my imagecopyresized with imagecopyresampled but got the same result.

A.Dantes · Post by **A.Dantes** » Tue Dec 18, 2007 5:55 pm

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 );
	}

primetch · Post by **primetch** » Wed Dec 19, 2007 3:37 pm

Hey, this "resampling" works well! Now the trick will be to apply the same to PNG, GIF, etc, which aren't showing up now.

A.Dantes · Post by **A.Dantes** » Wed Dec 19, 2007 4:52 pm

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.

primetch · Post by **primetch** » Thu Dec 20, 2007 8:51 am

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.

A.Dantes · Post by **A.Dantes** » Thu Dec 20, 2007 11:51 am

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; }