Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/generalui/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
https://github.com/generalui/jekyll-image-size
accelerator
Last synced: about 1 month ago
JSON representation
Jekyll tag-plugin reads an image's size and outputs many formats: opengraph tags, img-tags, css and more - with retina support
- Host: GitHub
- URL: https://github.com/generalui/jekyll-image-size
- Owner: generalui
- License: mit
- Created: 2019-08-01T18:07:56.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-30T03:08:31.000Z (almost 2 years ago)
- Last Synced: 2024-09-15T09:02:54.447Z (3 months ago)
- Topics: accelerator
- Language: Ruby
- Homepage:
- Size: 35.2 KB
- Stars: 30
- Watchers: 7
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-jekyll-plugins - **Image Size** - image-size](https://rubygems.org/gems/jekyll-image-size)) - read images and output image-sizes as: opengraph tags, img-tags, css and more - with retina support (Images & Pictures)
README
# Jekyll-Image-Size  [](https://badge.fury.io/rb/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:
```html
{% imagesize image:width %}
350
{% imagesize image:opengraph %}
{% imagesize image:img %}
```
## Installation
Install this gem:
```ruby
# via: ruby-gems
gem install jekyll-image-size
# OR via: bundler
bundle add jekyll-image-size
```
Add id to your [jekyll _config.yml](https://jekyllrb.com/docs/configuration/):
```yaml
plugins:
- jekyll-image-size
```
## File Types Supported
Jekyll-image-size uses the fastimage gem. It supports every type [fastimage](https://github.com/sdsykes/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: ``
* img: ``
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:
```html
{% 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 %} >>
{% imagesize source:img %} >>
```
Scaling examples:
```html
{% imagesize source:size/2 %} >> 326x218
{% imagesize source:size?width=600 %} >> 600x400
{% imagesize source:size?height=200 %} >> 300x200
```
Image source examples:
```html
{% imagesize /assets/logo.jpg %}
{% assign image = site.image %}
{% imagesize image %}
```
Combined examples:
```html
{% 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' %}
#
```
## License
jekyll-image-size is [MIT licensed](./LICENSE).
## Produced By
jekyll-image-size was [developed in Ruby at GenUI.co](https://www.genui.co).