back to Code

Website – CERISAL

Link: https://cerisal.com

Cerisal is a photo-board site I built with plain PHP (without any frameworks) and a few hours of effort. The inspiration to make something like Cerisal, came from Unsplash and a Facebook page named Beavty. Also, I was frantically looking for an idea to create something with PHP and learn by building something. I wanted to build a site that deals with dynamic data and basic CRUD operations. A photo-board site had exactly what I was looking for. By this time, I’ve already created Securus, so I also wanted to use and evaluate it on a real world project.

The name Cerisal comes from the color Cerise. The domain, cerisal.com was also easily available, which was short and easy to memorize.

Technology Colophon

Here are the ingredients:

Challenges

One particular problem I faced while creating this site, was to minimize the load of the front page on low end devices. So many high resolution images can easily cause serious load time issues. Thankfully, LazyLoadXT proved to be the godsend here and saved the day. Also, creating thumbnails with ImageMagick library saves a lot of bandwidth. Another problem was the grid layout, because laying out so many pictures with diverse set of dimensions was a major headache. After wasting a lot of time configuring Masonry, I still wasn’t happy with the performance and the overall responsiveness on window resize. And because the jQuery solution to this problem was not going so well, I started looking for a CSS-only approach. Without digging too deep, I found Salvattore, which even advertises itself as, “a jQuery Masonry alternative with CSS-driven configuration”. I couldn’t be happier and after closely inspecting Salvattore’s performance, I immediately decided to switch to it.