Image crop and final touches

Additions this time were the ability to crop the profile picture, update the social media links and delete individual elements of the portfolio.

The portfolio element deletion was a modification of the display portfolio function, which links to a page, deletes the post and returns the user.

Page where you can delete a portfolio element

The social media links are now stored in the database, and forms to edit them have been added to the edit-about page. The plan was to only offer the user to change the username on the end of the link url, but on facebook for example, this isn’t always intuitive.

Updated edit-about page, with social media links

The main feature is the ability to crop images. Using the external plugin cropper.js, users can create a crop of the profile picture on the server (with the option to upload a new picture as well). This feature also caused the biggest issues to implement, partly deciphering the plugin and figuring out the image format it returned. From there, I had to find a way to convert the data url into a blob, then I was able to post it through ajax to PHP and upload it.

Profile picture after crop

Profile picture during crop

https://stackoverflow.com/questions/6850276/how-to-convert-dataurl-to-file-object-in-javascript

Fengyuan, C. (2018). CropperJS. [online] GitHub. Available at: https://github.com/fengyuanchen/cropperjs [Accessed 5 Jan. 2019].

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.