Category: UX

Jekyll Hacks with 3 lines of code

Okay, so I store an associative array in my _config.yml that has:

baseImgURL: img
fileName: ['glyphicons-halflings-white', 'glyphicons-halflings-black',

Now for magic the Jekyll code in this gist, allows me to do this:

{% assign siteImgArrayObject = 'site.img' %}
{% include FG/twitterbs_image_helper %}

Tada, just two lines. Three lines is I need href urls. Is that not neat? Thus I can do strips of images without the messy coding. All due to storing some metadata in my_config.yml.

The Jekyll boilerplate I have been working is a few days away for being finished. There are some interesting Jekyll/Liquid hacks that I will be writing a long coding article about  that avoid you have to using jekyll plugins. For example the Jekyll and Liquid combination has a nice way to be able to iterate over site and page arrays. Traditionally,most have found that they can include an array that is not provided for the e Jekyll site  and page objects as YAML front matter. Did you know that is not the only to do it?

For example:

fileName: [ 'idiot_recruiter.png', 'founder.png']
url: img

I can now iterate over that site.images.FileName, grabbing the file name and putting that with site.images.url to get a full image url for an image tag in a for loop. Than if you do some small image organization such as grouping non-global site images in groups you can make jekyll/liquid helpers that style it with features required for that post or page. Something like a list of images becomes less than 3 lines of code in Jekyll/Liquid by using the principle of a Jekyll/Liquid _includes helper. All because we started with the concept of using _config.yml to add objects to the site object that were not supplied by Jekyll by default. LOOK, no plugins required!

Twitter Bootstrap 2.0 WIP

if anyone wants to see what Twitter Bootstrap 2.0 WIP looks like being used, try:

I just redesigned it over the weekend, still some minor tweaks to go but I am happy with it.