yjpl / jekyll-image-size

Jekyll tag-plugin reads an image's size and outputs many formats: opengraph tags, img-tags, css and more - with retina support

Jekyll-Image-Size

Jekyll tag-plugin to read image sizes from static assets and output in many formats.

Uses:

• generate your opengraph og:image:height and og:image:width tags
• IMG tags for retina-resolution assets (@2x, @3x, etc...)
• Generate CSS or HTML width/height props
• or just output width, height or width + "x" + height

Samples:

{% imagesize image:width %}
350

{% imagesize image:opengraph %}
<meta property='og:image:width' content='350'/><meta property='og:image:height' content='32'/>

{% imagesize image:img %}
<img src='/assets/logo.jpg' width='350' height='32'>

Installation

Install this gem:

# via: ruby-gems
gem install jekyll-image-size

# OR via: bundler
bundle add jekyll-image-size

Add id to your jekyll _config.yml:

plugins:
  - image-size

File Types Supported

Jekyll-image-size uses the fastimage gem. It supports every type fastimage support. As of right now, that means:

gif, jpeg, png, tiff, bmp, ico, cur, psd, svg, webp

Usage

The imagesize takes one parameter. That parameter has the form:

source[:format[/divide-by-number]][?uri-encoded-params][ rest...]

source is a string and can be one of:

• url
• file (rooted in the project root)
• Liquid/Jekyll context-variable name

formats:

• size: WxH
• json: {width: W, height: H}
• array: [W, H]
• list: W, H
• width: W
• height: H
• css: width: Wpx; height: Hpx;
• props: width='W' height='H'
• opengraph: <meta property='og:image:width' content='W'/><meta property='og:image:height' content='H'/>
• img: <img src='/assets/logo.jpg' width='W' height='H'>

divide-by-numbers:

• integer: 2
• float: 2.5 or 0.5 or .5

uri-encoded-params:

• width=123: set the width to the given pixels and scale the height proportionally
• height=123: set the height to the given pixels and scale the width proportionally

rest:

• must start with a space
• only used for the "img" tag format
• appended to the end of the img-tag just before the ">".

Examples

Format examples:

{% imagesize source %}           >> 652x435
{% imagesize source:size %}      >> 652x435
{% imagesize source:json %}      >> {width: 652, height: 435}
{% imagesize source:array %}     >> [652, 435]
{% imagesize source:list %}      >> 652, 435
{% imagesize source:width %}     >> 652
{% imagesize source:height %}    >> 435
{% imagesize source:css %}       >> width: 652px; height: 435px;
{% imagesize source:props %}     >> width='652' height='435'
{% imagesize source:opengraph %} >> <meta property='og:image:width' content='350'/><meta property='og:image:height' content='32'/>
{% imagesize source:img %}       >> <img src='/assets/logo.jpg' width='350' height='32'>

Scaling examples:

{% imagesize source:size/2 %}    >> 326x218
{% imagesize source:size?width=600 %}   >> 600x400
{% imagesize source:size?height=200 %}  >> 300x200

Image source examples:

{% imagesize /assets/logo.jpg %}
{% assign image = site.image %}
{% imagesize image %}

Combined examples:

{% imagesize /assets/logo.jpg:opengraph %}
{% imagesize /assets/logo.jpg:css/2 %}
{% imagesize image:width/2.5 %}
{% imagesize image:height?width=500 %}
{% imagesize /assets/logo.jpg:img alt='my alt string' %}
  # <img src='/assets/logo.jpg' width='350' height='32' alt='my alt string'>

License

jekyll-image-size is MIT licensed.

Produced By

jekyll-image-size was developed in Ruby at GenUI.co.