Photo catalogue and ordering site

Heather1 · February 18, 2009, 11:27am

This is following on from the brief discussion over on the main Talk list after we launched our Focal Point thing.

http://www.mandmkent.co.uk/focalpoint/

We’re growing with lots of new images, and adding happy photographers at a rate of knots, so I really need now to learn how to move it to a database-driven site before I drown.

So, idiot-proof and bullet-proof explanations of what I must do in words of single syllables. =o)

We’re currently hosted with HaveHost, so I’m sure we have a lot of the required back office software. Potentially, we may be shifting hosting in the not-too-distant future, but the back office stuff will be virtually the same.

Here’s an outline of what we’d like to do:

Create a searchable catalogue of images, which will be defined by photographer name, catalogue number and keywords.
Include ordering and purchasing options, defined by final print size, output material, frame style.
The ability to upload/manage/delete images, and apply text tags and search criteria easily.
Automatically generate thumbnails and larger preview image from a single uploaded image.
Has to tie in to existing Freeway-designed site and be simple to maintain.

It really has to be idiot- and bullet-proof, because neither of us here is code-minded, though I’m not afraid to get my hands dirty as needed. This will officially be my first dynamic web site, and I am sure mistakes will happen - but since it’s in-house and the only angry client will be me, it should be a good learning experience.

So, where do I begin? Pointers please? And be gentle with me!

Thanks

Heather

(yes, that Heather, but from the day job address!)

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

HeatherKay · February 19, 2009, 3:41pm

On 18 Feb 2009, at 11:27, Heather wrote:

I really need now to learn how to move it to a database-driven site

No takers?

