jekyll_picture_tag 2.0.3 → 2.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/docs/devs/contributing/docs.md +1 -1
- data/docs/devs/contributing/setup.md +2 -2
- data/docs/index.md +4 -4
- data/docs/users/deployment.md +48 -3
- data/docs/users/installation.md +2 -2
- data/docs/users/presets/markup_formats/fragments.md +2 -4
- data/docs/users/presets/markup_formats/javascript_friendly.md +1 -1
- data/lib/jekyll_picture_tag/defaults/presets.rb +3 -3
- data/lib/jekyll_picture_tag/parsers/image_backend.rb +16 -6
- data/lib/jekyll_picture_tag/version.rb +1 -1
- data/readme.md +16 -3
- metadata +3 -4
- data/docs/users/notes/github_pages.md +0 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 53c3ec9a79c58aae1d5dbead4e7d3071a4a28c69589f98ff93e87d0fc6aa64f3
|
4
|
+
data.tar.gz: 8ebe081b0754f009df43de9beb4917dd911ef223393bcea29d029f8a1b546e09
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3ad2303c3383cbb9e63bcf4e07560a717f4bbf317f714e005a7feabe72eb53a17981f6e1874c974686d1dd0a83ca90ad851b62890b33f8748051dbb8412dd267
|
7
|
+
data.tar.gz: b2beab9bd484db516d7d70bf4a2aec8bdf7b0192acfa92dd6c98afe283988831a2064ecb5c85462d0f54104b8ca9fd914a66ab5ff94067c9ba98ab385fd869a3
|
@@ -13,7 +13,7 @@ subdirectories. We're using the [jekyll-rtd-theme](https://jekyll-rtd-theme.rund
|
|
13
13
|
You can preview as you edit; first the setup:
|
14
14
|
|
15
15
|
``` sh
|
16
|
-
$ git clone
|
16
|
+
$ git clone https://github.com/rbuchberger/jekyll_picture_tag.git # if you haven't already
|
17
17
|
$ cd jekyll_picture_tag/docs
|
18
18
|
$ direnv allow # (optional)
|
19
19
|
$ bundle install --binstubs # --binstubs is optional.
|
@@ -11,7 +11,7 @@ required by any means.
|
|
11
11
|
### With asdf & direnv:
|
12
12
|
|
13
13
|
```sh
|
14
|
-
$ git clone
|
14
|
+
$ git clone https://github.com/rbuchberger/jekyll_picture_tag.git
|
15
15
|
$ cd jekyll_picture_tag
|
16
16
|
$ direnv allow
|
17
17
|
$ asdf install
|
@@ -21,7 +21,7 @@ $ bundle install --binstubs
|
|
21
21
|
### Without asdf & direnv
|
22
22
|
|
23
23
|
```sh
|
24
|
-
$ git clone
|
24
|
+
$ git clone https://github.com/rbuchberger/jekyll_picture_tag.git
|
25
25
|
$ cd jekyll_picture_tag
|
26
26
|
# Install the correct version of ruby, with the bundler gem.
|
27
27
|
$ bundle install
|
data/docs/index.md
CHANGED
@@ -5,10 +5,10 @@
|
|
5
5
|
|
6
6
|
_Responsive Images, Done Correctly._
|
7
7
|
|
8
|
-
**Warning:** Deploying JPT can be tricky
|
9
|
-
|
10
|
-
|
11
|
-
|
8
|
+
**Warning:** Deploying JPT can be tricky. We depend on system libraries to generate images, whose
|
9
|
+
presence varies greatly between different environments. Before investing a great deal of time,
|
10
|
+
ensure that your deployment process can handle all image formats (both input and output) which you
|
11
|
+
will use.
|
12
12
|
|
13
13
|
**Note:** These docs are for versions >= 2.0. Documentation for the last stable 1.x version may be
|
14
14
|
found by browsing the repository,
|
data/docs/users/deployment.md
CHANGED
@@ -14,6 +14,16 @@ work. Anything which pulls down a git repository and builds it in some container
|
|
14
14
|
extra verification. Often some image formats will be supported, while others will not without
|
15
15
|
installing additional packages.
|
16
16
|
|
17
|
+
I have created a [testing repository](https://github.com/rbuchberger/jpt_tester) for this purpose.
|
18
|
+
It's just a barebones jekyll site with JPT, that tries to generate a bunch of image formats. Feel
|
19
|
+
free to use it for your own test builds.
|
20
|
+
|
21
|
+
```yaml
|
22
|
+
presets:
|
23
|
+
default:
|
24
|
+
formats: [avif, webp, jp2, png, gif, original]
|
25
|
+
```
|
26
|
+
|
17
27
|
## Help Wanted
|
18
28
|
|
19
29
|
We could really use help improving this page's guidance. I've created
|
@@ -23,15 +33,29 @@ you're extra motivated and cool, you could make a pull request adding that infor
|
|
23
33
|
|
24
34
|
## Netlify
|
25
35
|
|
26
|
-
|
27
|
-
support
|
28
|
-
|
36
|
+
Ensure you're using version 2.0.2 or later. No support for `jp2` or `avif` files. They have beta
|
37
|
+
homebrew support (by setting the build command to `brew install whatever && do_your_build`), but
|
38
|
+
attempting to install `libheif` this way runs over the time limit.
|
39
|
+
|
40
|
+
```
|
41
|
+
Libvips known savers: csv, mat, v, vips, ppm, pgm, pbm, pfm, hdr, png, jpg, jpeg, jpe, webp, tif,
|
42
|
+
tiff
|
43
|
+
|
44
|
+
Imagemagick known savers: bzlib, cairo, djvu, fftw, fontconfig, freetype, jbig, jng, jpeg, lcms,
|
45
|
+
lqr, ltdl, lzma, openexr, pangocairo, png, rsvg, tiff, wmf, x, xml, zlib
|
46
|
+
```
|
47
|
+
|
48
|
+
They run an old version of libvips, so cropping attention may not work the same way as it does
|
49
|
+
locally.
|
29
50
|
|
30
51
|
## AWS S3
|
31
52
|
|
32
53
|
This method has a somewhat difficult setup, but once configured it works _very_ well. Since you
|
33
54
|
build the site locally, if your development build works then your production build will work.
|
34
55
|
|
56
|
+
There is one caveat: other than the site root, links need to point to an html file. `/blog` won't
|
57
|
+
work, you need `/blog.html` or `/blog/index.html`. If you know a way to fix this, please speak up!
|
58
|
+
|
35
59
|
[This](https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/) is
|
36
60
|
the guide you want; **specifically the second option** (Using a website endpoint as the origin, with
|
37
61
|
anonymous (public) access allowed). This allows you to have https and excellent performance.
|
@@ -47,3 +71,24 @@ following:
|
|
47
71
|
* deploy: `build && push && invalidate`
|
48
72
|
|
49
73
|
(All of these depend on having the aws cli installed, with proper credentials configured.)
|
74
|
+
|
75
|
+
## AWS Amplify
|
76
|
+
|
77
|
+
[This](https://www.bsmth.de/blog/deploying-jekyll-github-actions-aws-amplify) article may be useful;
|
78
|
+
I haven't gotten it to work with a full set of image formats. The default build image doesn't
|
79
|
+
support jp2 and avif, but Amplify allows you to use a custom build image. If you take the time to
|
80
|
+
create one which can generate jpg, png, webp, jp2, and avif files, it would be marvelous of you to
|
81
|
+
share it.
|
82
|
+
|
83
|
+
## Github Pages
|
84
|
+
|
85
|
+
GitHub Pages only allows a very short whitelist of plugins, which sadly does not include JPT. You could run it locally, then commit and push the generated site to your Pages branch.
|
86
|
+
|
87
|
+
Or use GitHub Actions to do this for you automatically. Here’s [an Actions workflow to build a JPT-enabled site and deploy it](https://gist.github.com/elstudio/38bacfe7aab63da082a418fd3a1ddb66). Commit that yaml file to the `.github/workflows` folder of your source repository, and Actions will build and deploy your site whenever you push changes to `main`.
|
88
|
+
|
89
|
+
See [How to use Jekyll Picture Tag or any Jekyll plugin with GitHub Pages](https://www.elstudio.us/code/use-any-jekyll-plugin-with-github-pages) for details of how it works.
|
90
|
+
|
91
|
+
|
92
|
+
## Cloudflare pages
|
93
|
+
|
94
|
+
They have the same restrictions as netlify: jpg, webp, and png work. jp2 and avif are no-go.
|
data/docs/users/installation.md
CHANGED
@@ -26,9 +26,7 @@ to make things outside the scope of JPT.
|
|
26
26
|
{% endraw %}
|
27
27
|
```
|
28
28
|
|
29
|
-
- `naked_srcset`: Builds a srcset and nothing else (not even the surrounding quotes).
|
30
|
-
(image) `format` setting must still be an array, even if you only give it one
|
31
|
-
value. (This is on the list of things to improve.)
|
29
|
+
- `naked_srcset`: Builds a srcset and nothing else (not even the surrounding quotes).
|
32
30
|
|
33
31
|
```yml
|
34
32
|
# _data/picture.yml
|
@@ -37,7 +35,7 @@ to make things outside the scope of JPT.
|
|
37
35
|
only_srcset:
|
38
36
|
markup: naked_srcset
|
39
37
|
widths: [800, 1200, 1600]
|
40
|
-
|
38
|
+
formats: webp
|
41
39
|
```
|
42
40
|
|
43
41
|
```
|
@@ -7,7 +7,7 @@ sort: 2
|
|
7
7
|
These are analogous to their plain HTML counterparts, but instead of `src`,
|
8
8
|
`srcset`, and `sizes`, you get `data-src`, `data-srcset`, and `data-sizes`. This
|
9
9
|
allows you to use javascript for things like [lazy
|
10
|
-
loading](https://github.com/verlok/lazyload).
|
10
|
+
loading](https://github.com/verlok/vanilla-lazyload).
|
11
11
|
|
12
12
|
- `data_picture`
|
13
13
|
|
@@ -49,9 +49,9 @@ module PictureTag
|
|
49
49
|
|
50
50
|
STOCK_MEDIA_QUERIES = {
|
51
51
|
'jpt-mobile' => 'max-width: 480px',
|
52
|
-
'jpt-tablet' => 'max-width:
|
52
|
+
'jpt-tablet' => 'max-width: 768px',
|
53
53
|
'jpt-laptop' => 'max-width: 1024px',
|
54
|
-
'jpt-desktop' => 'max-width:
|
55
|
-
'jpt-wide' => 'min-width:
|
54
|
+
'jpt-desktop' => 'max-width: 1200px',
|
55
|
+
'jpt-wide' => 'min-width: 1201px'
|
56
56
|
}.freeze
|
57
57
|
end
|
@@ -8,23 +8,25 @@ module PictureTag
|
|
8
8
|
elsif (magick_formats & all_names(format)).any?
|
9
9
|
:magick
|
10
10
|
else
|
11
|
-
raise
|
11
|
+
raise error_string(format)
|
12
12
|
end
|
13
13
|
end
|
14
14
|
|
15
15
|
# Returns array of formats that vips can save to
|
16
16
|
def vips_formats
|
17
|
-
@vips_formats ||= `vips -l
|
18
|
-
.
|
19
|
-
.
|
17
|
+
@vips_formats ||= `vips -l`
|
18
|
+
.split('/n')
|
19
|
+
.select { |line| line.include? 'ForeignSave' }
|
20
|
+
.flat_map { |line| line.scan(/\.[a-z]{1,5}/) }
|
20
21
|
.map { |format| format.strip.delete_prefix('.') }
|
22
|
+
.uniq
|
21
23
|
end
|
22
24
|
|
23
25
|
# Returns an array of formats that imagemagick can handle.
|
24
26
|
def magick_formats
|
25
27
|
@magick_formats ||= `convert -version`
|
26
|
-
.
|
27
|
-
.
|
28
|
+
.scan(/Delegates.*/)
|
29
|
+
.first
|
28
30
|
.delete_prefix('Delegates (built-in):')
|
29
31
|
.split
|
30
32
|
end
|
@@ -38,6 +40,14 @@ module PictureTag
|
|
38
40
|
|
39
41
|
private
|
40
42
|
|
43
|
+
def error_string(format)
|
44
|
+
<<~HEREDOC
|
45
|
+
No support for generating #{format} files in this environment!
|
46
|
+
Libvips known savers: #{vips_formats.join(', ')}
|
47
|
+
Imagemagick known savers: #{magick_formats.join(', ')}
|
48
|
+
HEREDOC
|
49
|
+
end
|
50
|
+
|
41
51
|
def alternates
|
42
52
|
[%w[jpg jpeg], %w[avif heic heif]]
|
43
53
|
end
|
data/readme.md
CHANGED
@@ -1,13 +1,26 @@
|
|
1
|
-
![Logo](docs/logo.svg)
|
2
|
-
|
3
1
|
# Jekyll Picture Tag
|
4
2
|
|
3
|
+
## Help Wanted
|
4
|
+
|
5
|
+
My life just got a lot busier; I'd really like a maintainer or two to help. I'm not abandoning JPT,
|
6
|
+
I just don't have a ton of time to put into hacking on it.
|
7
|
+
|
8
|
+
If you've been learning Ruby and you want to move beyond tutorials and throwaway projects, I'd love
|
9
|
+
to hear from you. I'd be happy to help you gain experience and credibility, if you're willing to
|
10
|
+
help me maintain this project!
|
11
|
+
|
12
|
+
If you're interested, contact me: robert@buchberger.cc
|
13
|
+
|
14
|
+
![Logo](docs/logo.svg)
|
15
|
+
|
5
16
|
![Tests & Formatting](https://github.com/rbuchberger/jekyll_picture_tag/workflows/Tests%20&%20Formatting/badge.svg)
|
6
17
|
|
7
18
|
**Responsive Images done correctly.**
|
8
19
|
|
9
20
|
It's simple to throw a photo on a page and call it a day, but doing justice to users on all
|
10
|
-
different browsers and devices is tedious and tricky. Tedious, tricky things should be automated.
|
21
|
+
different browsers and devices is tedious and tricky. Tedious, tricky things should be automated.
|
22
|
+
[This blog post further elaborates on that theme.](https://robert-buchberger.com/blog/2021/responsive_images.html)
|
23
|
+
|
11
24
|
|
12
25
|
Jekyll Picture Tag automatically builds cropped, resized, and reformatted images, builds several
|
13
26
|
kinds of markup, offers extensive configuration while requiring none, and solves both the art
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jekyll_picture_tag
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.0.
|
4
|
+
version: 2.0.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Robert Wierzbowski
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date:
|
13
|
+
date: 2022-08-16 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: addressable
|
@@ -334,7 +334,6 @@ files:
|
|
334
334
|
- docs/users/liquid_tag/examples.md
|
335
335
|
- docs/users/liquid_tag/index.md
|
336
336
|
- docs/users/notes/git_lfs.md
|
337
|
-
- docs/users/notes/github_pages.md
|
338
337
|
- docs/users/notes/html_attributes.md
|
339
338
|
- docs/users/notes/index.md
|
340
339
|
- docs/users/notes/kramdown_bug.md
|
@@ -431,7 +430,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
431
430
|
version: '0'
|
432
431
|
requirements:
|
433
432
|
- libvips
|
434
|
-
rubygems_version: 3.
|
433
|
+
rubygems_version: 3.3.20
|
435
434
|
signing_key:
|
436
435
|
specification_version: 4
|
437
436
|
summary: Easy responsive images for Jekyll.
|
@@ -1,5 +0,0 @@
|
|
1
|
-
# Github Pages?
|
2
|
-
|
3
|
-
Github Pages only allows a very short whitelist of plugins, which sadly does not include JPT. You
|
4
|
-
can either run it locally, then commit and push the generated files (rather than the source
|
5
|
-
files), or just host it some other way. I recommend Netlify.
|