Sunday 2 November 2014

Aberdeen Pavilion and How to Make a Before/After Image Slider

Aberdeen Pavilion has had many uses since its construction. Standing in the center of Lansdowne Park, on the edge of downtown Ottawa, the building has a long history of agricultural fairs, conventions, and military uses. Built in 1898 for the Central Canada Exhibition, it was designed by Moses C. Edey, and named for the incumbent Governor General, Lord Aberdeen.(Hofley, Chris. “Aberdeen Pavilion set to make more history in new revamped Lansdowne.” Ottawa Sun, August 2, 2014; Canada's Historic Places. "Aberdeen Pavilion National Historic Site of Canada." Accessed October 14, 2014) The redevelopment of the park caused a large amount of controversy over the plans for the site. Many were concerned about how the existing heritage buildings would fit in with the plans for large new shops and restaurants. The park went under construction in 2012 and just recently opened to the public, although many of the new shops are finished yet. Deachman, Bruce. "Elephants, Pandas, and Pigs, oh my! An Illustrated History of Lansdowne Park." Ottawa Citizen July 31, 2014) The park and Aberdeen Pavilion have gone through many changes since their establishment, and yet there are constants as well. The pavilion rests in the same location as it always has, with its purpose remaining much the same as ever. Meanwhile, the uses and form of the park around it have changed with time. This state of change and continuity provides the perfect subject for a series of sliding before/after images. These images use code to layer two images on top of each other, and then slide back and forth to show the differences from one time period to the next. (Zurb University. “jQuery TwentyTwenty Plugin.”) This post will explain the method used to create these images, as well as discuss the historical significance of the Aberdeen Pavilion.

I chose images that would best illustrate the variety of uses and changes the site has experienced since its construction. The images used were drawn from Creative Commons, Library and Archives Canada, and photos I took myself. The images depict pavilion’s use as an exhibition hall, while the land around it has changed from fair grounds to a military base, to sports and shopping grounds. Gathering the sources was the easy part; putting them together proved more difficult.

Before starting this project, I had no knowledge of html or coding. I learned early on in my research on tools, that coding would be essential to this project. Many of tools included templates for the images which you supposedly able to simply copy and paste the code into posts to publish them. (Northwestern University Knight Lab. “Juxtapose JS;” Flashxml. “Image Before and After FX.”) I tried various programs with little success at first. This is most likely because there were mistakes in my code, or I was missing steps the instructions assumed were evident. If I had a little knowledge of coding I may have been able to spot these errors and fix them myself. Another issue I had to deal with was website compatibility. I soon learned that the tool had to be specific to the site where the images were published. This meant that the original tool I settled on, TwentyTwenty, would not work on Blogger, as it was designed for Wordpress. This sent me on a search for a site that would work with Blogger. My first attempt was with Juxtapose JS from Knight Lab. The site produced good previews of images, but the code for publishing the images did not work on my blog. (Knight Lab. “Juxtapose JS.”) This was a common issue. My second attempt was with FlashXML, which would allow up to 3 pictures in a slider. However, the tools benefit of not requiring online links to images meant that the publishing site required file hosting, which is not allowed on Blogger. (Flashxml. “Image Before and After FX.”) These are the tools I spent the most time with, but there were a few others that I reviewed but dismissed due to code or site requirements.

I finally settled on a site specifically designed for Blogger called Helplogger. The blog provided instructions for creating sliders. I had tried this earlier but moved on to another site because the instructions called for a plugin, which I had difficulty activating. I also found the codes did not work where the instructions said to enter them. (Helplogger. “Before/After Photo Effect with jQuery.”) These problems were solved once I talked to a friend with coding experience. She told me that the code did not require any plugins. She also changed the instructions to enter the code as part of a post rather then a gadget as the original instructions required. Finally, she explained that the image links had to be public for the code to access them, something the instructions skipped over. Using these instructions I produced my first working slider. To complete the rest of the sliders I followed the same process. First, the images had to be the same sizes, so I modified them in Photoshop, another program I have not used before. I then uploaded the modified photos to the public file on Dropbox to provide the links for the code. Each slider required its own line of code in the template and the post of the blog, which I copied from Helplogger’s instructions. As I copied the codes over to my post, I made sure there were no extra symbols that would make the code malfunction. To finish, I filled in the links and dimensions into the code for each slider.

Aberdeen Pavilion and Lansdowne Park has gone through multiple uses throughout its history. Its use as an exhibition building has been constant throughout its history, with multiple conventions and fairs using the building to present their wares. It was also used as a military base during both the First and Second World Wars, and for basic training after that (Canada. Department of National Defence / Library and Archives Canada). Now with the redevelopment of the park, the site has undergone another major change. Many were concerned with the city’s process and plans for the redevelopment project. Major criticisms revolved around the City’s bidding process, and the plans for a large shopping complex on the grounds. Opponents argued that the plans would harm the heritage buildings on the site, as well as the businesses along Bank Street.(Friends of Lansdowne. “Backgrounder.” September 9, 2010) Legal challenges to the plans were defeated, and site development began last year. (CBC News. “Lansdowne Park legal challenge rejected.” July 28, 2011.) In the place of what was essentially a giant parking lot, there are now multiple shops, a skateboard park, a large field, paths and benches around the pavilion, and a revitalized stadium. Despite the changes, the park is still mostly public grounds that is still used regularly by the city and its residents.  Time will tell what effect the redevelopment has on the neighbourhood. In the meantime, the controversy propelled me to learn more about a site that is a large part of my neighbourhood. And that interest gave me a chance to learn a new tool that could be useful for many other sites in the future.

No comments:

Post a Comment