Hires pictures shared without using file sharing services

How to share hires pictures without using file sharing services but a web server. Here a tutorial to teach you how to do it (for Mac and Textmate users).

Photo of a Sun storm with a beautiful coronal mass ejection (CME).
You can also help solar scientists to spot explosions on the Sun and track them across space to Earth. Your work will give astronauts an early warning if dangerous solar radiation is headed their way. And you could make a new scientific discovery. More on Solar Storm Watch website…

Let’s say you have hundreds of hi-resolution pictures that you need to share “RIGHT NOW!” 

You can’t make a subset: the people at the other end really want to be able to look through the whole set (including the shots you would normally delete).

You realise quickly that several people will have to check the whole set of hires pictures. Not only one.

Your first idea is to use something like Flickr by Yahoo or Picassa Web albums by Google or any other similar web services.

Those solutions are very tempting but you might not be able to upload all the hi-res pictures without paying extra. You might have to create a special account. The provider might re-save your pictures which is unacceptable for your project. You worry about the privacy of your pictures as you’re not ready to share anything at this stage.

Your second idea is to send the ZIP archive of the folder using a bulk send service.
Something like yousendit or mega upload (we all love the adverts of muscular men on this one, don’t we?)

And you would be right, it is indeed the easiest solution.

As long of course as you have a reliable Internet connection with decent upload speed. But even with a good connection, 2GB or more can be tricky to upload. One bit missing and that’s the whole archive doomed.

This will mean of course, that you’re happy to deal with the people at the other end who don’t know what to do with a ZIP file.

The ones who don’t have enough disk space.

The ones who don’t know how to browse those pictures.

The ones who use a trendy smartphone and still want to check the pictures, etc.

 After all we all love doing IT support. It’s part of the fun.

Well.. maybe not.

The other problem is you know that tomorrow, you will receive another set of pictures for that project that you will need to share the same way. So sending and re-sending the whole archive might not be the easiest solution after all because every recipient does not have a reference list of the visuals.

After a nice cup of coffee you have an inspired idea:

« What I need is simple:
 One web page that displays a low res version of the pictures and when you click on one thumbnail you have the hi-res version. 
That way the only thing I have to send by email is this secret link. I guess it would be possibe to protect the page by password somehow.

For this project a hidden URL would be enough. 
No-one will have to download the whole archive. Only the pictures they want.

 That list is the reference to the visuals and can be updated whenever we want. 
Because the name of each file is written close to the thumbnail we can search for a specific image easily without the need for a database.

 I just want one page – No navigation

It’s simple to use: click to the link on the email and scroll! »

The browser will take care of caching the images, only taking time to load the first time.

What you need:

Access to a web server
Understand how to upload files to that server
Photoshop
Textmate
Spreadsheet (Google Docs for example)

What you do:

▶ Upload the hi-res files to your web server.

Create a folder with the name of your project (no spaces, all lower case) and upload the files there. It’s going to be long, better to start as soon as you can.

As soon as the first picture is uploaded you can check if you can see the picture you’ve just uploaded in your web browser. You should have something that look like:
http://mywebserver.com/myproject/name-of-the-picture.JPG

Also check if you have enough disk space on your server for all your hi-res pictures
By the way you shouldn’t upload anything but JPEG files unless you’re asking for trouble.

▶ Generate yourselves the thumbnails (low resolution pictures)

The point is by giving nice low-res version of your pictures, people can take their decisions without downloading the hi-res version.
> Launch Photoshop and :

Open one of the hi-res image.
Create an new action and give it the name of your project
Use “Image size” to resize your picture (10% of the original) to produce a nice, crisp and big thumbnail.
Save it with “save for web” in a folder that we’re going to call “thumbnails”. Use JPEG settings with quality set at 70%, “optimized” and “sRGB conversion” checked. Don’t change the name of the file: it has to be the same as the hires file.
Close the image without saving it.
Stop the recording of your action
On the File menu select Automate / Batch…
On the Batch window:
- On Action menu, select the name of the action you’ve just recorded
- On the Source section select “Folder” then click on “choose” to select your hires pictures folder. On this section no checkbox should be ticked.
- On Destination, select “None”. Yes that’s right we don’t need a destination because we’ve already recorded the destination folder when we used “save for web” in the action.
- Click “OK”The mini pictures are generated. It can take some time. If something goes wrong you can always stop the action by pressing command and the full stop keys.

