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.
<script>document.write("<input type = 'hidden' name = 'page_ref' value = '"+cat_no+"' />");</script>
<p><label for="msg"> Please post your memories of <script>document.write(image_loc);</script></label><br/>
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.
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…..
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.