Tag photos for easy searching....

Freeway
1

Just finished a photo shoot and I need to make about 300 images available to the client and their sales force.

I have them in 8 different categories, and many images share categories. I have TAGS for each image as they pertain to their respective categories, and many images have 2-3 tags.

Q: How can I create an online photo album where instead of looking at each image to find one they want, they simply click a tag name to filter out all they don’t care about?

Tony

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

2

How are these tags defined? Can you make an example page with a few images on it and post it somewhere? (I’m imagining you don’t want to show the client’s work to the world.)

Walter

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

3

Thanks for the reply Walt,

http://www.fennvalley.com/tag.html

The top image shows all the images in the album, the second image shows the tags / keywords.

The 3rd image is filtered by clicking on one of the tags / keywords, the 4th image shows the tag / keyword clicked.

Thanks > Tony

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

4

Oh, I thought you were making this in Freeway. I’m not sure how you
use tags in this photo management tool. Is this Lightroom or Aperture
or what? Are you exporting these images to a Web format, and then
linking to that from Freeway? Not sure if I can help at this stage.

If you had them all laid out in HTML, I could probably figure this out
for you, presuming that you had some way to actually export the tags
along with the photos, and that there was some structure I could use
to infer the connection to the photos.

Walter

On Aug 25, 2010, at 10:06 AM, duotone wrote:

Thanks for the reply Walt,

http://www.fennvalley.com/tag.html

The top image shows all the images in the album, the second image
shows the tags / keywords.

The 3rd image is filtered by clicking on one of the tags / keywords,
the 4th image shows the tag / keyword clicked.

Thanks > Tony

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

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

5

Walt,

Sorry, this is just an example of what I want to do in freeway…

Go here > http://picasaweb.google.com/FennValleyWinery

On the right side there are 2 tags that will filter your selection of all the images in the site.

I can export from picasa to google with tags in place.

Tony

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

6

That’s great. Can you show me what it looks like as HTML when it comes
to the tags? Are they applied to the photos as classnames, are they
raw text in the view somewhere? Without seeing what you’re trying to
accomplish, even at a small scale, I can’t begin to suggest a solution.

If I were doing this, and I wanted to make the very nicest experience
for my viewers, I would make my slide show as a nested inline
construction:

outer div (HTML box)
	inline div, float left
		photo
		description text
	inline div, float left
		photo
		description text
	...

By careful application of margin styles, you can then make your “slide
sorter” view appear to be a grid. And by applying the tags as
classnames to the inline div, you could then filter on them very
quickly and easily with JavaScript. You could have a set of links at
the side of the page, and when you click one, it would hide all of the
inline DIVs that didn’t have that classname applied. So if you had
<div class="butterfly wine beach"> ... </div> then you could cause
that div to appear when you click a link that triggers a JavaScript
function.

Walter

On Aug 25, 2010, at 10:57 AM, duotone wrote:

Walt,

Sorry, this is just an example of what I want to do in freeway…

Go here > http://picasaweb.google.com/FennValleyWinery

On the right side there are 2 tags that will filter your selection
of all the images in the site.

I can export from picasa to google with tags in place.

Tony

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

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

7

Thanks again Walt.

I’ve decided to pay someone to do it as time is very rare these days.

However, it would be nice to do for other clients if it’s fairly easy.

Tony

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

8

It is, but it requires that you think about how you structure your
page to make the filtering work quickly and smoothly for your visitors.

If you make a single large container DIV, with undefined height, then
add your photos as inline DIVs, and apply your tags as classnames to
those DIVs, you can do something like this to show only the photos
that are “tagged” butterfly:

var images = $$('#gallery > div');
function filter(keyword){
	images.each(function(elm){
		if(elm.hasClassName(keyword){
			elm.show();
		}else{
			elm.hide();
		}
	});
}
<a href="#" onclick="filter('butterfly');">butterfly</a>
<a href="#" onclick="images.invoke('show');">show all</a>

Clicking the link will instantly hide all of the non-butterfly images,
and because you have made the layout as inline elements, that will
cause only the butterfly images to remain and to “collapse” up to show
just those photos. Clicking show all will instantly restore the
original list of images.

Walter

On Aug 25, 2010, at 3:13 PM, duotone wrote:

Thanks again Walt.

I’ve decided to pay someone to do it as time is very rare these days.

However, it would be nice to do for other clients if it’s fairly easy.

Tony

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

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

9

I’ll take this up again when time permits… and will post a link to the site in question when it’s done.

Thanks Walt.

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