Octopress - Photos - Licences

Octopress

There’s probably always one more post about Octopress.

Since I’m regularly posting my own pictures and sometimes pictures of others on my blog (mostly CD cover), I thought it would be neat if I could include a license in every picture. Better to make it as easy as possible: define one license as default and specify all the others that might be needed.

I was playing a while with my plugin photo_tag in order to see if it would be possible to add this functionality here. Since it’s written in Ruby (and I don’t have a plan of Ruby), that was quite a cold start.

Around Christmas I contacted the original author Devin Weaver of the plug-in. I ran into a wall when trying to convince Fancybox to allow me to add a link into the Image-title. Despite the holidays, his answer can quite quickly, but didn’t help me to solve the puzzle. But it make me thinking about an other possible solution.

So the whole thing was set aside for a week or so (more likely like three weeks) until I found a solution. The plug-in now includes an additional small graphic, positioned by CSS and links it to the license. I’ve basically extended the syntax of the plug-in with one additional parameter licence:. So including an image now can be done like this:

photo /path/to/image.jpg default licence:http://www.example.com A nice image
photo /path/to/image.jpg default licence:default A nice image

If you include licence:http://www.example.com a small icons appears and links to http://www.example.com.

A little speciality is the parameter licence:default. This will link the image to the URL specified in at photos_default_licence within _config.yml

photos_default_licence: http://www.example.com/default_licence.html

I use this mainly for saving typing and linking to the default license I put my own stuff under.

If you want to change the icon, you can change the parameter photos_licence_icon in _config.yml to any other graphic.

photos_licence_icon: /path/to/licence_icon.jpg

Installation

  1. Clone the gist:

    $ git clone https://gist.github.com/4545538.git .

  2. Copy photos_tag.rb into you plug-in folder of Octopress.

  3. Copy the icon licence_info.png into source/images.

  4. Add the parameter for the icon to your _config.yml file:

    photos_licence_icon: images/licence_info.png

  5. If you want to use the default license as well, add the parameter to your _config.yml file as well:

    photos_default_licence: /path/to/your/licence.html

After you generated you HTML files again, it the small icon should appear at the bottom left corner of your image.

CSS

I haven’t moved the CSS outside of the plug-in as I’ve probably should have done it. Just because for the testing purpose it was much easier of having it right there. Feel free to export it into a class and put that one in the plug-in instead.

If you’re having issues with the positioning of the icon or other issue, feel free to contact me.

Updates

2013-12-02

I’ve update the gist. It was missing an CSS id attribute in order to be able to align the image and the licence hint on the website. An id tag within the photo-tag will now set a div-tag around the whole construct and assign the html id to it.

photo /path/to/image.jpg default licence:http://www.example.com id:mainimg A nice image
photo /path/to/image.jpg default licence:default id:mmainimg A nice image