139 lines
18 KiB
JSON
139 lines
18 KiB
JSON
{
|
|
"name": "wildlyinaccurate/jekyll-responsive-image",
|
|
"version": "0.1.4",
|
|
"libraries": {
|
|
"xv": "^1.1.21"
|
|
},
|
|
"title": "",
|
|
"branch": "master",
|
|
"style": {
|
|
"name": "Default",
|
|
"componentSet": {
|
|
"nav": "nav/BasicNav",
|
|
"header": "header/BannerHeader",
|
|
"article": "article/BasicArticle",
|
|
"footer": "footer/BasicFooter"
|
|
},
|
|
"fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
|
|
"fontWeight": 400,
|
|
"bold": 600,
|
|
"lineHeight": 1.5,
|
|
"typeScale": [
|
|
72,
|
|
48,
|
|
24,
|
|
20,
|
|
16,
|
|
14,
|
|
12
|
|
],
|
|
"monospace": "Menlo, monospace",
|
|
"heading": {
|
|
"fontFamily": null,
|
|
"fontStyle": null,
|
|
"fontWeight": 600,
|
|
"lineHeight": 1.25,
|
|
"textTransform": null,
|
|
"letterSpacing": null,
|
|
"h0": {},
|
|
"h1": {},
|
|
"h2": {},
|
|
"h3": {},
|
|
"h4": {},
|
|
"h5": {},
|
|
"h6": {}
|
|
},
|
|
"alternativeText": {},
|
|
"space": [
|
|
0,
|
|
8,
|
|
16,
|
|
32,
|
|
48,
|
|
64,
|
|
96
|
|
],
|
|
"layout": {
|
|
"maxWidth": 1024,
|
|
"centered": false
|
|
},
|
|
"colors": {
|
|
"text": "#111",
|
|
"background": "#fff",
|
|
"primary": "#08e",
|
|
"secondary": "#059",
|
|
"highlight": "#e08",
|
|
"border": "#ddd",
|
|
"muted": "#eee"
|
|
},
|
|
"border": {
|
|
"width": 1,
|
|
"radius": 2
|
|
},
|
|
"link": {},
|
|
"button": {
|
|
"hover": {
|
|
"boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
|
|
}
|
|
},
|
|
"input": {},
|
|
"body": {
|
|
"margin": 0
|
|
},
|
|
"breakpoints": {
|
|
"xs": "@media screen and (max-width:40em)",
|
|
"sm": "@media screen and (min-width:40em)",
|
|
"md": "@media screen and (min-width:52em)",
|
|
"lg": "@media screen and (min-width:64em)"
|
|
}
|
|
},
|
|
"content": [
|
|
{
|
|
"component": "nav",
|
|
"links": [
|
|
{
|
|
"href": "https://github.com/wildlyinaccurate/jekyll-responsive-image",
|
|
"text": "GitHub"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"component": "header",
|
|
"heading": "jekyll-responsive-image",
|
|
"subhead": "An unopinionated Jekyll plugin for generating and using responsive images",
|
|
"children": [
|
|
{
|
|
"component": "ui/TweetButton",
|
|
"text": "jekyll-responsive-image: An unopinionated Jekyll plugin for generating and using responsive images",
|
|
"url": ""
|
|
},
|
|
{
|
|
"component": "ui/GithubButton",
|
|
"user": "wildlyinaccurate",
|
|
"repo": "jekyll-responsive-image"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"component": "article",
|
|
"metadata": {
|
|
"source": "github.readme"
|
|
},
|
|
"html": "<h1>Jekyll Responsive Images</h1>\n<p>Jekyll Responsive Images is a <a href=\"http://jekyllrb.com/\">Jekyll</a> plugin and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Specifications\"><code>srcset</code></a> or <a href=\"https://github.com/BBC-News/Imager.js/\">Imager.js</a>.</p>\n<p><a href=\"https://travis-ci.org/wildlyinaccurate/jekyll-responsive-image\"></a>\n<a href=\"https://coveralls.io/repos/github/wildlyinaccurate/jekyll-responsive-image/badge.svg?branch=master\"></a>\n<a href=\"https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images\"></a></p>\n<h2>Installation</h2>\n<p>First, install the gem:</p>\n<pre>$ gem <span class=\"hljs-keyword\">install</span> jekyll-responsive_image</pre><p>Then you can either add it to the <code>gems</code> section of your <code>_config.yml</code>:</p>\n<pre><span class=\"hljs-attr\">gems:</span> [jekyll-responsive-image]</pre><p>Or you can copy the contents of <a href=\"lib/jekyll-responsive-image.rb\"><code>responsive_image.rb</code></a> into your <code>_plugins</code> directory.</p>\n<h2>Configuration</h2>\n<p>An example configuration is below.</p>\n<pre><span class=\"hljs-attr\">responsive_image:</span>\n <span class=\"hljs-comment\"># [Required]</span>\n <span class=\"hljs-comment\"># Path to the image template.</span>\n<span class=\"hljs-attr\"> template:</span> _includes/responsive-image.html\n\n <span class=\"hljs-comment\"># [Optional, Default: 85]</span>\n <span class=\"hljs-comment\"># Quality to use when resizing images.</span>\n<span class=\"hljs-attr\"> default_quality:</span> <span class=\"hljs-number\">90</span>\n\n <span class=\"hljs-comment\"># [Optional, Default: []]</span>\n <span class=\"hljs-comment\"># An array of resize configuration objects. Each object must contain at least</span>\n <span class=\"hljs-comment\"># a `width` value.</span>\n<span class=\"hljs-attr\"> sizes:</span>\n<span class=\"hljs-attr\"> - width:</span> <span class=\"hljs-number\">480</span> <span class=\"hljs-comment\"># [Required] How wide the resized image will be.</span>\n<span class=\"hljs-attr\"> quality:</span> <span class=\"hljs-number\">80</span> <span class=\"hljs-comment\"># [Optional] Overrides default_quality for this size.</span>\n<span class=\"hljs-attr\"> - width:</span> <span class=\"hljs-number\">800</span>\n<span class=\"hljs-attr\"> - width:</span> <span class=\"hljs-number\">1400</span>\n<span class=\"hljs-attr\"> quality:</span> <span class=\"hljs-number\">90</span>\n\n <span class=\"hljs-comment\"># [Optional, Default: assets]</span>\n <span class=\"hljs-comment\"># The base directory where assets are stored. This is used to determine the</span>\n <span class=\"hljs-comment\"># `dirname` value in `output_path_format` below.</span>\n<span class=\"hljs-attr\"> base_path:</span> assets\n\n <span class=\"hljs-comment\"># [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]</span>\n <span class=\"hljs-comment\"># The template used when generating filenames for resized images. Must be a</span>\n <span class=\"hljs-comment\"># relative path.</span>\n <span class=\"hljs-comment\">#</span>\n <span class=\"hljs-comment\"># Parameters available are:</span>\n <span class=\"hljs-comment\"># %{dirname} Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)</span>\n <span class=\"hljs-comment\"># %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)</span>\n <span class=\"hljs-comment\"># %{filename} Basename without the extension (assets/some-file.jpg => some-file)</span>\n <span class=\"hljs-comment\"># %{extension} Extension of the file (assets/some-file.jpg => jpg)</span>\n <span class=\"hljs-comment\"># %{width} Width of the resized image</span>\n <span class=\"hljs-comment\"># %{height} Height of the resized image</span>\n <span class=\"hljs-comment\">#</span>\n<span class=\"hljs-attr\"> output_path_format:</span> assets/resized/%{width}/%{basename}\n\n <span class=\"hljs-comment\"># By default, only images referenced by the responsive_image and responsive_image_block</span>\n <span class=\"hljs-comment\"># tags are resized. Here you can set a list of paths or path globs to resize other</span>\n <span class=\"hljs-comment\"># images. This is useful for resizing images which will be referenced from stylesheets.</span>\n<span class=\"hljs-attr\"> extra_images:</span>\n<span class=\"hljs-bullet\"> -</span> assets/foo/bar.png\n<span class=\"hljs-bullet\"> -</span> assets/bgs/*.png\n<span class=\"hljs-bullet\"> -</span> assets/avatars/*.{jpeg,jpg}</pre><h2>Usage</h2>\n<p>Replace your images with the <code>responsive_image</code> tag, specifying the path to the image in the <code>path</code> attribute.</p>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">responsive_image</span> path: assets/my-file.jpg %}</span><span class=\"xml\"></span></pre><p>You can override the template on a per-image basis by specifying the <code>template</code> attribute.</p>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">responsive_image</span> path: assets/my-file.jpg template: _includes/another-template.html %}</span><span class=\"xml\"></span></pre><p>Any extra attributes will be passed straight to the template as variables.</p>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">responsive_image</span> path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}</span><span class=\"xml\"></span></pre><h3>Liquid variables as attributes</h3>\n<p>You can use Liquid variables as attributes with the <code>responsive_image_block</code> tag. This tag works in exactly the same way as the <code>responsive_image</code> tag, but is implemented as a block tag to allow for more complex logic.</p>\n<blockquote>\n<p><strong>Important!</strong> The attributes in the <code>responsive_image_block</code> tag are parsed as YAML, so whitespace and indentation are significant!</p>\n</blockquote>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">assign</span> path = 'assets/test.png' %}</span><span class=\"xml\">\n</span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">assign</span> alt = 'Lorem ipsum...' %}</span><span class=\"xml\">\n\n</span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">responsive_image_block</span> %}</span><span class=\"xml\">\n path: </span><span class=\"hljs-template-variable\">{{ path }}</span><span class=\"xml\">\n alt: </span><span class=\"hljs-template-variable\">{{ alt }}</span><span class=\"xml\">\n </span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\"><span class=\"hljs-keyword\">if</span></span> title %}</span><span class=\"xml\">\n title: </span><span class=\"hljs-template-variable\">{{ title }}</span><span class=\"xml\">\n </span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\"><span class=\"hljs-keyword\">endif</span></span> %}</span><span class=\"xml\">\n</span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">endresponsive_image_block</span> %}</span><span class=\"xml\"></span></pre><h3>Template</h3>\n<p>You will need to create a template in order to use the <code>responsive_image</code> tag. Below are some sample templates to get you started.</p>\n<h4>Responsive images with <code>srcset</code></h4>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">capture</span> srcset %}</span><span class=\"xml\">\n </span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\"><span class=\"hljs-keyword\">for</span></span> i in resized %}</span><span class=\"xml\">\n /</span><span class=\"hljs-template-variable\">{{ i.path }}</span><span class=\"xml\"> </span><span class=\"hljs-template-variable\">{{ i.width }}</span><span class=\"xml\">w,\n </span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\"><span class=\"hljs-keyword\">endfor</span></span> %}</span><span class=\"xml\">\n</span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">endcapture</span> %}</span><span class=\"xml\">\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">img</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">"/</span></span></span><span class=\"hljs-template-variable\">{{ path }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">"</span> <span class=\"hljs-attr\">alt</span>=<span class=\"hljs-string\">"</span></span></span><span class=\"hljs-template-variable\">{{ alt }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">"</span> <span class=\"hljs-attr\">srcset</span>=<span class=\"hljs-string\">"</span></span></span><span class=\"hljs-template-variable\">{{ srcset | strip_newlines }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\"> /</span></span></span><span class=\"hljs-template-variable\">{{ original.path }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\"> </span></span></span><span class=\"hljs-template-variable\">{{ original.width }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">w"</span>></span></span></pre><h4>Responsive images with <code><picture></code></h4>\n<pre><span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">picture</span>></span>\n </span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\"><span class=\"hljs-keyword\">for</span></span> i in resized %}</span><span class=\"xml\">\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">source</span> <span class=\"hljs-attr\">media</span>=<span class=\"hljs-string\">"(min-width: </span></span></span><span class=\"hljs-template-variable\">{{ i.width }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">px)"</span> <span class=\"hljs-attr\">srcset</span>=<span class=\"hljs-string\">"/</span></span></span><span class=\"hljs-template-variable\">{{ i.path }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">"</span>></span>\n </span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\"><span class=\"hljs-keyword\">endfor</span></span> %}</span><span class=\"xml\">\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">img</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">"/</span></span></span><span class=\"hljs-template-variable\">{{ path }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">"</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">picture</span>></span></span></pre><h4>Responsive images using <a href=\"https://github.com/BBC-News/Imager.js/\">Imager.js</a></h4>\n<blockquote>\n<p><strong>Note:</strong> This template assumes an <code>output_path_format</code> of <code>assets/resized/%{width}/%{basename}</code></p>\n</blockquote>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-tag\">{% <span class=\"hljs-name\">assign</span> smallest = resized | sort: 'width' | first %}</span><span class=\"xml\">\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">"responsive-image"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">img</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">"responsive-image__placeholder"</span> <span class=\"hljs-attr\">src</span>=<span class=\"hljs-string\">"/</span></span></span><span class=\"hljs-template-variable\">{{ smallest.path }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">"</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-name\">div</span> <span class=\"hljs-attr\">class</span>=<span class=\"hljs-string\">"responsive-image__delayed"</span> <span class=\"hljs-attr\">data-src</span>=<span class=\"hljs-string\">"/assets/resized/{width}/</span></span></span><span class=\"hljs-template-variable\">{{ original.basename }}</span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-string\">"</span>></span><span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n<span class=\"hljs-tag\"></<span class=\"hljs-name\">div</span>></span>\n\n<span class=\"hljs-tag\"><<span class=\"hljs-name\">script</span>></span><span class=\"actionscript\">\n <span class=\"hljs-keyword\">new</span> Imager(<span class=\"hljs-string\">'.responsive-image__delayed'</span>, {\n availableWidths: [</span></span><span class=\"hljs-template-variable\">{{ resized | map: 'width' | join: ', ' }}</span><span class=\"xml\"><span class=\"javascript\">]\n onImagesReplaced: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>(<span class=\"hljs-params\"></span>) </span>{\n $(<span class=\"hljs-string\">'.responsive-image__placeholder'</span>).hide();\n }\n });\n</span><span class=\"hljs-tag\"></<span class=\"hljs-name\">script</span>></span></span></pre><h3>Template Variables</h3>\n<p>The following variables are available in the template:</p>\n<table>\n<thead>\n<tr>\n<th>Variable</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>path</code></td>\n<td>String</td>\n<td>The path of the unmodified image. This is always the same as the <code>path</code> attribute passed to the tag.</td>\n</tr>\n<tr>\n<td><code>resized</code></td>\n<td>Array</td>\n<td>An array of all the resized images. Each image is an <strong>Image Object</strong>.</td>\n</tr>\n<tr>\n<td><code>original</code></td>\n<td>Object</td>\n<td>An <strong>Image Object</strong> containing information about the original image.</td>\n</tr>\n<tr>\n<td><code>*</code></td>\n<td>String</td>\n<td>Any other attributes will be passed to the template verbatim as strings.</td>\n</tr>\n</tbody>\n</table>\n<h4>Image Objects</h4>\n<p>Image objects (like <code>original</code> and each object in <code>resized</code>) contain the following properties:</p>\n<table>\n<thead>\n<tr>\n<th>Variable</th>\n<th>Type</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>path</code></td>\n<td>String</td>\n<td>The path to the image.</td>\n</tr>\n<tr>\n<td><code>width</code></td>\n<td>Integer</td>\n<td>The width of the image.</td>\n</tr>\n<tr>\n<td><code>height</code></td>\n<td>Integer</td>\n<td>The height of the image.</td>\n</tr>\n<tr>\n<td><code>basename</code></td>\n<td>String</td>\n<td>Basename of the file (<code>assets/some-file.jpg</code> => <code>some-file.jpg</code>).</td>\n</tr>\n<tr>\n<td><code>dirname</code></td>\n<td>String</td>\n<td>Directory of the file relative to <code>base_path</code> (<code>assets/sub/dir/some-file.jpg</code> => <code>sub/dir</code>).</td>\n</tr>\n<tr>\n<td><code>filename</code></td>\n<td>String</td>\n<td>Basename without the extension (<code>assets/some-file.jpg</code> => <code>some-file</code>).</td>\n</tr>\n<tr>\n<td><code>extension</code></td>\n<td>String</td>\n<td>Extension of the file (<code>assets/some-file.jpg</code> => <code>jpg</code>).</td>\n</tr>\n</tbody>\n</table>\n"
|
|
},
|
|
{
|
|
"component": "footer",
|
|
"links": [
|
|
{
|
|
"href": "https://github.com/wildlyinaccurate/jekyll-responsive-image",
|
|
"text": "GitHub"
|
|
},
|
|
{
|
|
"href": "https://github.com/wildlyinaccurate",
|
|
"text": "wildlyinaccurate"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|