This article offers some use cases for showing how to resize and align images.

Resizing Images#

We use the URL query of image for resizing images. For example:

Specify the width and preserve ratio#

1![Resize](featured-sample.png?width=300px)

Resize

Specify the height and preserve ratio#

1![Resize](featured-sample.png?height=200px)

Resize

Specify the width and height#

1![Resize](featured-sample.png?width=300px&height=200px)

Resize

It can be used not only for page resources, but also for the static images and external images. However, in addition to page resources, others are resized by inline style, that is, their original size will not change.

Aligning Images#

We can easily align images by adding URL fragments. Such as #center, #floatleft and #floatright represents align center, float left and float right respectively.

Center#

Adding the #center fragment for aligning images to the center.

For example: ![Center](/featured-sample.png#center).

Center

Float Left#

Float Left

Adding the #floatleft fragment for floating images to the left.

For example: ![Float Left](/featured-sample.png#floatleft).

Float Right#

Float Right

Similarly, we can also float images to the right by adding the #floatright fragment.

For example: ![Float Right](/featured-sample.png#floatright).

Caption#

HBS allows using image title as caption, this feature is disabled by default, you need to enable the post.imageTitleAsCaption parameter:

  • params. 
1[post]
2  imageTitleAsCaption = true

1post:
2  imageTitleAsCaption: true

1{
2   "post": {
3      "imageTitleAsCaption": true
4   }
5}

1![Image Caption](/featured-sample.png "Use Image Title as Caption")

Image Caption
Use Image Title as Caption