hexo-tag-optimized-gif

1.1.1 • Public • Published

hexo-tag-optimized-gif

Add embedded html5 video to hexo, but treat it like a GIF.

Maybe you are recording GIFs for your blog but the GIF files are too big and many of them are eating up band width from your free plan CDN? An optimization is to use some kind of CDN like Cloudinary which is able to covert your uploaded GIF into smaller MP4 or WebM video file by just changing extension of your file URI.

This tag will add a <video> tag with autoplay and loop attributes when generation, helping you achieve the optimization.

Installation

$ npm install hexo-tag-optimized-gif --save

Usage

{% mp4gif [div_class] your_URI %}
or 
{% webmgif [div_class] your_URI %}
Arg Description
div_class(Optional) Multiple class names supported (with spaces). If this class name is specified, a div wrapper is created and its class is div_class.
your_URI Just put your GIF link here and the URI extension replacement will be handled internally.

Configuration

Add the following lines into your hexo _config.yml file:

hexo_tag_optimized_gif:
  enable_poster: false
  video_css_class: [your class name]
  • enable_poster: whether to use poster attribute for <video> tag. With it enabled, the picture coverted from your URI by CDN is shown while video is downloading.
  • video_css_class: the class name you specify for <video> tag.

Other default settings of <video> attributes are listed below:

Attribute Default setting
width untouched
height untouched
muted true
poster empty string, if enable_poster is true, it's the URI with extension replaced by jpg.

This tag plugin is compatible with the orginal hexo-tag-html5 plugin.

License

MIT

Package Sidebar

Install

npm i hexo-tag-optimized-gif

Weekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

3.54 kB

Total Files

3

Last publish

Collaborators

  • zyzyz