=o(

Heather

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · February 19, 2009, 3:59pm

You know I’ll end up helping you on this

I’ve been working on a set of code lately that includes photo resizing and such. I also have a rich framework of functions for building this sort of a site. I haven’t taken much of a look at your setup yet, but if you want to start thinking about this, here’s the steps I would take.

Think about each of the people who will interact with the site. What sorts of things will they want to do, and what sorts of restrictions do you need to put on them? Login, privileges, logging of actions, that sort of thing. You can organize this information however it feels natural to you, but my favorite are little stories that map a particular path through the site.
Think about each of the assets you want to track. What do you want to know about each one? How many of them do you anticipate tracking? What sorts of reports do you want to get at later?
As far as combining the two goes, are you building a shopping cart where people will buy lots of things at once, or is this geared toward the single-item purchase? How much complexity can you strip away before the thing stops working?

Once you have answered some of these questions, the next step is to model the application in the database. If I were adding a photo to the database, it might look like this:

photo object:
    id (simple numeral auto-incrementing)
    people_id (foreign key: id of its creator)
    path (directory it's stashed in)
    filename
    width (integer pixels)
    height
    camera_details (text)
    keywords (text)
    description (text)
    date_added
    date_taken

That’s just off the top of my head. You might have some other requirements. As you can see, the details of the database start to emerge as you try to imagine what you want to be able to get at later.

Then I would use my framework to do much of the heavy lifting of wiring up forms and populating templates. I would use Freeway to create the empty shells of the various pages, then use Markup Items or the Crowbar Action to add little bits of code, like this: <?=$out?> in the holes of the layout.

I would generate all thumbnails and intermediate sizes dynamically (and cache them in the filesystem) and use a simple naming strategy to locate them later: _t_filename.ext, _p_filename.ext, etc. Most servers have GD installed, and some have ImageMagick (which is like GD on serious anabolic steroids). This lets you do all sorts of amazing things like resizing images and such without lifting (much of) a finger.

I could go on, but I’m trying to get three other things done here. You’ve picked the right project to automate, whether you’ve also picked the right project to learn on depends a lot on how much free time you have to learn as you go.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

HeatherKay · February 19, 2009, 5:38pm

On 19 Feb 2009, at 15:59, waltd wrote:

here’s the steps I would take

Walter, thank you. I will think through what I expect a visitor to do
with the site - essentially, I think it’s very straightforward, but I
ought to work it through more thoroughly.

I have some problems:

I am almost completely codeaphobic, but I want to try and conquer
the fear.
I don’t even know where to begin - even as far as starting with the
data I want to manipulate, what formats, where it goes, etc.

So, I think, to start from the very beginning might be a better idea.

Broad brush strokes, please, given my earlier outline specification:

How do I create the data to begin with? Will it be local to me, or
something that “just happens” when it’s set up on the server?
What, ideally, do I need to set up on the server?

Is it obvious I’m a complete noob? Let’s pretend I’ve landed from
outer space and I need to start from first principles. I really
appreciate you (and others) are busy people, so I don’t expect instant
support every time.

Thanks

Heather

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · February 19, 2009, 5:48pm

Well, gee. There will be a collection of data representing real-world photos or people. These data may take the form of rows in a MySQL database, or files in the filesystem (in the case of photos). They will need to live somewhere that the Web server and the PHP application server can get at them; usually on the Web server itself.

Choose your hosting plan accordingly – Dreamhost offers some stupid-large disk capacity plans that are really hard to pass up. If you’re storing life-size photos on the server, at 10-20MB each, you’re going to need a lot of storage and bandwidth going forward. Another way around this problem is to store the originals on a service like Amazon S3 (this is how FreewayCast works) and only store tiny thumbnails and preview images on your Web server.

Usually, when you build a site such as the one you describe, you end up building two sites. One is the public-facing site beloved by your users and hated by your shallow imitators. The other is the back-end administrator interface, where you toil to maintain your site.

Freeway can be used to design both of these, but eventually the whole thing gets uploaded to your server and becomes live. By this I mean that the database + the programming + the templates “become” the site. One template page drawn in Freeway might become 10,000 virtual pages organized in a thoughtful taxonomy.

So the process will be this:

Design your public pages
Design your data model to support filling those pages with unique information.
Design your private admin console to support adding new data to drive new public pages.
Upload the whole thing to your server, connect it to the database (and set your various image folders so the server can write into them) and then start feeding the beast new data through the admin console.
Rake in the big bucks, and keep your cats in tuna.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

HeatherKay · February 19, 2009, 8:13pm

On 19 Feb 2009, at 17:48, waltd wrote:

Choose your hosting plan accordingly

Good idea. We’re currently with Have Host, but may be switching when
the renewal date comes up. I don’t think space will be an issue,
partly because there’s plenty up there, and partly because I don’t
intend to upload original files. I guess I shall be spending a bit of
time with Photoshop and setting it up to take an original and produce
optimised thumbnails and previews which will be uploaded.

Usually, when you build a site such as the one you describe, you end
up building two sites.

Okay, got that.

Freeway can be used to design both of these, but eventually the
whole thing gets uploaded to your server and becomes live.

I already had that bit taped, but it was how you got to it that
flummoxed me :oD

So the process will be this:

That’s a lot of sense - except my cats don’t like tuna, but hey!

I have a feeling this may be beyond me, but I’m willing to see how far
I can get before I wave the white flag.

Many thanks, Walter. I’ll spend a bit of time tomorrow working through
how I expect folk to work with the site, and what information we need
to get from them as they do it.

Cheers

Heather

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · February 19, 2009, 8:33pm

If you just make the largest file that you expect to see on the site,
the server can make all the other sizes for you. Resizing down in GD
or ImageMagick is really straightforward, and the results look very
nice.

http://scripty.walterdavisstudio.com/gallery

Those photos (all different dimensions, originally) were just dropped
in a folder (test) inside that gallery folder. If you navigate to
gallery/test, you’ll see the contents without a scrollbar. There is an
index.php file in that folder which looks at the contents of the
folder, sees if there are any pictures that it doesn’t know about,
generates thumbnails (with groovy Ektachrome slide mounts, natch) and
then sets up the lightwindow gallery effect. Click on any image to see
it enlarge smoothly and animate onto the screen. The code that makes
the thumbnails is very simple (well, to me, anyway):

$src = imagecreatefromjpeg($this->input_file);
$dst = imagecreatefromjpeg(dirname(__FILE__) . '/_slide.jpg');
$x = ($adj - ($tn_width / 2));
$y = ($adj - ($tn_height / 2));
imagecopyresampled($dst, $src, $x, $y, 0, 0, $tn_width, $tn_height,  
$width, $height);
imagejpeg($dst, $this->output_file);

What really makes this simple is that I’ve clipped out just the part
that resamples a JPEG. This is a few lines out of a much larger block
of code, which is packaged as a class method. I don’t write all of
this out at all, ever. I just say

$i = new image();
$i->input_file = 'original.jpg';
$i->output_file = '_t_original.jpg';
$i->resample(208);

And so I could just as easily have it output a bunch of different
sizes (each with a different name):

$i = new image();
$i->input_file = 'original.jpg';
$i->output_file = '_t_original.jpg';
$i->resample(208);
$i->output_file = '_p_original.jpg';
$i->resample(420);
$i->output_file = '_b_original.jpg';
$i->resample(800);

So, instead of inventing things to do with Photoshop, start thinking
about how to get your Web server to do it for you. It’s ridiculously
overpowered for the job.

Walter

On Feb 19, 2009, at 3:13 PM, Heather Kavanagh wrote:

I guess I shall be spending a bit of time with Photoshop and setting
it up to take an original and produce optimised thumbnails and
previews which will be uploaded.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

HeatherKay · February 20, 2009, 8:15am

On 19 Feb 2009, at 20:33, Walter Lee Davis wrote:

So, instead of inventing things to do with Photoshop, start thinking
about how to get your Web server to do it for you. It’s ridiculously
overpowered for the job.

That’s a very good idea. I like the idea of your script, too.

I am working through a flowchart of how a visitor is intended to
interact with the site this morning (which may become the weekend,
what with one thing and another). I’m to keep it as simple as
possible, but it’s hard not to let my mind wander down side turnings.

Thanks again for your time, Walter. I think M&M will owe you some beer
tokens by the end of it…

Heather

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Heather1 · March 2, 2009, 3:04pm

UPDATE: I’d not forgotten, but we got busy on other work.

After we’d sat and thrashed through the options, prepared the flow chart and thought about whether DIY was feasible, we decided to bite the bullet and go for a bespoke external system.

We had someone in today who will be quoting on the job. It was really down to time: we need it up and running as soon as possible, and if I was learning on the job it would never get done!

Mind you, if their prices are astronomical, I shall be looking again at the DIY route. =o)

Thanks for your time, though, Walter. It is appreciated.

Heather

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options