▶ Open a new connection to your web server and upload your thumbnails folder on the same folder as your hires pictures.

▶ Create the html page listing the pictures

We are now creating the interface to control the display of the pictures : a simple web page with the list of the images.
> Open Textmate

Create a new HTML file:
Menu File -> “New from template” -> HTML -> HTML 4.01 Transitional.
After the “body” tag type: <ul>here</ul>
This is our list that we’re going to populate with the name of each file
Save this document as index.html

▶ On the Finder, select all the hires files…

…then select Edit -> “copy”

▶ On Textmate, create a new file (File -> New)…

..then on the Edit menu select paste.You should see the list of all the hires files but they are not on alphabetical order. It’s much better to have them in alphabetical order. However if you don’t mind just skip the next step.

▶ Reorder the list:

Select the full list in your textmate document (Edit -> Select -> All) and copy it (Edit -> Copy)
Open a new spreadsheet (I use Google Docs, but feel free to use Excel or similar software)
Paste your list of filename into the spreadsheet
With the command sort, reorder your list in alpabetical order (A-> Z) or in any order you want.
Select your column and copy it
On your Textmate document replace the unordered list by your new ordered one (select all then paste)

▶ Create the html code for the list itself

What you should see at that stage is a list of filenames with the extension .JPG.
We assume the begining of each filename start with DSC_ which is a common prefix for files coming from a digital camera.

In Textmate, bring the Find window (Edit -> Find -> Find)
On the Find section type:DSC_(.*?)\.JPG
On the Replace section type:<li><a href="http://mywebserver.com/myproject/DSC_$1.JPG" title="DSC_$1"><img src="http://mywebserver.com/myproject/thumbnails/DSC_$1.jpg" alt="DSC_$1"></a> <small>DSC_$1.JPG</small></li>
Where “http://mywebserver.com/myproject/” is the URL you’ve tested before while uploading your files.
Check the Regular Expression checkbox

(what’s a regular expression?)

Before to hit “Replace All” you may want to understand what this code do.On the “Find” section we’re looking for the part of the filename that varies.
On the “Replace” section we’re creating the actual html code for the list of pictures with the link to the thumbnails and the link to the hi-res picture. The “$1” is the variable we found on the “Find” section.

Also on this example the thumbnails have a “.jpg” extension (lowercase) and the hires files a .JPG extension (capitals). If you’re using a Centos Linux which is a case sensitive operating system you have to be extra careful because image.jpg is not the same as image.JPG.
Lastly you may notice the link to the images are absolute links, it means this html page will work from anywhere. It’s very handy.

You can test if the replacement works by clicking on “next” then “replace”. However just do a “undo” before clicking on “Replace all”.
At that stage you should have your list as html code. Just “select all” and then “copy”.
On your index.html document, select the word “here” and then paste.
It’s a good idea to save your index.html file now!
On Window menu select “Show Web Preview”You should see a list of small images that goes on and on, and if you click on one of them, the hires version of that picture should be loaded.
It works?
Congratulations!
If it doesn’t work, well, you need to fix it but don’t worry that’s usually when the fun begins.

▶ Now upload index.html file on your web server into your myproject folder

And of course test if “http://mywebserver.com/myproject/” display that web page.

Once it works you can email the people who need to access those files. 
It’s more than likely that the hires pictures are still uploading. But at least people can check the thumbnails. The hires version will be accessible to them later.

During that time you can go and have a walk and maybe a coffee or a tea with a cupcake (after all that’s why we created computers: to work for us) :-)

Example: http://free.motherland-music.com/carlou/galleria/

Good luck.
Thanks to Rick for helping me to write this post.

Published on Tuesday 9 March 2010, modified on Wednesday 17 March 2010 at 23:17 (GMT) , by Thibault.

✔ An elegant and efficient way to share hundreds of hires pictures