After refurbishing my blog away from the default bootstrap-3 css, I settled on a homepage that I like quite a bit. As of the evening of 15/09/2016, my homepage looks like such:
On my homepage, an icon is associated with each post. The image for the icon is selected this way: if a key field called ‘icon’ is defined in the YAML header in post, then the corresponding image with the value of that field is read from the pre-set directory.
The default icon is a ‘hello world’ type icon that the chrome extensions tutorial package comes with. One interesting thing about the default icon is that it is round, i.e. certain peripheral pixels are set as transparent (alpha value = 0 in RGBA pixel array).
When I try to get an image or make an image, it is always a square/rectangular shaped. Using such image as an icon looks far worse than the circular default. So I decided to do some image processing.
I wrote a tiny snippet of python code to do that.
The below code essential reads in an image the user can specify the directory of in a GUI. The image is interpreted as an 2D array of RGBA value lists.
What I then do is to edit the shape of the image to a square. In order to do this, the side-lengths in pixels are determined, and the peripheral pixels for along the longer side are removed until the image becomes square shaped.
Next, the image is resized to a user-defined size (in terms of pixels), the default is 19.
Lastly, the new image is saved, with the same name as the old image. Be aware not all image formats support transparency definitions, jpg certainly does not whereas png does (I wasted a lot of time trying to figure out why transparency isn’t working).
import scipy.misc as sm
import Tkinter
import tkFileDialog
import numpy as np
class IconGen:
def __init__(self, size = 19):
Tkinter.Tk().withdraw()
self.name = tkFileDialog.askopenfilename()
self.size = size
self.fix()
self.save()
def fix(self ):
im = sm.imread(self.name , mode = "RGBA")
dim = im.shape[ : 2]
im = im[(dim[0] - min(dim))/2 : (dim[0] + min(dim))/2, (dim[1] - min(dim))/2 : (dim[1] + min(dim))/2 ,:]
self.im = sm.imresize(im, size = (self.size,self.size))
xi = range(self.size)
xi, yi = np.meshgrid(xi, xi)
r = np.sqrt((xi - self.size/2)**2 + (yi - self.size/2)**2)
outside = r > self.size/2
x, y = np.where(outside)
self.im[x ,y , :] = 0
def save(self):
sm.imsave(self.name, self.im)
IconGen()
At the time of writing, I updated the QM posts to have the φ character icon prepended to them. I will slowly updates other icons as I find interesting/inspirational/suitable images…