Jump to content
Objectivism Online Forum

AmaGallery

Rate this topic


Amaroq

Recommended Posts

I coded this gallery from scratch. If you don't mind seeing pictures of furries, here it is.

http://amaroq.org/gallery/gallery.php

This was my first (and only, so far) large-ish PHP project. It was also my first venture into PHP OOP, as well as my first time seriously making use of the GD library. (Before this, I experimented with GD a little bit. My random forum avatar is the result of this experimentation.)

Here's the gist of how it works: AmaGallery searches a predefined Images folder for images, checks this list against a Thumbnails folder, generates any thumbnails that are missing and saves them to that folder (if needed), then displays all of the thumbnails, each one a link to its full-sized picture.

Keeping a thumbnails folder is much more efficient than generating the thumbnails every time the gallery is loaded. When I delete all the pictures before loading the gallery, it takes upwards of a minute to load. But every time after that, it loads almost instantly.

The images are validated in two ways: The extention (.jpg/.jpeg, .gif, .png), and it uses GD itself to validate that it's really got image data. No uploading or includ()ing hidden php scripts here! If it's not an image, it's skipped. (If I remember right... I'll have to look again. It's been a while.)

Once you're viewing a full-view image, one of two things can happen:

If you have javascript disabled or blocked, full size is shown.

If you have javascript enabled, the width and height of your window is autodetected. (Or rather, the size of the space for the document to be displayed.) Javascript loads two images into memory. The first image is actually a request to a php file that generates a resized image on the fly, once again using GD. (With the format being directgen.php?image=[image url here]&width=[pixels]&height=[pixels]). It lies to your browser, sending a header that tells the browser it's receiving image data. The image it loads is the fullsize you are viewing, but the width and height requested are based on the autodetected page size. The second image javascript loads into memory is the actual full-sized image. The first one is displayed, and the second one is held in memory. The first and second swap every time you click the image.

What that basically means is that when you click on a thumbnail, your browser quickly loads a server-generated version of the image that fits your window. The larger, full-sized, bandwidth-hungry image is loading in the background while you're viewing the fitting image. When you click the fitted image, javascript swaps it with the full sized one to give you a full view, and clicking it again switches back.

AmaGallery is set up to be easily configurable via a single config file. Amongst the many options you can set up are the images directory, the thumbnails directory, and size of the thumbnails. You can set width and/or height. If only one dimension is set, the aspect ratio of the original image is maintained. If both width and height are set, then they will be treated as a maximum width and maximum height, once again while maintaining the aspect ratio.

Another thing I like is the idea for the main gallery page's gallery specific CSS file. It's actually another php file that lies to your browser. It sends a header telling the browser that it's CSS, then outputs some dynamically generated CSS. Then the php block closes and the rest of the file is CSS as normal. (This is to size the tables to something close to the thumbnails. The fullviews do not use this.)

Compare these three links.

http://amaroq.org/gallery/gallery.css.php

http://amaroq.org/gallery/gallery.css.php?...&td_w=100px

http://amaroq.org/gallery/gallery.css.php?...&td_w=200px

That's all I can think of right now. Yes, it's still lacking in functionality. Like the ability to separate the main gallery into pages, and commenting on individual images, for example. I don't even have a previous or next link in the fullview, so you have to back up to the gallery to go to the next image. And it doesn't have an uploader script either. I ftp in when I want to put images in.

Link to comment
Share on other sites

I don't even have a previous or next link in the fullview, so you have to back up to the gallery to go to the next image.
Those little buttons are more important than you think... particularly the "Next" button.

Sounds like you had fun programming the image-scaling.

Do you use an IDE like Zend or Eclipse?

Link to comment
Share on other sites

I had fun programming the whole thing! I'd also promised to set up a custom version of it for a friend within a certain amount of time, so that pushed me to complete it on time too.

No IDE. I wrote it all from scratch in a simple text editor that had syntax highlighting. Gedit, if you're curious.

And unfortunately, of all the features I want to add to it, the previous/next buttons is the one most likely to give me trouble. Adding the ability to do pages is as simple as only looking at a portion of the Images directory list. Commenting, would be tougher. I think I could just add that functionality to the full-view part. Previous/next buttons would require me to dive back into the gallery code and redo stuff. Hmm...

Edited by Amaroq
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...