Store full size photos that are uploaded on filesystem, put hash in database. Fixes #9, basics for #209 (needs light box adding).

32 files changed, 129 insertions, 133 deletions

diff --git a/bin/send-reports b/bin/send-reports
index d92c10467..e012cc1f0 100755
--- a/bin/send-reports
+++ b/bin/send-reports
@@ -69,7 +69,7 @@ while (my $row = $unsent->next) {
     $h{phone_line} = $h{phone} ? _('Phone:') . " $h{phone}\n\n" : '';
     if ($row->photo) {
         $h{has_photo} = _("This web page also contains a photo of the problem, provided by the user.") . "\n\n";
-        $h{image_url} = $email_base_url . '/photo?id=' . $row->id;
+        $h{image_url} = $email_base_url . '/photo/' . $row->id . '.full.jpeg';
     } else {
         $h{has_photo} = '';
         $h{image_url} = '';
diff --git a/conf/general.yml-example b/conf/general.yml-example
index efdb5d007..323678487 100644
--- a/conf/general.yml-example
+++ b/conf/general.yml-example
@@ -22,7 +22,7 @@ TEST_EMAIL_PREFIX: ''
 CONTACT_NAME: 'FixMyStreet'
 STAGING_SITE: 1
 
-UPLOAD_CACHE: '/upload/'
+UPLOAD_DIR: '/upload/'
 GEO_CACHE: '/cache/'
 GOOGLE_MAPS_API_KEY: ''
 BING_MAPS_API_KEY: ''
diff --git a/notes/INSTALL b/notes/INSTALL
index 560eb6c0f..bb28e60fa 100644
--- a/notes/INSTALL
+++ b/notes/INSTALL
@@ -21,7 +21,7 @@ to populate the alert types table.
 Copy conf/general.yml-example to conf/general.yml and set it up appropriately:
 * provide the relevant database connection details
 * the BASE_URL to be where your test site will run - eg 'http://localhost'
-* set UPLOAD_CACHE and GEO_CACHE to your preferred values
+* set UPLOAD_DIR and GEO_CACHE to your preferred values
 * MAP_TYPE - OSM is probably the best one to try to start with, it's being
   successfully used.
 
diff --git a/notes/no-update-server b/notes/no-update-server
index ad1ce26e2..1f59c0116 100644
--- a/notes/no-update-server
+++ b/notes/no-update-server
@@ -323,7 +323,7 @@ TEST_EMAIL_PREFIX: ''
 CONTACT_NAME: 'FiksGataMi'
 STAGING_SITE: 1
 
-UPLOAD_CACHE: '/var/lib/fixmystreet/upload/'
+UPLOAD_DIR: '/var/lib/fixmystreet/upload/'
 GEO_CACHE: '/var/lib/fixmystreet/cache/'
 GOOGLE_MAPS_API_KEY: ''
 
diff --git a/perllib/FixMyStreet/App.pm b/perllib/FixMyStreet/App.pm
index 0582d88c9..262379b79 100644
--- a/perllib/FixMyStreet/App.pm
+++ b/perllib/FixMyStreet/App.pm
@@ -11,6 +11,7 @@ use mySociety::EmailUtil;
 use mySociety::Random qw(random_bytes);
 use FixMyStreet::Map;
 
+use Path::Class;
 use URI;
 use URI::QueryParam;
 
@@ -415,6 +416,30 @@ sub render_fragment {
     $c->view('Web')->render($c, $template, $vars);
 }
 
+=head2 get_photo_params
+
+Returns a hashref of details of any attached photo for use in templates.
+Hashref contains height, width and url keys.
+
+=cut
+
+sub get_photo_params {
+    my ($self, $key) = @_;
+    $key = ($key eq 'id') ? '' : "/$key";
+
+    return {} unless $self->photo;
+
+    my $photo = {};
+    if (length($self->photo) == 40) {
+        $photo->{url_full} = '/photo' . $key . '/' . $self->id . '.full.jpeg';
+    } else {
+        ( $photo->{width}, $photo->{height} ) =
+          Image::Size::imgsize( \$self->photo );
+    }
+    $photo->{url} = '/photo' . $key . '/' . $self->id . '.jpeg';
+
+    return $photo;
+}
 
 =head1 SEE ALSO
 
diff --git a/perllib/FixMyStreet/App/Controller/Open311.pm b/perllib/FixMyStreet/App/Controller/Open311.pm
index fe1494b95..34e2b7cd3 100644
--- a/perllib/FixMyStreet/App/Controller/Open311.pm
+++ b/perllib/FixMyStreet/App/Controller/Open311.pm
@@ -283,7 +283,7 @@ sub output_requests : Private {
         my $display_photos = $c->cobrand->allow_photo_display;
         if ($display_photos && $problem->photo) {
             my $url = $c->cobrand->base_url();
-            my $imgurl = $url . "/photo?id=$id";
+            my $imgurl = $url . "/photo/$id.full.jpeg";
             $request->{'media_url'} = [ $imgurl ];
         }
         push(@problemlist, $request);
diff --git a/perllib/FixMyStreet/App/Controller/Photo.pm b/perllib/FixMyStreet/App/Controller/Photo.pm
index 3f55e4692..3ca7f13a9 100644
--- a/perllib/FixMyStreet/App/Controller/Photo.pm
+++ b/perllib/FixMyStreet/App/Controller/Photo.pm
@@ -5,6 +5,7 @@ use namespace::autoclean;
 BEGIN {extends 'Catalyst::Controller'; }
 
 use DateTime::Format::HTTP;
+use Path::Class;
 
 =head1 NAME
 
@@ -25,17 +26,30 @@ Display a photo
 
 =cut
 
-sub index :Path :Args(0) {
+sub during :LocalRegex('^([0-9a-f]{40})\.temp\.jpeg$') {
     my ( $self, $c ) = @_;
+    my ( $hash ) = @{ $c->req->captures };
 
-    my $id = $c->req->param('id');
-    my $comment = $c->req->param('c');
-    $c->detach( 'no_photo' ) unless $id || $comment;
+    my $file = file( $c->config->{UPLOAD_DIR}, "$hash.jpeg" );
+    my $photo = $file->slurp;
+
+    if ( $c->cobrand->default_photo_resize ) {
+        $photo = _shrink( $photo, $c->cobrand->default_photo_resize );
+    } else {
+        $photo = _shrink( $photo, 'x250' );
+    }
+
+    $c->forward( 'output', [ $photo ] );
+}
+
+sub index :LocalRegex('^(c/)?(\d+)(?:\.(full|tn|fp))?\.jpeg$') {
+    my ( $self, $c ) = @_;
+    my ( $is_update, $id, $size ) = @{ $c->req->captures };
 
     my @photo;
-    if ( $comment ) {
+    if ( $is_update ) {
         @photo = $c->model('DB::Comment')->search( {
-            id => $comment,
+            id => $id,
             state => 'confirmed',
             photo => { '!=', undef },
         } );
@@ -56,14 +70,30 @@ sub index :Path :Args(0) {
     $c->detach( 'no_photo' ) unless @photo;
 
     my $photo = $photo[0]->photo;
-    if ( $c->req->param('tn' ) ) {
+
+    # If photo field contains a hash
+    if (length($photo) == 40) {
+        my $file = file( $c->config->{UPLOAD_DIR}, "$photo.jpeg" );
+        $photo = $file->slurp;
+    }
+
+    if ( $size eq 'tn' ) {
         $photo = _shrink( $photo, 'x100' );
-    } elsif ( $c->req->param('fp' ) ) {
+    } elsif ( $size eq 'fp' ) {
         $photo = _crop( $photo );
+    } elsif ( $size eq 'full' ) {
     } elsif ( $c->cobrand->default_photo_resize ) {
         $photo = _shrink( $photo, $c->cobrand->default_photo_resize );
+    } else {
+        $photo = _shrink( $photo, 'x250' );
     }
 
+    $c->forward( 'output', [ $photo ] );
+}
+
+sub output : Private {
+    my ( $self, $c, $photo ) = @_;
+
     my $dt = DateTime->now();
     $dt->set_year( $dt->year + 1 );
 
diff --git a/perllib/FixMyStreet/App/Controller/Questionnaire.pm b/perllib/FixMyStreet/App/Controller/Questionnaire.pm
index f0cb02115..6ed7ddd9d 100755
--- a/perllib/FixMyStreet/App/Controller/Questionnaire.pm
+++ b/perllib/FixMyStreet/App/Controller/Questionnaire.pm
@@ -205,10 +205,7 @@ sub submit_standard : Private {
             }
         );
         if ( my $fileid = $c->stash->{upload_fileid} ) {
-            my $file = file( $c->config->{UPLOAD_CACHE}, "$fileid.jpg" );
-            my $blob = $file->slurp;
-            $file->remove;
-            $update->photo($blob);
+            $update->photo( $fileid );
         }
         $update->insert;
     }
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index 12b48a99b..c61f4847c 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -5,6 +5,7 @@ use namespace::autoclean;
 BEGIN { extends 'Catalyst::Controller'; }
 
 use FixMyStreet::Geocode;
+use Digest::SHA1 qw(sha1_hex);
 use Encode;
 use Image::Magick;
 use List::MoreUtils qw(uniq);
@@ -47,7 +48,10 @@ back into lat/lng by the map code.
 
 =head2 image related
 
-Parameters are 'photo' or 'upload_fileid'. The 'photo' is used when a user has selected a file. Once it has been uploaded it is cached on disk so that if there are errors on the form it need not be uploaded again. The cache location is stored in 'upload_fileid'. 
+Parameters are 'photo' or 'upload_fileid'. The 'photo' is used when a user has
+selected a file. Once it has been uploaded it is cached on disk so that if
+there are errors on the form it need not be uploaded again. The hash of the
+photo is stored in 'upload_fileid'.
 
 =head2 optional
 
@@ -200,8 +204,8 @@ sub report_import : Path('/import') {
     }
 
     # handle the photo upload
-    $c->forward( 'process_photo_upload', [ { rotate_photo => 1 } ] );
-    my $photo = $c->stash->{upload_fileid};
+    $c->forward( 'process_photo_upload' );
+    my $fileid = $c->stash->{upload_fileid};
     if ( my $error = $c->stash->{photo_error} ) {
         push @errors, $error;
     }
@@ -224,7 +228,7 @@ sub report_import : Path('/import') {
           if $@;
     }
 
-    unless ( $photo || ( $latitude || $longitude ) ) {
+    unless ( $fileid || ( $latitude || $longitude ) ) {
         push @errors, 'Either a location or a photo must be provided.';
     }
 
@@ -292,11 +296,8 @@ sub report_import : Path('/import') {
     );
 
     # If there was a photo add that too
-    if ( $photo ) {
-        my $file = file( $c->config->{UPLOAD_CACHE}, "$photo.jpg" );
-        my $blob = $file->slurp;
-        $file->remove;
-        $report->photo($blob);
+    if ( $fileid ) {
+        $report->photo($fileid);
     }
 
     # save the report;
@@ -825,11 +826,7 @@ sub process_photo : Private {
 }
 
 sub process_photo_upload : Private {
-    my ( $self, $c, $args ) = @_;
-
-    # setup args and set defaults
-    $args ||= {};
-    $args->{rotate_photo} ||= 0;
+    my ( $self, $c ) = @_;
 
     # check for upload or return
     my $upload = $c->req->upload('photo')
@@ -842,9 +839,13 @@ sub process_photo_upload : Private {
         return;
     }
 
-    # convert the photo into a blob (also resize etc)
-    my $photo_blob =
-      eval { _process_photo( $upload->fh, $args->{rotate_photo} ) };
+    # get the photo into a variable
+    my $photo_blob = eval {
+        my $filename = $upload->tempname;
+        my $out = `jhead -se -autorot $filename`;
+        my $photo = $upload->slurp;
+        return $photo;
+    };
     if ( my $error = $@ ) {
         my $format = _(
 "That image doesn't appear to have uploaded correctly (%s), please try again."
@@ -853,21 +854,18 @@ sub process_photo_upload : Private {
         return;
     }
 
-    # we have an image we can use - save it to the cache in case there is an
-    # error
-    my $cache_dir = dir( $c->config->{UPLOAD_CACHE} );
+    # we have an image we can use - save it to the upload dir for storage
+    my $cache_dir = dir( $c->config->{UPLOAD_DIR} );
     $cache_dir->mkpath;
     unless ( -d $cache_dir && -w $cache_dir ) {
         warn "Can't find/write to photo cache directory '$cache_dir'";
         return;
     }
 
-    # create a random name and store the file there
-    my $fileid = int rand 1_000_000_000;
-    my $file   = $cache_dir->file("$fileid.jpg");
-    $file->openw->print($photo_blob);
+    my $fileid = sha1_hex($photo_blob);
+    $upload->copy_to( file($cache_dir, $fileid . '.jpeg') );
 
-    # stick the random number on the stash
+    # stick the hash on the stash, so don't have to reupload in case of error
     $c->stash->{upload_fileid} = $fileid;
 
     return 1;
@@ -883,12 +881,12 @@ does return true and put fileid on stash, otherwise false.
 sub process_photo_cache : Private {
     my ( $self, $c ) = @_;
 
-    # get the fileid and make sure it is just a number
+    # get the fileid and make sure it is just a hex number
     my $fileid = $c->req->param('upload_fileid') || '';
-    $fileid =~ s{\D+}{}g;
+    $fileid =~ s{[^0-9a-f]}{}gi;
     return unless $fileid;
 
-    my $file = file( $c->config->{UPLOAD_CACHE}, "$fileid.jpg" );
+    my $file = file( $c->config->{UPLOAD_DIR}, "$fileid.jpeg" );
     return unless -e $file;
 
     $c->stash->{upload_fileid} = $fileid;
@@ -980,10 +978,7 @@ sub save_user_and_report : Private {
 
     # If there was a photo add that too
     if ( my $fileid = $c->stash->{upload_fileid} ) {
-        my $file = file( $c->config->{UPLOAD_CACHE}, "$fileid.jpg" );
-        my $blob = $file->slurp;
-        $file->remove;
-        $report->photo($blob);
+        $report->photo($fileid);
     }
 
     # Set a default if possible
@@ -1123,41 +1118,6 @@ sub redirect_to_around : Private {
     return $c->res->redirect($around_uri);
 }
 
-sub _process_photo {
-    my $fh = shift;
-    my $import = shift;
-
-    my $blob = join('', <$fh>);
-    close $fh;
-    my ($handle, $filename) = mySociety::TempFiles::named_tempfile('.jpeg');
-    print $handle $blob;
-    close $handle;
-
-    my $photo = Image::Magick->new;
-    my $err = $photo->Read($filename);
-    unlink $filename;
-    throw Error::Simple("read failed: $err") if "$err";
-    $err = $photo->Scale(geometry => "250x250>");
-    throw Error::Simple("resize failed: $err") if "$err";
-    my @blobs = $photo->ImageToBlob();
-    undef $photo;
-    $photo = $blobs[0];
-    return $photo unless $import; # Only check orientation for iPhone imports at present
-
-    # Now check if it needs orientating
-    ($fh, $filename) = mySociety::TempFiles::named_tempfile('.jpeg');
-    print $fh $photo;
-    close $fh;
-    my $out = `jhead -se -autorot $filename`;
-    if ($out) {
-        open(FP, $filename) or throw Error::Simple($!);
-        $photo = join('', <FP>);
-        close FP;
-    }
-    unlink $filename;
-    return $photo;
-}
-
 __PACKAGE__->meta->make_immutable;
 
 1;
diff --git a/perllib/FixMyStreet/App/Controller/Report/Update.pm b/perllib/FixMyStreet/App/Controller/Report/Update.pm
index 29933e2f6..600684a40 100644
--- a/perllib/FixMyStreet/App/Controller/Report/Update.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/Update.pm
@@ -282,10 +282,7 @@ sub save_update : Private {
 
     # If there was a photo add that too
     if ( my $fileid = $c->stash->{upload_fileid} ) {
-        my $file = file( $c->config->{UPLOAD_CACHE}, "$fileid.jpg" );
-        my $blob = $file->slurp;
-        $file->remove;
-        $update->photo($blob);
+        $update->photo($fileid);
     }
 
     if ( $update->in_storage ) {
diff --git a/perllib/FixMyStreet/App/Controller/Rss.pm b/perllib/FixMyStreet/App/Controller/Rss.pm
index 822780b81..4d0b6cb93 100755
--- a/perllib/FixMyStreet/App/Controller/Rss.pm
+++ b/perllib/FixMyStreet/App/Controller/Rss.pm
@@ -267,8 +267,8 @@ sub add_row : Private {
     $item{category} = $row->{category} if $row->{category};
 
     if ($c->cobrand->allow_photo_display && $row->{photo}) {
-        my $key = $alert_type->item_table eq 'comment' ? 'c' : 'id';
-        $item{description} .= ent("\n<br><img src=\"". $c->cobrand->base_url . "/photo?$key=$row->{id}\">");
+        my $key = $alert_type->item_table eq 'comment' ? 'c/' : '';
+        $item{description} .= ent("\n<br><img src=\"". $c->cobrand->base_url . "/photo/$key$row->{id}.jpeg\">");
     }
 
     if ( $row->{used_map} ) {
diff --git a/perllib/FixMyStreet/DB/Result/Comment.pm b/perllib/FixMyStreet/DB/Result/Comment.pm
index 958194eb8..195fe4019 100644
--- a/perllib/FixMyStreet/DB/Result/Comment.pm
+++ b/perllib/FixMyStreet/DB/Result/Comment.pm
@@ -132,21 +132,12 @@ sub confirm {
 =head2 get_photo_params
 
 Returns a hashref of details of any attached photo for use in templates.
-Hashref contains height, width and url keys.
 
 =cut
 
 sub get_photo_params {
     my $self = shift;
-
-    return {} unless $self->photo;
-
-    my $photo = {};
-    ( $photo->{width}, $photo->{height} ) =
-      Image::Size::imgsize( \$self->photo );
-    $photo->{url} = '/photo?c=' . $self->id;
-
-    return $photo;
+    return FixMyStreet::App::get_photo_params($self, 'c');
 }
 
 =head2 meta_problem_state
diff --git a/perllib/FixMyStreet/DB/Result/Problem.pm b/perllib/FixMyStreet/DB/Result/Problem.pm
index d0867c5ca..ce7488703 100644
--- a/perllib/FixMyStreet/DB/Result/Problem.pm
+++ b/perllib/FixMyStreet/DB/Result/Problem.pm
@@ -400,21 +400,12 @@ sub url {
 =head2 get_photo_params
 
 Returns a hashref of details of any attached photo for use in templates.
-Hashref contains height, width and url keys.
 
 =cut
 
 sub get_photo_params {
     my $self = shift;
-
-    return {} unless $self->photo;
-
-    my $photo = {};
-    ( $photo->{width}, $photo->{height} ) =
-      Image::Size::imgsize( \$self->photo );
-    $photo->{url} = '/photo?id=' . $self->id;
-
-    return $photo;
+    return FixMyStreet::App::get_photo_params($self, 'id');
 }
 
 =head2 is_open
diff --git a/t/app/controller/report_import.t b/t/app/controller/report_import.t
index d6bff240c..934bf0346 100644
--- a/t/app/controller/report_import.t
+++ b/t/app/controller/report_import.t
@@ -128,7 +128,7 @@ subtest "Submit a correct entry" => sub {
       "check imported fields are shown";
 
     # Check photo present, and still there after map submission (testing bug #18)
-    $mech->content_contains( '<img align="right" src="/photo?id' );
+    $mech->content_contains( '<img align="right" src="/photo/' );
     $mech->content_contains('latitude" value="51.50101"', 'Check latitude');
     $mech->content_contains('longitude" value="-0.141587"', 'Check longitude');
     $mech->submit_form_ok(
@@ -139,7 +139,7 @@ subtest "Submit a correct entry" => sub {
         },
         "New map location"
     );
-    $mech->content_contains( '<img align="right" src="/photo?id' );
+    $mech->content_contains( '<img align="right" src="/photo/' );
     $mech->content_contains('latitude" value="51.50519"', 'Check latitude');
     $mech->content_contains('longitude" value="-0.142608"', 'Check longitude');
 
diff --git a/templates/web/default/alert/index.html b/templates/web/default/alert/index.html
index d8478cf98..274d61780 100644
--- a/templates/web/default/alert/index.html
+++ b/templates/web/default/alert/index.html
@@ -30,7 +30,7 @@ postcode or street name and area:' ) %]
   <h2>[% loc('Some photos of recent reports') %]</h2>
     [% FOREACH p IN photos %]
         <a href="/report/[% p.id %]"><img border="0" height="100"
-            src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
+            src="/photo/[% p.id %].tn.jpeg" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
     [% END %]
 </div>
 [% END %]
diff --git a/templates/web/default/alert/list.html b/templates/web/default/alert/list.html
index c763331cc..9f2bd69d0 100644
--- a/templates/web/default/alert/list.html
+++ b/templates/web/default/alert/list.html
@@ -27,7 +27,7 @@
       <h2>[% loc('Photos of recent nearby reports') %]</h2>
         [% FOREACH p IN photos %]
             <a href="/report/[% p.id %]"><img border="0" height="100"
-                src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
+                src="/photo/[% p.id %].tn.jpeg" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
         [% END %]
     </div>
   [% END %]
diff --git a/templates/web/default/around/around_index.html b/templates/web/default/around/around_index.html
index c07eb2ca2..012354f4a 100644
--- a/templates/web/default/around/around_index.html
+++ b/templates/web/default/around/around_index.html
@@ -39,7 +39,7 @@
 
 [% IF partial_token %]
     <p style="margin-top: 0; color: #cc0000;">
-        <img align="right" src="/photo?id=[% report.id %]" hspace="5">
+        <img align="right" src="/photo/[% report.id %].jpeg" hspace="5">
         [% loc("Thanks for uploading your photo. We now need to locate your problem, so please enter a nearby street name or postcode in the box below&nbsp;:") %]
     </p>
 [% END %]
diff --git a/templates/web/default/index.html b/templates/web/default/index.html
index 0a0ee7170..e5f98b0c5 100644
--- a/templates/web/default/index.html
+++ b/templates/web/default/index.html
@@ -63,7 +63,7 @@
         <p id="front_photos">
         [% FOREACH p IN recent_photos %]
             <a href="/report/[% p.id %]"><img border="0" height="100"
-                src="/photo?tn=1&amp;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
+                src="/photo/[% p.id %].tn.jpeg" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
         [% END %]
         </p>
     [% END %]
diff --git a/templates/web/default/report/new/fill_in_details_form.html b/templates/web/default/report/new/fill_in_details_form.html
index 2809b9c0e..ed8b07ea1 100644
--- a/templates/web/default/report/new/fill_in_details_form.html
+++ b/templates/web/default/report/new/fill_in_details_form.html
@@ -95,7 +95,7 @@
         <input type="hidden" name="upload_fileid" value="[% upload_fileid %]" />
         [% END %]
         [% IF report.photo %]
-        <img align="right" src="/photo?id=[% report.id %]" hspace="5">
+        <img align="right" src="/photo/[% report.id %].jpeg" hspace="5">
         [% END %]
     [% END %]
     
diff --git a/templates/web/default/static/fun.html b/templates/web/default/static/fun.html
index abe9d4028..00976f3ec 100644
--- a/templates/web/default/static/fun.html
+++ b/templates/web/default/static/fun.html
@@ -10,7 +10,7 @@ Do let us know if you find any more.</p>
 
 <ul style='list-style-type: none; margin:0; padding:0'>
 
-<li><img src='http://www.fixmystreet.com/photo?id=9468' align='right' hspace=8>
+<li><img src='http://www.fixmystreet.com/photo/9468.jpeg' align='right' hspace=8>
     <h2>Dumped Piano (right)</h2>
     <p>The reporter of this problem summed it up with their report,
     which consisted solely of the one character &ldquo;!&rdquo;. &mdash;
@@ -20,7 +20,7 @@ Do let us know if you find any more.</p>
     <p>&ldquo;A seagull is attacking various cars within this road. He starts at around 05:45 every morning and continues until around 19:30. This causes a lot of noisy banging and wakes up children.&rdquo; &mdash;
     <a href='http://www.fixmystreet.com/report/2722'>Problem report</a>
 
-<li><img src='http://www.fixmystreet.com/photo?id=6553' align='right' hspace=8>
+<li><img src='http://www.fixmystreet.com/photo/6553.jpeg' align='right' hspace=8>
 	<h2>Boxes full of cheese dumped (right)</h2>
 	<p>&ldquo;About a dozen boxes full of mozzarella cheese have been dumped opposite 3 rufford street. if it warms up we could have nasty road topping problem (seriously there is a lot of cheese)&rdquo; &mdash;
     <a href='http://www.fixmystreet.com/report/6553'>Problem report</a>
diff --git a/templates/web/fixmystreet/alert/index.html b/templates/web/fixmystreet/alert/index.html
index 0903937f7..7bec66305 100644
--- a/templates/web/fixmystreet/alert/index.html
+++ b/templates/web/fixmystreet/alert/index.html
@@ -33,7 +33,7 @@ within a certain distance of a particular location.') %]
     <h2>[% loc('Some photos of recent reports') %]</h2>
     [% FOREACH p IN photos %]
         <a href="/report/[% p.id %]"><img border="0" height="100"
-            src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
+            src="/photo/[% p.id %].tn.jpeg" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
     [% END %]
   </aside>
 </div>
diff --git a/templates/web/fixmystreet/alert/list.html b/templates/web/fixmystreet/alert/list.html
index c488e72ee..8305fff6f 100644
--- a/templates/web/fixmystreet/alert/list.html
+++ b/templates/web/fixmystreet/alert/list.html
@@ -27,7 +27,7 @@
         <h2>[% loc('Photos of recent nearby reports') %]</h2>
         [% FOREACH p IN photos %]
             <a href="/report/[% p.id %]"><img border="0" height="100"
-                src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
+                src="/photo/[% p.id %].tn.jpeg" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
         [% END %]
       </aside>
     </div>
diff --git a/templates/web/fixmystreet/around/around_index.html b/templates/web/fixmystreet/around/around_index.html
index 7207a7292..331f34325 100644
--- a/templates/web/fixmystreet/around/around_index.html
+++ b/templates/web/fixmystreet/around/around_index.html
@@ -42,7 +42,7 @@
 
 [% IF partial_token %]
     <p style="margin-top: 0; color: #cc0000;">
-        <img align="right" src="/photo?id=[% partial_report.id %]" hspace="5">
+        <img align="right" src="/photo/[% partial_report.id %].jpeg" hspace="5">
         [% loc("Thanks for uploading your photo. We now need to locate your problem, so please enter a nearby street name or postcode in the box below&nbsp;:") %]
     </p>
 [% END %]
diff --git a/templates/web/fixmystreet/around/around_map_list_items.html b/templates/web/fixmystreet/around/around_map_list_items.html
index 86370017f..7dce76ce1 100644
--- a/templates/web/fixmystreet/around/around_map_list_items.html
+++ b/templates/web/fixmystreet/around/around_map_list_items.html
@@ -14,7 +14,7 @@
                 </div>
                 [% IF p.problem.photo %]
                 <div class="img">
-                    <img height="60" width="90" src="/photo?id=[% p.problem.id %];fp=1" alt="">
+                    <img height="60" width="90" src="/photo/[% p.problem.id %].fp.jpeg" alt="">
                 </div>
                 [% END %]
             </a>
diff --git a/templates/web/fixmystreet/around/on_map_list_items.html b/templates/web/fixmystreet/around/on_map_list_items.html
index 3c3b66cf9..9329e6833 100644
--- a/templates/web/fixmystreet/around/on_map_list_items.html
+++ b/templates/web/fixmystreet/around/on_map_list_items.html
@@ -11,7 +11,7 @@
                 </div>
                 [% IF p.photo %]
                 <div class="img">
-                    <img height="60" width="90" src="/photo?id=[% p.id %];fp=1" alt="">
+                    <img height="60" width="90" src="/photo/[% p.id %].fp.jpeg" alt="">
                 </div>
                 [% END %]
             </a>
diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html
index d393eeac6..605e428a3 100644
--- a/templates/web/fixmystreet/index.html
+++ b/templates/web/fixmystreet/index.html
@@ -81,7 +81,7 @@ Modernizr.load({
                             <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
                         </div>
                         <div class="img">
-                            <img alt="[% p.title | html %]" title="[% p.title | html %]" height="60" width="90" src="/photo?id=[% p.id %];fp=1">
+                            <img alt="[% p.title | html %]" title="[% p.title | html %]" height="60" width="90" src="/photo/[% p.id %].fp.jpeg">
                         </div>
                     </a>
                 </li>    
diff --git a/templates/web/fixmystreet/questionnaire/index.html b/templates/web/fixmystreet/questionnaire/index.html
index a1a159aa8..3b23c81cd 100644
--- a/templates/web/fixmystreet/questionnaire/index.html
+++ b/templates/web/fixmystreet/questionnaire/index.html
@@ -83,6 +83,7 @@ your experience of getting the problem fixed?') %]</p>
 [% IF c.cobrand.allow_photo_upload %]
 <div id="fileupload_normalUI">
     [% IF upload_fileid %]
+        <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
         <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
         <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
     [% END %]
diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html
index 2ac0f407c..a79cbe0ca 100644
--- a/templates/web/fixmystreet/report/display.html
+++ b/templates/web/fixmystreet/report/display.html
@@ -101,6 +101,7 @@
         [% IF c.cobrand.allow_photo_upload %]
             <div id="fileupload_normalUI">
             [% IF upload_fileid %]
+                <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
                 <p>[% loc('You have already attached a photo to this update, attaching another one will replace it.') %]</p>
                 <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
             [% END %]
diff --git a/templates/web/fixmystreet/report/new/fill_in_details_form.html b/templates/web/fixmystreet/report/new/fill_in_details_form.html
index 3ccc22c2c..d908aee99 100644
--- a/templates/web/fixmystreet/report/new/fill_in_details_form.html
+++ b/templates/web/fixmystreet/report/new/fill_in_details_form.html
@@ -93,14 +93,15 @@
                 
                 
                 [% IF upload_fileid || report.photo %]
-                    <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
-                    
                     [% IF upload_fileid %]
-                        <input type="hidden" name="upload_fileid" value="[% upload_fileid %]" />
+                        <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
+                        <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
                     [% END %]
 
+                    <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
+
                     [% IF report.photo %]
-                        <img align="right" src="/photo?id=[% report.id %]">
+                        <img align="right" src="/photo/[% report.id %].jpeg">
                     [% END %]
                 [% END %]
                 
diff --git a/templates/web/fixmystreet/report/photo.html b/templates/web/fixmystreet/report/photo.html
index e74f0bbfe..a338391ce 100644
--- a/templates/web/fixmystreet/report/photo.html
+++ b/templates/web/fixmystreet/report/photo.html
@@ -1,6 +1,8 @@
 [% IF c.cobrand.allow_photo_display && object.photo %]
 [% photo = object.get_photo_params %]
 <div class="update-img">
-    <img src="[% photo.url %]">
+    [% IF photo.url_full %]<a href="[% photo.url_full %]">[% END
+    %]<img alt="Photo of this report" [% IF photo.height %]height="[% photo.height %]" width="[% photo.width %]"[% END %] src="[% photo.url %]">
+    [%- IF photo.url_full %]</a>[% END %]
 </div>
 [% END %]
diff --git a/templates/web/fixmystreet/reports/council.html b/templates/web/fixmystreet/reports/council.html
index 3de6f81eb..142a1750d 100755
--- a/templates/web/fixmystreet/reports/council.html
+++ b/templates/web/fixmystreet/reports/council.html
@@ -118,7 +118,7 @@
             </div>
             [% IF problem.photo %]
             <div class="img">
-                <img height="60" width="90" src="/photo?id=[% problem.id %];fp=1" alt="">
+                <img height="60" width="90" src="/photo/[% problem.id %].fp.jpeg" alt="">
             </div>
             [% END %]
         </a>
diff --git a/templates/web/fixmystreet/static/fun.html b/templates/web/fixmystreet/static/fun.html
index b0402922a..57a74a0d7 100644
--- a/templates/web/fixmystreet/static/fun.html
+++ b/templates/web/fixmystreet/static/fun.html
@@ -10,7 +10,7 @@ Do let us know if you find any more.</p>
 
 <ul class="plain-list">
 
-    <li><img src='http://www.fixmystreet.com/photo?id=9468' align='right' hspace=8>
+    <li><img src='http://www.fixmystreet.com/photo/9468.jpeg' align='right' hspace=8>
         <h2>Dumped Piano (right)</h2>
         <p>The reporter of this problem summed it up with their report,
         which consisted solely of the one character &ldquo;!&rdquo;. &mdash;
@@ -20,7 +20,7 @@ Do let us know if you find any more.</p>
         <p>&ldquo;A seagull is attacking various cars within this road. He starts at around 05:45 every morning and continues until around 19:30. This causes a lot of noisy banging and wakes up children.&rdquo; &mdash;
         <a href='http://www.fixmystreet.com/report/2722'>Problem report</a>
 
-    <li><img src='http://www.fixmystreet.com/photo?id=6553' align='right' hspace=8>
+    <li><img src='http://www.fixmystreet.com/photo/6553.jpeg' align='right' hspace=8>
     	<h2>Boxes full of cheese dumped (right)</h2>
     	<p>&ldquo;About a dozen boxes full of mozzarella cheese have been dumped opposite 3 rufford street. if it warms up we could have nasty road topping problem (seriously there is a lot of cheese)&rdquo; &mdash;
         <a href='http://www.fixmystreet.com/report/6553'>Problem report</a>