@string-bean/hexo-image-toolkit v0.5.0

Hexo Image Toolkit

Hexo tag plugin for converting & resizing images and generating associated markup.

Install

Install the package:

npm install -S @string-bean/hexo-image-toolkit

Then ensure that you have asset folders enabled in your Hexo _config.yml:

post_asset_folder: true

Usage

Given the following Markdown with example.jpg having a size of 2048x1536 pixels:

{% post_img example.jpg title="An example image" retina %}

The following HTML will be generated:

<figure class="image">
  <picture>
    <source
      srcset="/post-path/example@2x.webp 2x, /post-path/example.webp"
      type="image/webp"
    />
    <img
      src="/post-path/example.jpg"
      alt="An example image"
      width="1024"
      height="768"
    />
  </picture>

  <figcaption>
    <span>An example image</span>
  </figcaption>
</figure>

Along with the following image assets:

• /post-path/example@2x.webp - sized 2048x1536
• /post-path/example.webp - sized 1024x768
• /post-path/example.jpg - sized 1024x768

Options

Image Sizing

By default, the size of the input image is used for both the WEBP and fallback images. If the retina flag is set then this size will be used for the 2x image and fallback images generated at a quarter of the resolution.

For example, given an input image with a size of 2000x1000 pixels: