Images in Hexo

coding
  1. 1. File locations of the images
  2. 2. Displaying the images
    1. 2.1. Using Markdown
    2. 2.2. Using HTML

Displaying images in Hexo with Markdown.

File locations of the images

This is straightforward and is discussed in the official documentation. There are two ways. One is to put all images in the so-called global asset folder, source/images, and all posts will need to refer to the images using the path /images/[FILENAME]. The other way is to enable the post asset folder by setting the following flag in _config.yml, 

1
post_asset_folder: true

In this case, the images will be stored separately in a folder of the same name as the post file name. In the post, the image is inserted using the path [FILENAME]. A similar discussion can be found here.

Displaying the images

Using Markdown

The image capabilities of Markdown depends on its implementation. The basic approach can be found here 

1
![](FILENAME [TEXT])

Some implementations of Markdown support the sizing of the image as discussed here. 

1
![](FILENAME [TEXT] WIDTHx[HEIGHT])

Unfortunately, it seems the current Markdown engine pandoc does not support the sizing.

An example is shown as follows,

Using HTML

The HTML can be embedded into Markdown. So fancier image displaying can be achieved using HTML snippets. Note that there is also another approach that is based on CSS (an example). However, CSS more or less makes the file structure more complicated.

The basic format is, but not limited to, 

1
<img src=FILENAME [width=WIDTH] [height=HEIGHT] [hspace=HSPACE] [align=<"right"|"left">] [title=TITLETEXT] [style=STYLESTR]>

Note that one can use the style keyword to define the size and alignment, etc. For example, 

1
style="width:WIDTH; height:HEIGHT; float:<right|left>"

Finally, <img> can be combined with <p></p>, <figure></figure>, etc to achieve other formatting purposes.

The following are some examples. Hover the cursor on the image to see the title.

1
<img src="avatar.jpeg" title="A regular image" width="20px" height="20px">

1
<img src="avatar.jpeg" title="Image with right alignment" width="20px" align="right">

1
<img src="avatar.jpeg" title="Right alignment using style" style="float:right; width:20px;">

1
2
<img src="avatar.jpeg" title="Multiple images on one line" width="20px" hspace="20px">
<img src="avatar.jpeg" width="20px">

1
2
3
4
<p align="center">
  <img src="avatar.jpeg" title="Multiple images using p with center alignment" width="20px">
  <img src="avatar.jpeg" width="20px">
</p>

1
2
3
4
5
<figure float="left">
  <img src="avatar.jpeg" title="Image 1 with a caption" width="20px">
  <img src="avatar.jpeg" title="Image 2 with a caption" width="20px">
  <figcaption>An image with a caption.</figcaption>
</figure>
Images with a caption.

More references:

  1. HTML alignment
  2. HTML multiple images on the same line
  3. HTML image with a caption
hexo