STREETS IN TIME: Comments form

I spent some time trying to work out the way to display the comments and submit-comment form in terms of optimum User Experience.  Should I show the submit form first and then the comments below?  Should I prioritize seeing the comments available to read or the form encouraging users to submit their own memories / comments?

In the end, I decided to have a button titled “Submit Comment” at the top, with the comments below.  The button would link to an anchor on the submit-form at the bottom of the comments – this way I achieve the best of both options – comments immediately visible, as well a  call to action button for submitting a comment.



I have added a smooth scroll plugin for fluid transition from the anchor points.

When a comment is submitted, javascript grabs the name of the html file that the comment has been sent from and adds it to the email that is produced so that as Moderator I know which page to add the comments to:

<script>document.write("<input type = 'hidden' name = 'page_ref' value = '"+cat_no+"' />");</script>

Also, javascript code allows the header of the comments box to automatically display the name of the location (rather than retyping each time a new page is created:

<p><label for="msg"> Please post your memories of <script>document.write(image_loc);</script></label><br/>

I have added a ‘reply to comment’ button on each comment.  If a user selects this to leave a comment, Javascript code will record which comment has been replied to a pass this to the PHP file that generates the email.  This way, I will know which comment to add the reply to.

I’m going to scrap the ‘report as spam’ buttons as I won’t need these, given that I’ll manually uploading any comments anyway.



STREETS IN TIME: Preparing the images for the site

I start off with the ‘then’ as these are much smaller images than the ‘now’ images and so set the dimensions of the final pieces:


Next I open the ‘now’ image and copy the ‘then’ image over the top:


I then crop the ‘now’ image to exactly match the parameters/scope of the ‘then image’, and correct the perspective (this is usually necessary as the camera I use has a considerably wide-angles lens and tends to ‘fish-eye’ images in comparison to the ‘then’ images.

I now have two layers in one PSD file – ‘then’ and ‘now’.  I select the ‘now’ layer and use transform to reduce the scale of this image to match the ‘then’ image, and crop to size.  Then, with the ‘then’ image on top, I reduce the opacity so that the ‘now’ image starts to show behind.  I then finely adjust the image, lining up as closely as possible the landmarks and buildings.


Once fully lined up, I crop if necessary, then increase the opacity of the ‘then’ image back to 100%, hide the ‘now’ image and Save As sitxxx_then.jpg.  I then hide the ‘then’ image, unhide the ‘now’ image and save as sitxxx_now.jpg.

With the two files now in place, I simply need to open up one of the previous html pages, then Save As a file name that matches the sequence number of the new images, and hey presto – a fully functioning page without any input / tweaking required*

*well, apart from that annoying issue where I have to re-input the image file name to set the height of the div container, but I hope to be able find a fix for that soon…..

STREETS IN TIME: Responsive navigation menu

I have used media queries set to max-width:720px so that on mobile devices the navigation png buttons are not displayed, but instead a fixed navigation bar is displayed (fixed) at the bottom of the screen.  Also the title menu items (home / locations / about) disappear and the logo moves to a central position:





The main image is set to a % width (with a max-width in place) and is therefore fully responsive to viewing device.

For pages where the orientation of the main image is portrait, I have to add inline styling to the container div setting a max-width of 550px to stop the image becoming oversized.