In recent weeks, we have been revamping the trends to not only become truly international, but allow building a tool that would allow our colleagues to create beautiful looking collages that will sit on top of every trend on the site that a journalist can interact with.
Using what we already had and improving it
We already had a solid infrastructure built for the existing trends that has worked well, so we didn’t have to build a whole new database schema just to accommodate international trends. What we went for instead was to modify our existing database tables to accommodate multiple languages & search terms and to also create the appropriate data types for the fields that will store the collage data.
This allowed us to quickly whip up a form on our admin area that would allow the teams to create a trend and add appropriate translations safe in the knowledge that the site will do the rest onced it has been published to journalists.
Applying the user site settings to the images that were assigned to trends was also relatively straight forward. It was simply a case of checking the users’ session variables, and making sure that they match up to the settings that the brand has set for that particular product.
On top of this, we used a little AJAX wizardry to make the page load that little bit smoother, all adding up to a better user experience.
The beauty of HTML5
The HTML5 canvas element was a perfect match for the collage editor. There is a wealth of documentation and support from W3C, and it is only growing as time goes on. The biggest challenge for us was working out how we were going to store the data from the canvas in our existing tables.
Another requirement of the collage was that it had to be interactive so that journalists could hover over an image and add it to their basket in one click. This meant we had to store data about every image on the canvas, which lead us to adjusting the table structure to store this information so we could differentiate between a collage image, and an image that only appears below it.
Using a combination of client-side and server-side processing, we came up with a neat way of storing the data without the risk of inflating the size of our tables, and also making the user experience as zippy as possible.
On another note, we now have our own twitter feed! Please follow us here: twitter.com/presslofttech
Have a great weekend, and happy coding!