blogging

Hexo Theme - Creating Image Styles

Adding images to a blog post helps the audience undersand what the will get from reading the article and if it will be relevant for the. Images also aid the understanding of the topic you are covering, especially if you are explaining something technical or more complicated.

The default theme for hexo only provides a single image style, so here I will create several styles of image to help convey the topic and details of every post.

Adding image logos to posts

I like to have logos on images to provide a quick visual way to identify the topic of an article. This is similar to other sites such as Slashdot.

If I simply add an image then it will be placed in the middle of the article area, this does not look that great and takes up a lot of space.

To make better use of space and improve the design, I created a style called img-thumbnail. The style ensures that each image displays on the left and be no bigger than 240 pixels wide and 96 pixels high.

/themes/landscape/source/css/_partial/article.styl
1
2
3
4
5
6
7
8
.img-thumbnail
  max-width: 240px
  max-height: 96px
  display: block
  margin-right: 12px
  margin-top: 12px
  float: left
  clear: left

Here is an example of what the img-thumbnail style looks like in the websites

Adding image style for screenshots

Some images will be screenshots of the command line, code and developer tools in actoin. These images will be centrally placed as normal, but will have specific height and with contraints to make sure all the images are big enough to view yet stil fit on the page.

/themes/landscape/source/css/_partial/article.styl
1
2
3
4
5
6
.img-screenshot
  max-width: 640px
  max-height: 320px
  display: block 
  margin-left: auto
  margin-right: auto

Here is an example of what the img-screenshot style looks like in the websites

Adding images for topics discussed

During an article I may talk about several different topics and what to visually highlight what topic is being disscussed. So again I created another image style, this time placing the image on the right hand side of the content and allowing a bigger size.

/themes/landscape/source/css/_partial/article.styl
1
2
3
4
5
6
7
8
.img-topic
  max-width: 360px
  max-height: 1800px
  display: block 
  margin-left 12px
  margin-right: 12px
  float: right
  clear: right

Here is an example of what the img-topic style looks like in the websites

In Summary

By setting up different styles it makes it very easy to layout images in an article, using just one style name. This helps me make each blog post more visually appealing to look at and therefore a better experience for the reader (and myself).

Thank you.
@jr0cket

This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket
Creative Commons License