Steve Madden

A photo submission app for Facebook.

  • Responsibilities: Visual & Systems Design, Frontend & Backend Development, UAT
  • Technology: HTML5, CSS3, JavaScript, jQuery, Facebook Graph API, PHP
  • Timeframe: 23rd May 2014 - 8th July 2014

The Idea

We were commissioned to develop a Facebook Page app where users could upload their photos, edit and decorate them, and then submit them to a galley, for both desktop and mobile devices.

Result

The home page of the Steve Madden Facebook app.
The home page of the Steve Madden Facebook app.
Users could upload an image and provide contact details.
Users could upload an image and provide contact details.

We used a number of client-side JavaScript and server-side PHP checks for field data and image requirements. We previewed the selected image in browsers by using a combination of the new FileReader() function and FileReader.readAsDataURL method.

Uploaded photos could be edited and decorated before submission.
Uploaded photos could be edited and decorated before submission.

Once a user submitted an image, the page would save the coordinates of the image from the JavaScript cropping interface and calculate the necessary dimensions for the cropped/adjusted image. It would then pass the variables into a PHP script which would convert it to base64 data and pass it through a number of PHP image functions along with the selected image frame. We used alpha blending functions such as imagealphablending() and imagefill() in order to overlay the selected frame from on top of and around the submitted image. The server would then create an image file from the processed base64 data and append it to a database along with the user-submitted data.

On mobile devices, the cropping interface would be difficult to use as the dragging method would not work as on some devices the page would scroll (Facebook Page apps are sized to 810px by 810px on desktop, however don't have a fixed height on mobile devices). Therefore, a set of four arrows would be used to adjust the image instead of dragging it.

The gallery shows all of the uploaded and edited images. Users could 'Like' and share the images using the Facebook Graph API.
The gallery shows all of the uploaded and edited images. Users could 'Like' and share the images using the Facebook Graph API.

Conclusion

It was quite a difficult and tense project given the very short time limit (just under a week), however I was really happy with what was produced. Exploring the use of PHP image functions was a key point, as initially it seemed quite difficult to create an application that could manipulate and decorate images, however the functions proved to be quite powerful and easy to use.