Project:Multi-Photo Imagemaps

ProjectInfoBox Multi-Photo Imagemaps

Status:	abandoned - see Project:Navigation Galleries for a more practical approach
Release Date:	[[ProjectDate::first results in early 2017]]
Initiator:	Lukas
Materials Used:	photos
Tools Used:	cameras, e.g. DSLR
Software Used:	GIMP
Approx. Cost:	0 €

This project is pretty much abandoned - see Project:Navigation Galleries for a more practical approach!

Categories and other long pages encompassing a range of similar items profit from clickable imagemaps that guide the reader to what they are looking for. Taking and mapping a photo with lots of (knolled?) stuff is one option, but difficult to append later on - so this project aims to establish guidelines for imagemaps consisting of multiple photos stitched together (example).

Structure is paramount - crooked or overly cluttered image grids will not look very appealing! Accurate measurements and photo-taking conventions might be enough, otherwise some framing could be added easily. You'll find these and pending pictures here - ideally, the stitched image should remain rectangular so photos can be collected for a while and added when a new row is complete.

General Procedure

Pages with a multi-photo imagemap will get their own section on this page where you can see how to add more. For instance, the original author(s) may have decided that each photo should be cropped to 200 × 200 px and show a tool/material/whatever in front of a white background. Please do the same when providing new images so they will fit in!

Let's say the final imagemap is supposed to be four photos and there are (at least) four suitable photos pending addition - then it's time to map! First you'll nee to add the photos and replace the old file in the wiki, of course (go to its page and click "update a new version").

See the examples in the Extension:ImageMap documentation to understand the code needed. It will be pretty easy as the links follow the same predefined grid as the photos they are mapped to.

Here's the entire pipeline:

take photos or see whether enough are pending
add a new row at the bottom of the existing file
upload the new file version
go to the page where the file is used as an imagemap
leave all the old links intact & add one for each new photo
update the progress on this page!

Pages in Need

Here are some of our pages where such an imagemap would be nice (feel free to add more):

Category:Engineered Woods
Category:Haberdashery
Material:Nuts - lock nuts, hex nuts, wing nuts...
Category:Bits - especially highlighting differences between different drill bits and end mills
Category:Joinery - demo pieces or sketches of various woodworking joints (category doesn't exist yet!)
Material:Crimps - much easier to go by picture than (interchangeably used) names - page doesn't exist yet
Pliers
perhaps the projects on your user page?
<what else?>

Pages in Progress

Category:Metal Parts

link to the current file: metal parts.JPG
individual photo size: 600 × 400 px
imagemap target width: 2400 px
photos so far: 12
pending:
- threaded rods
- clips, e.g. foldback
- hinges
- plumber's tape
- T-slot nuts
- wing nuts
- T nuts (the ones you hammer in)
- <further links and ideas to go here>

Since there are already many "metal parts" pages in this wiki but it may be hard to find them by the exact name or even one of the synonyms we're already aware of, this category page is perfect for testing a multi-photo imagemap as a navigation and information instrument.

It should not go into more detail than the pages that will be linked, i.e. one wood screw and one metric screw should be enough! Someone interested in a more detailed breakdown can consult the screw selection tables or create an additional imagemap for the screw pages...

For a good overview, each photo should show no more than three example parts without a distracting background. Overexposing the photos helps to avoid shadows and make the cleanup process easier. Grouping similar-looking parts would be nice - e.g. screws/rivets/nails in the same row(s).