{"id":13612136,"url":"https://github.com/generalui/jekyll-image-size","last_synced_at":"2025-04-13T11:31:38.630Z","repository":{"id":48753408,"uuid":"200097993","full_name":"generalui/jekyll-image-size","owner":"generalui","description":"Jekyll tag-plugin reads an image's size and outputs many formats: opengraph tags, img-tags, css and more - with retina support","archived":false,"fork":false,"pushed_at":"2023-01-30T03:08:31.000Z","size":36,"stargazers_count":30,"open_issues_count":8,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-09-15T09:02:54.447Z","etag":null,"topics":["accelerator"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/generalui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-01T18:07:56.000Z","updated_at":"2024-08-22T21:10:16.000Z","dependencies_parsed_at":"2023-02-18T01:01:02.202Z","dependency_job_id":null,"html_url":"https://github.com/generalui/jekyll-image-size","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generalui%2Fjekyll-image-size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generalui%2Fjekyll-image-size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generalui%2Fjekyll-image-size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/generalui%2Fjekyll-image-size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/generalui","download_url":"https://codeload.github.com/generalui/jekyll-image-size/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223585189,"owners_count":17169249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accelerator"],"created_at":"2024-08-01T20:00:23.182Z","updated_at":"2024-11-07T20:30:26.245Z","avatar_url":"https://github.com/generalui.png","language":"Ruby","funding_links":[],"categories":["Images \u0026 Pictures"],"sub_categories":[],"readme":"# Jekyll-Image-Size ![travis-ci.org](https://travis-ci.org/generalui/jekyll-image-size.svg) [![Gem Version](https://badge.fury.io/rb/jekyll-image-size.svg)](https://badge.fury.io/rb/jekyll-image-size)\n\nJekyll tag-plugin to read image sizes from static assets and output in many formats.\n\nUses:\n\n* generate your opengraph og:image:height and og:image:width tags\n* IMG tags for retina-resolution assets (@2x, @3x, etc...)\n* Generate CSS or HTML width/height props\n* or just output `width`, `height` or `width + \"x\" + height`\n\nSamples:\n\n```html\n{% imagesize image:width %}\n350\n\n{% imagesize image:opengraph %}\n\u003cmeta property='og:image:width' content='350'/\u003e\u003cmeta property='og:image:height' content='32'/\u003e\n\n{% imagesize image:img %}\n\u003cimg src='/assets/logo.jpg' width='350' height='32'\u003e\n```\n\n## Installation\n\nInstall this gem:\n\n```ruby\n# via: ruby-gems\ngem install jekyll-image-size\n\n# OR via: bundler\nbundle add jekyll-image-size\n```\n\nAdd id to your [jekyll _config.yml](https://jekyllrb.com/docs/configuration/):\n\n```yaml\nplugins:\n  - jekyll-image-size\n```\n\n## File Types Supported\n\nJekyll-image-size uses the fastimage gem. It supports every type [fastimage](https://github.com/sdsykes/fastimage) support. As of right now, that means:\n\n```\ngif, jpeg, png, tiff, bmp, ico, cur, psd, svg, webp\n```\n\n\n## Usage\n\nThe `imagesize` takes one parameter. That parameter has the form:\n\n```\nsource[:format[/divide-by-number]][?uri-encoded-params][ rest...]\n```\n\nsource is a string and can be one of:\n\n* url\n* file (rooted in the project root)\n* Liquid/Jekyll context-variable name\n\nformats:\n\n* size:       `WxH`\n* json:       `{width: W, height: H}`\n* array:       `[W, H]`\n* list:       `W, H`\n* width:      `W`\n* height:     `H`\n* css:        `width: Wpx; height: Hpx;`\n* props:      `width='W' height='H'`\n* opengraph:  `\u003cmeta property='og:image:width' content='W'/\u003e\u003cmeta property='og:image:height' content='H'/\u003e`\n* img:        `\u003cimg src='/assets/logo.jpg' width='W' height='H'\u003e`\n\ndivide-by-numbers:\n\n* integer:    2\n* float:      2.5 or 0.5 or .5\n\nuri-encoded-params:\n\n* width=123: set the width to the given pixels and scale the height proportionally\n* height=123: set the height to the given pixels and scale the width proportionally\n\nrest:\n\n* must start with a space\n* only used for the \"img\" tag format\n* appended to the end of the img-tag just before the \"\u003e\".\n\n## Examples\n\nFormat examples:\n\n```html\n{% imagesize source %}           \u003e\u003e 652x435\n{% imagesize source:size %}      \u003e\u003e 652x435\n{% imagesize source:json %}      \u003e\u003e {width: 652, height: 435}\n{% imagesize source:array %}     \u003e\u003e [652, 435]\n{% imagesize source:list %}      \u003e\u003e 652, 435\n{% imagesize source:width %}     \u003e\u003e 652\n{% imagesize source:height %}    \u003e\u003e 435\n{% imagesize source:css %}       \u003e\u003e width: 652px; height: 435px;\n{% imagesize source:props %}     \u003e\u003e width='652' height='435'\n{% imagesize source:opengraph %} \u003e\u003e \u003cmeta property='og:image:width' content='350'/\u003e\u003cmeta property='og:image:height' content='32'/\u003e\n{% imagesize source:img %}       \u003e\u003e \u003cimg src='/assets/logo.jpg' width='350' height='32'\u003e\n```\n\nScaling examples:\n\n```html\n{% imagesize source:size/2 %}    \u003e\u003e 326x218\n{% imagesize source:size?width=600 %}   \u003e\u003e 600x400\n{% imagesize source:size?height=200 %}  \u003e\u003e 300x200\n```\n\nImage source examples:\n\n```html\n{% imagesize /assets/logo.jpg %}\n{% assign image = site.image %}\n{% imagesize image %}\n```\n\nCombined examples:\n\n```html\n{% imagesize /assets/logo.jpg:opengraph %}\n{% imagesize /assets/logo.jpg:css/2 %}\n{% imagesize image:width/2.5 %}\n{% imagesize image:height?width=500 %}\n{% imagesize /assets/logo.jpg:img alt='my alt string' %}\n  # \u003cimg src='/assets/logo.jpg' width='350' height='32' alt='my alt string'\u003e\n```\n\n## License\n\njekyll-image-size is [MIT licensed](./LICENSE).\n\n## Produced By\n\njekyll-image-size was [developed in Ruby at GenUI.co](https://www.genui.co).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeneralui%2Fjekyll-image-size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeneralui%2Fjekyll-image-size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeneralui%2Fjekyll-image-size/lists"}