You might have seen your Facebook friends’ fancy profile pictures with the frame of the sports team they support. These days for any major events, the best way to support them is by adding a frame to your profile picture with their logo.
Football (soccer) is my favorite sport. My state Kerala have a franchise club in the Indian Super League called Kerala Blasters. We are the largest club by average crowd attendance and the fans are so passionate. What if a passionate, crazy fan is also a programmer. Then you will get this.
Facebook didn’t have a profile picture frame for Kerala Blasters and so I had to make one myself. It was an interesting project and I was able to make it in a night. UPDATE: Facebook now has a frame for Kerala Blasters and all other Indian Super League clubs, but the frames are ugly 😛
When I released the Kerala Blasters Profile Picture Framer, it was very successful and thousands of fans in Kerala had used it. The visitor count reached 3,000 in a single day on a site that had an average of 200 in a day.
To be exact, 3759 people have downloaded their framed profile pictures. Here is a sample :
Features
Besides all this, the greatest feature is that the code is simple and easy.
Set Up
Let’s begin by creating the files and libraries needed. The directory tree looks like this :
convert.php
download.php
index.php
upload.php
All except the ".php" files above are folders.
We’ll use Croppie for letting user crop her/his profile picture. Download this file to "css/croppie.css" and this file to "js/croppie.min.js".
Set the permissions of "uploads" folder to Read/Write. On Linux this would be :
sudo chown ${USER}:www-data uploads && sudo chmod 0755 uploads
Make Frame
Make a frame using your favorite image editor. It should be a square and should have a minimum size of 400x400px. An example :
Make sure you make the frame keeping in mind that a face has to fit in it. Also make the background of the image transparent and save it as a PNG file.
You can make multiple frames, because our app supports choosing from a list of frames. You should save the frames in “frames” folder as “frame-0.png”, “frame-1.png” etc. Note that we start numbering from “0” and not “1”.
index.php
Copy this file to “index.php”.
The page has a small box for customizing the profile picture, a button to upload profile picture and a button to upload to Facebook.
download.php
Copy this file to “download.php”.
When user clicks the download button, he/she is redirected to this page. This page will show the generated profile picture and when user clicks on that image, the file will be downloaded. This is done by download attribute :
<a href='uploads/123.png' download='kerala-blasters-profile'><img src='uploads/123.png' /></a>The download attribute gives the file name to the downloaded file.
convert.php
Copy this file to “convert.php”.
This file has a function called “makeDP()” :
binary makeDP(string $profilePicturePath, int $design = 0)
“binary” denotes the image’s RAW data. Example usage :
makeDP("/home/me/profile-picture.png", 1);If the $design argument is not passed, “frame-0.png” will be used.
upload.php
Copy this file to “upload.php”.
When user clicks the download button, the profile picture is uploaded to this file via AJAX. Then this file will make the framed profile picture and save it to “uploads” folder.
The AJAX response would be something like this :
uploads/sk2e9c1cu2.png
The file name would be of length 10.
css/style.css
Copy this file to “css/style.css”.
The stylesheet probably don’t work for old IE. But it is supposed to work in all modern browsers and is mobile compatible.
js/app.js
Copy this file to “js/app.js”.
When user uploads her/his profile picture, onFileChange() is called and a preview of the image is shown. If the image is smaller than 400x400px, then an alert box is shown.
The user could then adjust the profile picture according to the frame. This feature is done with the help of Croppie.js.
When user is done adjusting, the “Download Profile Picture” button is clicked and the blob data of cropped picture is obtained :
croppie.result({
size: "viewport"
}).then(function(dataURI){
var formData = new FormData();
formData.append("design", $("#fg").data("design"));
formData.append("image", dataURItoBlob(dataURI));
...Croppie returns a data URI and we convert it to blob using dataURItoBlob() function. The form data that is sent to “upload.php” looks like this :
design=0;
image=<binary>;The design parameter is an integer of design chosen. This value is got from the list of designs :
<div id="designs">
<img class="design active" src="frames/frame-0.png" data-design="0" />
<img class="design" src="frames/frame-1.png" data-design="1" />
<img class="design" src="frames/frame-2.png" data-design="2" />
</div>The data-design attribute is the ID of that design.
Upload To Facebook
There is an option to upload the framed profile picture to Facebook. But this requires you to create a Facebook app and submit a review request for the following permissions :
- publish_actions
Before you submit the App Review request, you must set up the website and make a video of how your app works. It took me a week to get the permissions approved.
If you would like to implement this feature, copy this file to “js/fb.js”. Don’t forget to replace the URL to image file with yours.
Note that we can’t directly set the user’s profile picture. The FB API doesn’t allow you to do that. What we can do is upload the image to user’s wall and redirect the user to that image in FB, so that user can click the Make Profile Picture button.
That’s it ! Enjoy your own profile picture framer web app. Use it for special events.