Project:Multi-Photo Imagemaps

From CoMakingSpace Wiki
Jump to: navigation, search
ProjectInfoBox

Multi-Photo Imagemaps

Mpi principle.png
Status: ongoing
Release Date: first results in early 2017
Initiator: Lukas
Team: who else would like to help?
Materials Used: photos
Tools Used: cameras, e.g. DSLR
Software Used: GIMP
Approx. Cost: 0 €


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:

  1. take photos or see whether enough are pending
  2. add a new row at the bottom of the existing file
  3. upload the new file version
  4. go to the page where the file is used as an imagemap
  5. leave all the old links intact & add one for each new photo
  6. 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):

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