Pelican Blog with Fancy Box image viewer

Introduction

As I've informed you at post Pelican Blog with Pelican-Bootstrap3 theme, I've started working on fancy-box image viewer and adjusting it's usage for pelican blogging engine.

FancyBox - What it is and how it works

Quoting product site:

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses

Product page here

FancyBox - How to use it?

FancyBox uses jQuery as main dependency. For using Fancybox you have to add it to your head/body of web-page.

Here is a simple code-block you can use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Also you have to add Javascript Fancybox script (CDN recommended to download before):

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

CDN for fancybox you can find here: https://cdnjs.com/libraries/fancybox

And finally the CSS style file:

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

What are pelican-plugins and how to use it?

Pelican Plugins are just a regular python files, but added in pelicanconf file as a "PLUGINS". They extend functionality of original Pelican engine by using the signals - so registering on a signal type - for more information about that please check pelican plugin site

FancyBox - why create a plugin out-of-it ??

First of all - because I haven't done any plugins at all yet - sounds like fun and a lot of try-and-error :)

Besides - I don't want to have my script incorporated in Markdown file each time I want to add image to it.

Plugin will make that work for me ! (laziness is for virtues programmers )

Fancybox plugin - I've created a separated github-project for that!

I've decided to move FancyBox plugin to separated github-project for convenience - in that situation no dependency between version of pelican and plugin will exist.

Fancybox initial approach

As usually I've started coding without re-thinking. And taking into account my time-limits it was a bit of failure.

I've almost found solution and it almost worked, but it was a lot of copy-paste that I don't really like and apprieciate.

So I've figure-out to change my approach after I've seen polish programmer/blogger Maciej Anisewicz's vlog at Youtube about "programming flow is a bullsh*t".

It's a polish programming talk that to summarize - says about TDD as better approach for programming then having all information about program-flow in your mind, and about making notes for all your ideas.

Fancybox final approach

I've decided to go additional way in my programming approach - to make best out of the TDD.

That's why I'll first create tests for code and then create code itself. It'll be a longer way, but in that solution I'll use pomodoro-technique much more efficient.

I've created a stubs for my tests that have a "NotImplementedError" raised. Once I'll finish with tests I'll then start coding.

Let's finally find-out if the so called "TDD" is worth using or not :)

Code commits done for this post:

A Github project for plugin: Pelican-Fancybox

Commits:

Pelican-Blog Pull Requests

  • Made pull-request for theme - #5

Tips & Tricks

1. TDD approach

  • Make tests that will fail
  • Make code and fix code so that tests will pass
  • Commit your fully TDD certified code!! :)

Tools and applications used:

  • Vi/vIM
  • Docker

Accomplished:

1. I'll continue working on pelican-theme with using fancybox

Acknowledgements

What's next

1. Make tests for fancybox plugin

2. Start working on plugin for asciinema player.

3. See ISSUES task-list for this 'mini' growing project :)

Comments

comments powered by Disqus