forked from wildlyinaccurate/jekyll-responsive-image
-
Notifications
You must be signed in to change notification settings - Fork 0
/
compositor.json
138 lines (138 loc) · 18.3 KB
/
compositor.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
{
"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"
}
]
}
]
}