Yesterday I launched the latest version of Panda.id.au, my personal blog, which I re-built from the ground up using the Backdrop CMS. This is my second Backdrop website to date; the first being my business site: PackWeb.com.au. A lot of work went into this seemingly simple, minimal blog website, so I thought I'd write about how I built it and how I contributed to Backdrop along the way.
Conception
The idea for a new version of Panda.id.au came from a growing dislike of the (then) current site. It had a lot of features that either no longer worked, or were no longer being used (such as Last.fm integration, and a list of my shooting scores). I also wanted to start using the Backdrop CMS to build more websites, and so thought that a simple blog was the perfect candidate.
I love minimalism, and wanted both a simple design and simple back-end functionality. So I went looking for designs on ThemeForest (where I get most of my designs/inspiration). I soon came across the Minimal Responsive HTML5 Blog template which I fell in love with. I started jotting down ideas, researching what Drupal modules were available for Backdrop, and outlining the functionality and structure I wanted for my new site.
Simplification
One of the things I loved about the demo site for the Minimal template was that everything was displayed in a single list on the homepage. There were no separate pages for videos or music or articles. I also liked how third-party content was embedded in the posts (like the SoundCloud audio file). For my site, I decided to simplify what was once eight-or-so different content types down to two: pages and posts. It just so happens that Backdrop comes with Page and Post content types out-of-the-box. I would use Pages to create, for example, my About page, and Posts for everything that would be displayed on the homepage (my blog).
Using one content type to display lots of different types of content meant that I needed a way to put videos, audio and external images into the Body field of my Posts. I did some research and came across the oEmbed add-on for CKEditor. CKEditor is what Backdrop uses, so I was able to integrate the add-on easily enough. I then made it into a stand-alone module and contributed it to Backdrop: https://backdropcms.org/project/oembed
Images and Lightboxes
One of the major issues I struggled with was uploading images, inserting them into my posts and then having them open in a lightbox when clicked on. There was already a Colorbox module for Backdrop, however Colorbox isn't responsive. I use FancyBox in Drupal, but it technically can't be used for commercial websites without paying a fee (my blog isn't commercial, so I could have used it, but I'd have had to port it to Backdrop and, if I was going to spend the effort doing that, I wanted an option to use it for commercial sites in future as well). I therefore looked around the web for free, open source, responsive lighboxes and came across Featherlight. I therefore made a Backdrop module for that and contributed it back to the community: https://backdropcms.org/project/featherlight
So now I had a responsive lightbox for Backdrop. But how to get images to open in it? Ideally, there'd be a way to upload and insert an image into a Body field and, if you specify a size for that image that's smaller than its full-size, it would automatically add a link to the full-size image with the option to specify additional attributes for opening that full-size image in a lightbox (e.g. 'data-featherlight'). That functionality is what this Backdrop issue is generally about, though for the Colorbox module. I started trying to build something like this with a port of Drupal's 'Image Resize Filter' module, but then decided that a simpler solution, at least for now, would be to just create the ability to add attributes to links so they can open in a lightbox. This is currently running as custom code on my website, but I hope to soon either make it a contrib module or else see it added to Backdrop core.
This issue was therefore mostly solved. I can upload images and insert them into my Body field, making them smaller than their full-size, and manually add a link to the full-size image; all with Backdrop core's functionality. With my custom code, I can now add the 'data-featherlight' attribute so the full-size image opens in the Featherlight lightbox, which is enabled by the module I wrote.
Social Media
The last few blog websites I've created recently have had the ability to import external content from RSS feeds. This is so clients can display their Instagram, Pinterest, Status.net, etc. content directly on their own website. I initially wanted to do the same for my site, and even setup the Feeds module to do just that, but then decided against it when I realised that people are most likely to view my website content on social media (when I, or others, share it there) rather than coming to my website to view my social media posts/photos. I'm therefore manually creating Posts on my site whenever I add a new video to my YouTube account (which is rare), and have setup an IFTTT applet to automatically post any new Panda.id.au content to my Facebook profile.
I use ShareThis to add share buttons to my websites, however the Backdrop ShareThis module is a bit out-of-date currently, so I found it easier to just add the ShareThis code directly to my theme. I did need a way to easily add 'follow' links to my various social media accounts though, so I downloaded the On The Web module for that. It has a few issues regarding old social media accounts that are no longer active, the need to add new ones (like GitHub and Last.fm), and I really didn't like the icons it comes bundled with. There was an existing issue about finding an icon font to use instead of images, so I jumped at the chance and wrote a patch to add the ability to use FontAwesome instead. It was committed, and so I was able to have beautiful icons linking to my social media accounts (and I just used On The Web's API to add the social media accounts it doesn't support out-of-the-box yet).
Custom Code
Since starting to use Backdrop, I have created my own custom layout, theme and module. I use the layout in combination with the theme as a starting point for building custom designs for clients. It does a few things out-of-the-box that I'd otherwise find myself having to repeat for each new site. My layout and theme evolved from a similar base theme I developed for my Drupal sites. The module is also something that evolved from Drupal, but I'm yet to add anything to it for use on all my future Backdrop websites (it's currently just a starter for me to add custom code to each site I build).
In Closing
So that's a bit of an overview of how I built this Backdrop-developed version of Panda.id.au. I hope it's given you a better understanding of my website, the awesome Backdrop CMS, and the benefits of contributing to open source projects. If you'd like your own Backdrop website, feel free to hire me!