I love word cloud. As I have just started a site with jekyll I wondered how would it look to add a word cloud thumbnail to the list of post as a thumbnail and how hard would it be?

Building the word cloud images

My first instinct was to see if there was a python package to build wordcloud. I know python quite well, and would definitely be easy to automate the generation of the images. And of course python has usually pretty much any type ofmodule you can ever dream of, so felt like a good start.

A quick web search later and of course, there is a very nice and easy touse package already. Install into my anaconda setup was trivial withconda install -c conda-forge wordcloud.

Then generation of the picture is trivial and take one line:

wordcloud=WordCloud(max_words=30,background_color=(21,21,21)).generate(text)

to generate the below for this post:

It was then trivial to loop through the posts files and generate a corresponding word cloud image for each

forfninallposts:iffn.endswith(".md")andos.path.isfile(fn):fp=open(post_dir+fn,'r')text=fp.read()wordcloud=WordCloud(max_words=30,background_color=(21,21,21)).generate(text)outname=img_dir+fn[:-len('md')]+'png'wordcloud.to_file(outname)

I just picked the background color to match the background I had set in my jekyll site theme.

I set theimg_dir to be a subfolder/assets/clouds in the side, et voila, the thumbnails were ready.

Adding the thumbnail to the list of posts

Next step was to figure out how to automatically add the image to the list of post. For that I had to find out a bit more about whichliquid tag and filters were available.

It was actually quite simple to generate the thumbnail file name replacing the prefix by the path with the images and the suffix with png

{% assign filename = post.path | remove_first: '_posts/' | replace: '.md', '.png' | prepend: '/assets/clouds/' %}

I also wanted to make sure if the png didn't exist that the generation would just skip the image. I found out that there was asite.static_files variables that could help, I just had to iterate through that and see if the required image was found. Which resulted in the following code in myhome.html template:

<li>        {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}    {% assign filename = post.path | remove_first: "_posts/" | replace: '.md', '.png' | prepend: "/assets/clouds/" %}    {% for static_file in site.static_files %}    {% if static_file.path == filename %}<ahref="{{ post.url | relative_url }}"><imgsrc="{{ filename }}"width="120px"/></a>    {% endif %}    {% endfor %}<spanclass="post-meta">{{ post.date | date: date_format }}</span><h3><aclass="post-link"href="{{ post.url | relative_url }}">            {{ post.title | escape }}</a></h3>

The last stage was to work out how to get the thumbnail properly placed to the left in the list

Positioning the thumbnail

This turned out quite trivial to do, after a quick web search. As expected a list with thumbnail is quite a common occurence on the way. Just required a few lines edit to the_layout.scss file in the post-list class to specify to float theimg underli and add a margin

.post-list{liimg{float:left;margin:015px00;}}

Automating the generation

The last piece was to automate the process of generating the word cloud images. Easiest way was to create a small python script and a make file to achieve that.
I created a new directory_bld in mywebsite repo, and simple makefile

POST_FILES=$(shell find$(POST_DIR)-type f-name*.md)IMG_FILES=$(patsubst$(POST_DIR)/%,$(IMG_DIR)/%,$(POST_FILES:.md=.png))all:$(IMG_FILES)$(IMG_DIR)/%.png:$(POST_DIR)/%.md    ./gencloud.py-o$(IMG_DIR)$<

You can see the final code in mywebsite repo and how the list lookshere