imgix-rails 3.1.0 → 4.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/.github/CODEOWNERS +2 -0
- data/.github/ISSUE_TEMPLATE/bug_report.md +28 -0
- data/.github/ISSUE_TEMPLATE/feature_request.md +27 -0
- data/.github/ISSUE_TEMPLATE/question.md +17 -0
- data/.github/pull_request_template.md +73 -0
- data/.travis.yml +3 -0
- data/CHANGELOG.md +52 -4
- data/README.md +160 -70
- data/imgix-rails.gemspec +8 -2
- data/lib/imgix/rails.rb +0 -1
- data/lib/imgix/rails/image_tag.rb +22 -3
- data/lib/imgix/rails/picture_tag.rb +17 -10
- data/lib/imgix/rails/tag.rb +13 -65
- data/lib/imgix/rails/url_helper.rb +47 -20
- data/lib/imgix/rails/version.rb +1 -1
- data/lib/imgix/rails/view_helper.rb +4 -4
- metadata +16 -14
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 88a3092191fe9ded77bf15aa47ab9dece604fe75b68da6066d1d26623b792885
|
|
4
|
+
data.tar.gz: ff00a1456055f474ac7bbde0e5174a33f21dfe8410e313f5add68308c31d1537
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0f8b5d87b939ad76463cf2dcdfed8a21dbf57abce525f7f5cbcacb9dcfb7dcd254198fc6a2537ca54220661095bec81784990bda59f7eec23c45bd23e034673a
|
|
7
|
+
data.tar.gz: d9d499115d9bd1173f5bf5c1bb54c9d2645caf4ea87e332a50dab64dab0786ff29bf63379b5c4700c9e360027053e4ea3176fd13196227fb48dbce03d7164f95
|
data/.github/CODEOWNERS
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Bug report
|
|
3
|
+
about: Create a report to help us improve
|
|
4
|
+
title: ''
|
|
5
|
+
labels: bug
|
|
6
|
+
assignees: ''
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.
|
|
11
|
+
|
|
12
|
+
**Describe the bug**
|
|
13
|
+
A clear and concise description of what the bug is.
|
|
14
|
+
|
|
15
|
+
**To Reproduce**
|
|
16
|
+
Steps to reproduce the behavior:
|
|
17
|
+
|
|
18
|
+
**Expected behavior**
|
|
19
|
+
A clear and concise description of what you expected to happen.
|
|
20
|
+
|
|
21
|
+
**Screenshots**
|
|
22
|
+
If applicable, add screenshots to help explain your problem.
|
|
23
|
+
|
|
24
|
+
**Information:**
|
|
25
|
+
- imgix-rails version: [e.g. 4.0.0]
|
|
26
|
+
|
|
27
|
+
**Additional context**
|
|
28
|
+
Add any other context about the problem here.
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Feature request
|
|
3
|
+
about: Suggest an idea for this project
|
|
4
|
+
title: ''
|
|
5
|
+
labels: ''
|
|
6
|
+
assignees: ''
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.
|
|
11
|
+
|
|
12
|
+
**Before you submit:**
|
|
13
|
+
|
|
14
|
+
- [ ] Please search through the [existing issues](https://github.com/imgix/imgix-rails/issues?utf8=%E2%9C%93&q=is%3Aissue) to see if your feature has already been discussed.
|
|
15
|
+
- [ ] Please take a moment to find out whether your idea fits with the scope and aims of this project.
|
|
16
|
+
|
|
17
|
+
**Is your feature request related to a problem? Please describe.**
|
|
18
|
+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
|
19
|
+
|
|
20
|
+
**Describe the solution you'd like**
|
|
21
|
+
A clear and concise description of what you want to happen.
|
|
22
|
+
|
|
23
|
+
**Describe alternatives you've considered**
|
|
24
|
+
A clear and concise description of any alternative solutions or features you've considered.
|
|
25
|
+
|
|
26
|
+
**Additional context**
|
|
27
|
+
Add any other context or screenshots about the feature request here.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Question
|
|
3
|
+
about: Ask a question about the project
|
|
4
|
+
title: ''
|
|
5
|
+
labels: ''
|
|
6
|
+
assignees: ''
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.
|
|
11
|
+
|
|
12
|
+
**Before you submit:**
|
|
13
|
+
|
|
14
|
+
- [ ] Please search through the [existing issues](https://github.com/imgix/imgix-rails/issues?utf8=%E2%9C%93&q=is%3Aissue) to see if your question has already been discussed.
|
|
15
|
+
|
|
16
|
+
**Question**
|
|
17
|
+
A clear and concise description of your question.
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Hello, and thanks for contributing to imgix-rails! 🎉🙌
|
|
3
|
+
Please take a second to fill out PRs with the following template!
|
|
4
|
+
-->
|
|
5
|
+
|
|
6
|
+
# Description
|
|
7
|
+
|
|
8
|
+
<!-- What is accomplished by this PR? If there is something potentially controversial in your PR, please take a moment to tell us about your choices. -->
|
|
9
|
+
|
|
10
|
+
<!--
|
|
11
|
+
Please use the checklist that is most closely related to your PR, and delete the other checklists. -->
|
|
12
|
+
|
|
13
|
+
## Checklist: Fixing typos/Doc change
|
|
14
|
+
|
|
15
|
+
- [ ] Each commit follows the [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/#summary) format: e.g. `chore(readme): fixed typo`. See the end of this file for more information.
|
|
16
|
+
|
|
17
|
+
## Checklist: Bug Fix
|
|
18
|
+
|
|
19
|
+
- [ ] Each commit follows the [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/#summary) format: e.g. `chore(readme): fixed typo`. See the end of this file for more information.
|
|
20
|
+
- [ ] All existing unit tests are still passing (if applicable)
|
|
21
|
+
- [ ] Add new passing unit tests to cover the code introduced by your PR
|
|
22
|
+
- [ ] Update the readme
|
|
23
|
+
- [ ] Update or add any necessary API documentation
|
|
24
|
+
- [ ] Add some [steps](#steps-to-test) so we can test your bug fix
|
|
25
|
+
|
|
26
|
+
## Checklist: New Feature
|
|
27
|
+
|
|
28
|
+
- [ ] Each commit follows the [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/#summary) format: e.g. `chore(readme): fixed typo`. See the end of this file for more information.
|
|
29
|
+
- [ ] Any breaking changes are specified on the commit on which they are introduced with `BREAKING CHANGE` in the body of the commit.
|
|
30
|
+
- [ ] If this is a big feature with breaking changes, consider [opening an issue](https://github.com/imgix/imgix-rails/issues/new?assignees=&labels=&template=feature_request.md&title=) to discuss first. This is completely up to you, but please keep in mind that your PR might not be accepted.
|
|
31
|
+
- [ ] Run unit tests to ensure all existing tests are still passing
|
|
32
|
+
- [ ] Add new passing unit tests to cover the code introduced by your PR
|
|
33
|
+
- [ ] Update the readme
|
|
34
|
+
- [ ] Add some [steps](#steps-to-test) so we can test your cool new feature!
|
|
35
|
+
|
|
36
|
+
## Steps to Test
|
|
37
|
+
|
|
38
|
+
<!-- Delete this selction if you are just submitting a doc change/small fix -->
|
|
39
|
+
|
|
40
|
+
<!-- A code example or a set of steps is preferred -->
|
|
41
|
+
|
|
42
|
+
Related issue: [e.g. #42]
|
|
43
|
+
|
|
44
|
+
Code:
|
|
45
|
+
|
|
46
|
+
```rb
|
|
47
|
+
# A standalone example of what the PR solves
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
<!-- A link to a codepen/codesandbox is also an option. -->
|
|
51
|
+
|
|
52
|
+
<!--
|
|
53
|
+
|
|
54
|
+
## Conventional Commit Spec
|
|
55
|
+
|
|
56
|
+
PR titles should be in the format `<type>(<scope>): <description>`. For example: `chore(readme): fix typo`
|
|
57
|
+
|
|
58
|
+
`type` can be any of the follow:
|
|
59
|
+
- `feat`: a feature, or breaking change
|
|
60
|
+
- `fix`: a bug-fix
|
|
61
|
+
- `test`: Adding missing tests or correcting existing tests
|
|
62
|
+
- `docs`: documentation only changes (readme, changelog, contributing guide)
|
|
63
|
+
- `refactor`: a code change that neither fixes a bug nor adds a feature
|
|
64
|
+
- `chore`: reoccurring tasks for project maintainability (example scopes: release, deps)
|
|
65
|
+
- `config`: changes to tooling configurations used in the project
|
|
66
|
+
- `build`: changes that affect the build system or external dependencies (example scopes: npm, bundler, gradle)
|
|
67
|
+
- `ci`: changes to CI configuration files and scripts (example scopes: travis)
|
|
68
|
+
- `perf`: a code change that improves performance
|
|
69
|
+
- `style`: changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
|
|
70
|
+
|
|
71
|
+
`scope` is optional, and can be anything.
|
|
72
|
+
`description` should be a short description of the change, written in the imperative-mood.
|
|
73
|
+
-->
|
data/.travis.yml
CHANGED
data/CHANGELOG.md
CHANGED
|
@@ -3,9 +3,57 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
This project adheres to [Semantic Versioning](http://semver.org/).
|
|
5
5
|
|
|
6
|
+
## [4.2.0](https://github.com/imgix/imgix-rb/compare/4.1.0...4.2.0) - January 05, 2021
|
|
7
|
+
|
|
8
|
+
- Add support for lazy image loading ([#108](https://github.com/imgix/imgix-rails/pull/108))
|
|
9
|
+
|
|
10
|
+
## [4.1.0](https://github.com/imgix/imgix-rb/compare/4.0.2...4.1.0) - October 13, 2020
|
|
11
|
+
|
|
12
|
+
### Release Notes
|
|
13
|
+
|
|
14
|
+
Version 4.1.0 has been released! The goal of this release is to offer flexibility to those using imgix-rb's purger capabilities through imgix-rails.
|
|
15
|
+
|
|
16
|
+
Prior to this release, this gem offered purging capability through `imgix '~> 3.0'`. However, that purging capability has been deprecated in favor of the new-style purging API––available now in [imgix-rb v4.0.0](https://github.com/imgix/imgix-rb/releases/tag/4.0.0).
|
|
17
|
+
|
|
18
|
+
To upgrade to the new purging API used in `imgix '~> 4.0'`:
|
|
19
|
+
|
|
20
|
+
- navigate to the [API Keys](https://dashboard.imgix.com/api-keys) portion of your dashboard
|
|
21
|
+
- generate a new API Key
|
|
22
|
+
- use this new key in your imgix client: `Imgix::Client.new(domain: '...', api_key: NEW_API_KEY)`
|
|
23
|
+
|
|
24
|
+
### Changes
|
|
25
|
+
|
|
26
|
+
- build: use optimistic constraint for imgix >= 3.0 ([#104](https://github.com/imgix/imgix-rails/pull/104))
|
|
27
|
+
|
|
28
|
+
## [4.0.2](https://github.com/imgix/imgix-rb/compare/4.0.1...4.0.2) - July 31, 2020
|
|
29
|
+
|
|
30
|
+
- fix: replace `opts[:host`] with `opts[:domain]` to resolve deprecation warnings ([#96](https://github.com/imgix/imgix-rails/pull/96))
|
|
31
|
+
|
|
32
|
+
## [4.0.1](https://github.com/imgix/imgix-rb/compare/4.0.0...4.0.1) - June 10, 2020
|
|
33
|
+
|
|
34
|
+
- fix: update rake version ([#94](https://github.com/imgix/imgix-rails/pull/94))
|
|
35
|
+
|
|
36
|
+
## [4.0.0](https://github.com/imgix/imgix-rb/compare/3.1.0...4.0.0) - December 03, 2019
|
|
37
|
+
|
|
38
|
+
The v4.0.0 release of imgix-rails introduces a variety of improvements relating to how this gem handles and generates `srcset` attributes. However, in releasing this version there are some significant interface/behavioral changes that users need to be aware of. Users should note that the `min_width` and `max_width` fields (passed via `tag_options`), as well as the `widths` field, have all been moved to their own encompassing `srcset_options` field. This is done with the intention of providing a more organized and intuitive experience when fine-tuning how `srcset` width pairs are generated. See the following example demonstrating this new pattern:
|
|
39
|
+
|
|
40
|
+
```erb
|
|
41
|
+
<%= ix_image_tag('/unsplash/hotairballoon.jpg',
|
|
42
|
+
srcset_options: { min_width: 1000, max_width: 2500},
|
|
43
|
+
tag_options: { alt: 'A hot air balloon on a sunny day' }) %>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
For users migrating to version 4.0 or later, it is important that all srcset-related modifiers be passed via `srcset_options`, as doing so through `tag_options` or `widths` directly will result in errors. For more details on these modifiers, please see the [ix_image_tag](https://github.com/imgix/imgix-rails#ix_image_tag) or [ix_picture_tag](https://github.com/imgix/imgix-rails#ix_picture_tag) sections.
|
|
47
|
+
|
|
48
|
+
In addition to these changes, imgix-rails is now capable of producing [fixed-image srcsets](https://github.com/imgix/imgix-rb#fixed-image-rendering). Users should note that when certain dimension information is provided, imgix-rails will produce a `srcset` at different screen resolutions rather than the typical width pairs. This feature provides expanded functionality to cover more `srcset` use cases that users can take advantage of. We are always happy to provide our users with more tools to assist them in their efforts to build out responsive images on the web.
|
|
49
|
+
|
|
50
|
+
- feat: utilize Imgix::Path#to_srcset when constructing srcsets ([#83](https://github.com/imgix/imgix-rails/pull/83))
|
|
51
|
+
- chore: remove deprecated domain sharding behavior ([#80](https://github.com/imgix/imgix-rails/pull/80))
|
|
52
|
+
- fix: deprecate resizing height when maintaining aspect ratio ([#78](https://github.com/imgix/imgix-rails/pull/78))
|
|
53
|
+
|
|
6
54
|
## [3.1.0](https://github.com/imgix/imgix-rb/compare/3.0.2...3.1.0) - October 25, 2019
|
|
7
55
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
56
|
+
- Update bundler dev dependency to include new major version 2.x ([#71](https://github.com/imgix/imgix-rb/pull/71))
|
|
57
|
+
- README: Fix typo ([#73](https://github.com/imgix/imgix-rb/pull/73))
|
|
58
|
+
- docs: add ActiveStorage instructions to README ([#74](https://github.com/imgix/imgix-rb/pull/74))
|
|
59
|
+
- chore(deprecate): emit warning when generating srcsets ([ccc906b](https://github.com/imgix/imgix-rails/commit/ccc906be749945f6f843b5eeb04ab03a292ccbfb)) ([e2ffc2b](https://github.com/imgix/imgix-rails/commit/e2ffc2b4f847c15ea73fa161b673885e704e4cf2))
|
data/README.md
CHANGED
|
@@ -1,53 +1,62 @@
|
|
|
1
|
-
|
|
1
|
+
<!-- ix-docs-ignore -->
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
`imgix-rails` is a gem for integrating [imgix](https://www.imgix.com/) into Ruby on Rails applications. It builds on [imgix-rb](https://github.com/imgix/imgix-rb) to offer a few Rails-specific interfaces.
|
|
5
|
+
|
|
6
|
+
[](https://rubygems.org/gems/imgix-rails)
|
|
7
|
+
[](https://travis-ci.com/imgix/imgix-rails)
|
|
8
|
+
|
|
9
|
+
[](https://github.com/imgix/imgix-rails/blob/main/LICENSE)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
<!-- /ix-docs-ignore -->
|
|
13
|
+
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Usage](#usage)
|
|
16
|
+
- [Configuration](#configuration)
|
|
17
|
+
- [Multi-source configuration](#multi-source-configuration)
|
|
18
|
+
- [`ix_image_tag`](#iximagetag)
|
|
19
|
+
- [Fixed image rendering](#fixed-image-rendering)
|
|
20
|
+
- [Lazy Loading](#lazy-loading)
|
|
21
|
+
- [`ix_picture_tag`](#ixpicturetag)
|
|
22
|
+
- [`ix_image_url`](#iximageurl)
|
|
23
|
+
- [Usage in Model](#usage-in-model)
|
|
24
|
+
- [Usage in Sprockets](#usage-in-sprockets)
|
|
25
|
+
- [Using With Image Uploading Libraries](#using-with-image-uploading-libraries)
|
|
26
|
+
- [Paperclip and CarrierWave](#paperclip-and-carrierwave)
|
|
27
|
+
- [Refile](#refile)
|
|
28
|
+
- [Active Storage](#active-storage)
|
|
29
|
+
- [S3](#s3)
|
|
30
|
+
- [GCS](#gcs)
|
|
31
|
+
- [Upgrade Guides](#upgrade-guides)
|
|
32
|
+
- [3.x to 4.0](#3x-to-40)
|
|
33
|
+
- [Development](#development)
|
|
34
|
+
- [Contributing](#contributing)
|
|
35
|
+
- [Code of Conduct](#code-of-conduct)
|
|
2
36
|
|
|
3
|
-
# imgix-rails [](https://travis-ci.org/imgix/imgix-rails)
|
|
4
|
-
|
|
5
|
-
`imgix-rails` is a gem designed to make integrating imgix into your Rails app easier. It builds on [imgix-rb](https://github.com/imgix/imgix-rb) to offer a few Rails-specific interfaces.
|
|
6
|
-
|
|
7
|
-
imgix is a real-time image processing service and CDN. It allows you to manipulate images merely by changing their URL parameters. For a full list of URL parameters, please see the [imgix URL API documentation](https://www.imgix.com/docs/reference).
|
|
8
|
-
|
|
9
|
-
We recommend using something like [Paperclip](https://github.com/thoughtbot/paperclip), [Refile](https://github.com/refile/refile), [Carrierwave](https://github.com/carrierwaveuploader/carrierwave), or [s3_direct_upload](https://github.com/waynehoover/s3_direct_upload) to handle uploads. After they've been uploaded, you can then serve them using this gem.
|
|
10
|
-
|
|
11
|
-
* [Installation](#installation)
|
|
12
|
-
* [Usage](#usage)
|
|
13
|
-
* [Configuration](#configuration)
|
|
14
|
-
* [ix_image_tag](#ix_image_tag)
|
|
15
|
-
* [ix_picture_tag](#ix_picture_tag)
|
|
16
|
-
* [ix_image_url](#ix_image_url)
|
|
17
|
-
* [Usage in Sprockets](#usage-in-sprockets)
|
|
18
|
-
* [Using With Image Uploading Libraries](#using-with-image-uploading-libraries)
|
|
19
|
-
* [Paperclip and CarrierWave](#paperclip-and-carrierwave)
|
|
20
|
-
* [Refile](#refile)
|
|
21
|
-
* [Active Storage](#activestorage)
|
|
22
|
-
* [Development](#development)
|
|
23
|
-
* [Contributing](#contributing)
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<a name="installation"></a>
|
|
27
37
|
## Installation
|
|
28
38
|
|
|
29
39
|
Add this line to your application's Gemfile:
|
|
30
40
|
|
|
31
|
-
```
|
|
41
|
+
```rb
|
|
32
42
|
gem 'imgix-rails'
|
|
33
43
|
```
|
|
34
44
|
|
|
35
45
|
And then execute:
|
|
36
46
|
|
|
37
|
-
|
|
38
|
-
|
|
47
|
+
```bash
|
|
48
|
+
$ bundle
|
|
49
|
+
```
|
|
39
50
|
|
|
40
|
-
<a name="usage"></a>
|
|
41
51
|
## Usage
|
|
42
52
|
|
|
43
53
|
imgix-rails provides a few different hooks to work with your existing Rails application. All current methods are drop-in replacements for the `image_tag` helper.
|
|
44
54
|
|
|
45
|
-
<a name="configuration"></a>
|
|
46
55
|
### Configuration
|
|
47
56
|
|
|
48
57
|
Before you get started, you will need to define your imgix configuration in your `config/application.rb`, or in an environment-specific configuration file.
|
|
49
58
|
|
|
50
|
-
```
|
|
59
|
+
```rb
|
|
51
60
|
Rails.application.configure do
|
|
52
61
|
config.imgix = {
|
|
53
62
|
source: "assets.imgix.net"
|
|
@@ -57,22 +66,22 @@ end
|
|
|
57
66
|
|
|
58
67
|
The following configuration flags will be respected:
|
|
59
68
|
|
|
60
|
-
- `:
|
|
61
|
-
- `:
|
|
62
|
-
- `:
|
|
63
|
-
- `:
|
|
64
|
-
- `:
|
|
69
|
+
- `use_https`: toggles the use of HTTPS. Defaults to `true`
|
|
70
|
+
- `source`: a String or Array that specifies the imgix Source address. Should be in the form of `"assets.imgix.net"`.
|
|
71
|
+
- `srcset_width_tolerance`: an optional numeric value determining the maximum tolerance allowable, between the downloaded dimensions and rendered dimensions of the image (default `0.08` i.e. `8%`).
|
|
72
|
+
- `secure_url_token`: an optional secure URL token found in your dashboard (https://dashboard.imgix.com) used for signing requests
|
|
73
|
+
- `include_library_param`: toggles the inclusion of the [`ixlib` parameter](https://github.com/imgix/imgix-rb#what-is-the-ixlib-param-on-every-request). Defaults to `true`.
|
|
65
74
|
|
|
66
75
|
#### Multi-source configuration
|
|
67
76
|
|
|
68
77
|
In addition to the standard configuration flags, the following options can be used for multi-source support.
|
|
69
78
|
|
|
70
|
-
- `:
|
|
71
|
-
- `:
|
|
79
|
+
- `sources`: a Hash of imgix source-secure_url_token key-value pairs. If the value for a source is `nil`, URLs generated for the corresponding source won't be secured. `sources` and `source` *cannot* be used together.
|
|
80
|
+
- `default_source`: optionally specify a default source for generating URLs.
|
|
72
81
|
|
|
73
82
|
Example:
|
|
74
83
|
|
|
75
|
-
```
|
|
84
|
+
```rb
|
|
76
85
|
Rails.application.configure do
|
|
77
86
|
config.imgix = {
|
|
78
87
|
sources: {
|
|
@@ -84,19 +93,25 @@ Rails.application.configure do
|
|
|
84
93
|
end
|
|
85
94
|
```
|
|
86
95
|
|
|
87
|
-
|
|
88
|
-
### ix_image_tag
|
|
96
|
+
### `ix_image_tag`
|
|
89
97
|
|
|
90
|
-
The `ix_image_tag` helper method makes it easy to pass parameters to imgix to handle resizing, cropping, etc. It also simplifies adding responsive imagery to your Rails app by automatically generating a `srcset` based on the parameters you pass. We talk a bit about using the `srcset` attribute in an application in the following blog post: [“Responsive Images with `srcset` and imgix.”](https://
|
|
98
|
+
The `ix_image_tag` helper method makes it easy to pass parameters to imgix to handle resizing, cropping, etc. It also simplifies adding responsive imagery to your Rails app by automatically generating a `srcset` based on the parameters you pass. We talk a bit about using the `srcset` attribute in an application in the following blog post: [“Responsive Images with `srcset` and imgix.”](https://docs.imgix.com/tutorials/responsive-images-srcset-imgix?_ga=utm_medium=referral&utm_source=sdk&utm_campaign=rails-readme).
|
|
91
99
|
|
|
92
|
-
`ix_image_tag` generates `<img>` tags with a filled-out `srcset` attribute that leans on imgix to do the hard work.
|
|
100
|
+
`ix_image_tag` generates `<img>` tags with a filled-out `srcset` attribute that leans on [imgix-rb](https://github.com/imgix/imgix-rb) to do the hard work. It also makes a variety of options available for customizing how the `srcset` is generated. For example, if you already know the minimum or maximum number of physical pixels that this image will need to be displayed at, you can pass the `min_width` and/or `max_width` options. This will result in a smaller, more tailored `srcset`.
|
|
93
101
|
|
|
94
102
|
`ix_image_tag` takes the following arguments:
|
|
95
103
|
|
|
96
|
-
* `source`:
|
|
104
|
+
* `source`: An optional String indicating the source to be used. If unspecified `:source` or `:default_source` will be used. If specified, the value must be defined in the config.
|
|
97
105
|
* `path`: The path or URL of the image to display.
|
|
98
|
-
* `tag_options`:
|
|
106
|
+
* `tag_options`: HTML attributes to apply to the generated `img` element. This is useful for adding class names, alt tags, etc.
|
|
99
107
|
* `url_params`: The imgix URL parameters to apply to this image. These will be applied to each URL in the `srcset` attribute, as well as the fallback `src` attribute.
|
|
108
|
+
* `srcset_options`: A variety of options that allow for fine tuning `srcset` generation. More information on each of these modifiers can be found in the [imgix-rb documentation](https://github.com/imgix/imgix-rb#srcset-generation). Any of the following can be passed as arguments:
|
|
109
|
+
* [`widths`](https://github.com/imgix/imgix-rb#custom-widths): An array of exact widths that `srcset` pairs will be generated with.
|
|
110
|
+
* [`min_width`](https://github.com/imgix/imgix-rb#minimum-and-maximum-width-ranges): The minimum width that `srcset` pairs will be generated with. Will be ignored if `widths` are provided.
|
|
111
|
+
* [`max_width`](https://github.com/imgix/imgix-rb#minimum-and-maximum-width-ranges): The maximum width that `srcset` pairs will be generated with. Will be ignored if `widths` are provided.
|
|
112
|
+
* [`disable_variable_quality`](https://github.com/imgix/imgix-rb#variable-qualities): Pass `true` to disable variable quality parameters when generating a `srcset` ([fixed-images only](https://github.com/imgix/imgix-rails#fixed-image-rendering)). In addition, imgix-rails will respect an overriding `q` (quality) parameter if one is provided through `url_params`.
|
|
113
|
+
* `attribute_options`: Allow you to change where imgix-rails renders
|
|
114
|
+
attributes. This can be helpful if you want to add lazy-loading.
|
|
100
115
|
|
|
101
116
|
```erb
|
|
102
117
|
<%= ix_image_tag('/unsplash/hotairballoon.jpg', url_params: { w: 300, h: 500, fit: 'crop', crop: 'right'}, tag_options: { alt: 'A hot air balloon on a sunny day' }) %>
|
|
@@ -128,7 +143,7 @@ Will generate URLs using `assets2.imgix.net` source.
|
|
|
128
143
|
|
|
129
144
|
We recommend leveraging this to generate powerful helpers within your application like the following:
|
|
130
145
|
|
|
131
|
-
```
|
|
146
|
+
```rb
|
|
132
147
|
def profile_image_tag(user)
|
|
133
148
|
ix_image_tag(user.profile_image_url, url_params: { w: 100, h: 200, fit: 'crop' })
|
|
134
149
|
end
|
|
@@ -143,12 +158,53 @@ Then rendering the portrait in your application is very easy:
|
|
|
143
158
|
If you already know all the exact widths you need images for, you can specify that by passing the `widths` option as an array. In this case, imgix-rails will only generate `srcset` pairs for the specified `widths`.
|
|
144
159
|
|
|
145
160
|
```erb
|
|
146
|
-
<%= ix_image_tag('/unsplash/hotairballoon.jpg', widths: [320, 640, 960, 1280]
|
|
161
|
+
<%= ix_image_tag('/unsplash/hotairballoon.jpg', srcset_options: { widths: [320, 640, 960, 1280] }, tag_options: { alt: 'A hot air balloon on a sunny day' }) %>
|
|
147
162
|
```
|
|
148
163
|
|
|
164
|
+
#### Fixed image rendering
|
|
165
|
+
|
|
166
|
+
In cases where enough information is provided about an image's dimensions, `ix_image_tag` will instead build a `srcset` that will allow for an image to be served at different resolutions. The parameters taken into consideration when determining if an image is fixed-width are `w`, `h`, and `ar`. By invoking `ix_image_tag` with either a width or the height and aspect ratio (along with `fit=crop`, typically) provided, a different srcset will be generated for a fixed-size image instead.
|
|
167
|
+
|
|
168
|
+
```erb
|
|
169
|
+
<%= ix_image_tag('/unsplash/hotairballoon.jpg', url_params: {w: 1000}) %>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Will render the following HTML:
|
|
173
|
+
|
|
174
|
+
```html
|
|
175
|
+
<img srcset="https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=1&q=75 1x,
|
|
176
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=2&q=50 2x,
|
|
177
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=3&q=35 3x,
|
|
178
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=4&q=23 4x,
|
|
179
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=5&q=20 5x" sizes="100vw" src="https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000">
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Fixed image rendering will automatically append a variable `q` parameter mapped to each `dpr` parameter when generating a `srcset`. This technique is commonly used to compensate for the increased filesize of high-DPR images. Since high-DPR images are displayed at a higher pixel density on devices, image quality can be lowered to reduce overall filesize without sacrificing perceived visual quality. For more information and examples of this technique in action, see [this blog post](https://blog.imgix.com/2016/03/30/dpr-quality?_ga=utm_medium=referral&utm_source=sdk&utm_campaign=rails-readme). This behavior will respect any overriding `q` value passed in via `url_params` and can be disabled altogether with `srcset_options: { disable_variable_quality: true }`.
|
|
183
|
+
|
|
184
|
+
#### Lazy loading
|
|
185
|
+
|
|
186
|
+
If you'd like to lazy load images, we recommend using [lazysizes](https://github.com/aFarkas/lazysizes). In order to use imgix-rails with lazysizes, you need to use `attribute_options` as well as set `tag_options[:src]`:
|
|
187
|
+
|
|
188
|
+
```erb
|
|
189
|
+
<%= ix_image_tag('image.jpg', attribute_options: {src: "data-src",
|
|
190
|
+
srcset: "data-srcset", sizes: "data-sizes"}, url_params: {w: 1000},
|
|
191
|
+
tag_options: {src: "lqip.jpg"}) %>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
Will render the following HTML:
|
|
195
|
+
|
|
196
|
+
```html
|
|
197
|
+
<img data-srcset="https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=1&q=75 1x,
|
|
198
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=2&q=50 2x,
|
|
199
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=3&q=35 3x,
|
|
200
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=4&q=23 4x,
|
|
201
|
+
https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000&dpr=5&q=20 5x"
|
|
202
|
+
data-sizes="100vw"
|
|
203
|
+
data-src="https://assets.imgix.net/image.jpg?ixlib=rails-3.0.2&w=1000"
|
|
204
|
+
src="lqip.jpg">
|
|
205
|
+
```
|
|
149
206
|
|
|
150
|
-
|
|
151
|
-
### ix_picture_tag
|
|
207
|
+
### `ix_picture_tag`
|
|
152
208
|
|
|
153
209
|
The `ix_picture_tag` helper method makes it easy to generate `picture` elements in your Rails app. `picture` elements are useful when an images needs to be art directed differently at different screen sizes.
|
|
154
210
|
|
|
@@ -159,6 +215,11 @@ The `ix_picture_tag` helper method makes it easy to generate `picture` elements
|
|
|
159
215
|
* `tag_options`: Any options to apply to the parent `picture` element. This is useful for adding class names, etc.
|
|
160
216
|
* `url_params`: Default imgix options. These will be used to generate a fallback `img` tag for older browsers, and used in each `source` unless overridden by `breakpoints`.
|
|
161
217
|
* `breakpoints`: A hash describing the variants. Each key must be a media query (e.g. `(max-width: 880px)`), and each value must be a hash of parameter overrides for that media query. A `source` element will be generated for each breakpoint specified.
|
|
218
|
+
* `srcset_options`: A variety of options that allow for fine tuning `srcset` generation. More information on each of these modifiers can be found in the [imgix-rb documentation](https://github.com/imgix/imgix-rb#srcset-generation). Any of the following can be passed as arguments:
|
|
219
|
+
* [`widths`](https://github.com/imgix/imgix-rb#custom-widths): An array of exact widths that `srcset` pairs will be generated with.
|
|
220
|
+
* [`min_width`](https://github.com/imgix/imgix-rb#minimum-and-maximum-width-ranges): The minimum width that `srcset` pairs will be generated with. Will be ignored if `widths` are provided.
|
|
221
|
+
* [`max_width`](https://github.com/imgix/imgix-rb#minimum-and-maximum-width-ranges): The maximum width that `srcset` pairs will be generated with. Will be ignored if `widths` are provided.
|
|
222
|
+
* [`disable_variable_quality`](https://github.com/imgix/imgix-rb#variable-qualities): Pass `true` to disable variable quality parameters when generating a `srcset` ([fixed-images only](https://github.com/imgix/imgix-rails#fixed-image-rendering)). In addition, imgix-rails will respect an overriding `q` (quality) parameter if one is provided through `url_params`.
|
|
162
223
|
|
|
163
224
|
```erb
|
|
164
225
|
<%= ix_picture_tag('bertandernie.jpg',
|
|
@@ -214,12 +275,11 @@ To generate a `picture` element on a different source:
|
|
|
214
275
|
) %>
|
|
215
276
|
```
|
|
216
277
|
|
|
217
|
-
|
|
218
|
-
### ix_image_url
|
|
278
|
+
### `ix_image_url`
|
|
219
279
|
|
|
220
280
|
The `ix_image_url` helper makes it easy to generate a URL to an image in your Rails app.
|
|
221
281
|
|
|
222
|
-
`ix_image_url` takes
|
|
282
|
+
`ix_image_url` takes three arguments:
|
|
223
283
|
|
|
224
284
|
* `source`: an optional String indicating the source to be used. If unspecified `:source` or `:default_source` will be used. If specified, the value must be defined in the config.
|
|
225
285
|
* `path`: The path or URL of the image to display.
|
|
@@ -237,16 +297,19 @@ https://assets.imgix.net/users/1/avatar.png?w=400&h=300
|
|
|
237
297
|
https://assets2.imgix.net/users/1/avatar.png?w=400&h=300
|
|
238
298
|
```
|
|
239
299
|
|
|
300
|
+
#### Usage in Model
|
|
301
|
+
|
|
240
302
|
Since `ix_image_url` lives inside `UrlHelper`, it can also be used in places other than your views quite easily. This is useful for things such as including imgix URLs in JSON output from a serializer class.
|
|
241
303
|
|
|
242
|
-
```
|
|
304
|
+
```rb
|
|
243
305
|
include Imgix::Rails::UrlHelper
|
|
244
306
|
|
|
245
307
|
puts ix_image_url('/users/1/avatar.png', { w: 400, h: 300 })
|
|
246
308
|
# => https://assets.imgix.net/users/1/avatar.png?w=400&h=300
|
|
247
309
|
```
|
|
248
310
|
|
|
249
|
-
|
|
311
|
+
Alternatively, you can also use the imgix [Ruby client](https://github.com/imgix/imgix-rb) in the same way.
|
|
312
|
+
|
|
250
313
|
#### Usage in Sprockets
|
|
251
314
|
|
|
252
315
|
`ix_image_url` is also pulled in as a Sprockets helper, so you can generate imgix URLs in your asset pipeline files. For example, here's how it would work inside an `.scss.erb` file:
|
|
@@ -257,13 +320,10 @@ puts ix_image_url('/users/1/avatar.png', { w: 400, h: 300 })
|
|
|
257
320
|
}
|
|
258
321
|
```
|
|
259
322
|
|
|
260
|
-
<a name="using-with-image-uploading-libraries"></a>
|
|
261
323
|
## Using With Image Uploading Libraries
|
|
262
324
|
|
|
263
325
|
imgix-rails plays well with image uploading libraries, because it just requires a URL and optional parameters as arguments. A good way to handle this interaction is by creating helpers that bridge between your uploading library of choice and imgix-rails. Below are examples of how this can work with some common libraries. Please submit an issue if you'd like to see specific examples for another!
|
|
264
326
|
|
|
265
|
-
|
|
266
|
-
<a name="paperclip-and-carrierwave"></a>
|
|
267
327
|
### Paperclip and CarrierWave
|
|
268
328
|
|
|
269
329
|
Paperclip and CarrierWave can directly provide paths to uploaded images, so we can use them with imgix-rails without a bridge.
|
|
@@ -272,8 +332,6 @@ Paperclip and CarrierWave can directly provide paths to uploaded images, so we c
|
|
|
272
332
|
<%= ix_image_tag(@user.avatar.path, { auto: 'format', fit: 'crop', w: 500}) %>
|
|
273
333
|
```
|
|
274
334
|
|
|
275
|
-
|
|
276
|
-
<a name="refile"></a>
|
|
277
335
|
### Refile
|
|
278
336
|
|
|
279
337
|
Since Refile doesn't actually store URLs or paths in the database (instead using a "prefix" + image identifier), the basic setup is slightly different. In this case, we use a couple helpers that bridge between Refile and imgix-rails.
|
|
@@ -304,12 +362,13 @@ end
|
|
|
304
362
|
<%= ix_refile_image_tag(@blog_post, :hero_photo, {auto: 'format', fit: 'crop', w: 500}) %>
|
|
305
363
|
```
|
|
306
364
|
|
|
307
|
-
<a name="activestorage"></a>
|
|
308
365
|
### Active Storage
|
|
309
366
|
|
|
310
367
|
To set up imgix with ActiveStorage, first ensure that the remote source your ActiveStorage service is pointing to is the same as your imgix source — such as an s3 bucket.
|
|
311
368
|
|
|
312
|
-
|
|
369
|
+
### S3
|
|
370
|
+
**config/storage.yml**
|
|
371
|
+
|
|
313
372
|
```yml
|
|
314
373
|
service: S3
|
|
315
374
|
access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
|
|
@@ -318,17 +377,34 @@ region: us-east-1
|
|
|
318
377
|
bucket: your_own_bucket
|
|
319
378
|
```
|
|
320
379
|
|
|
321
|
-
|
|
380
|
+
### GCS
|
|
381
|
+
```yml
|
|
382
|
+
google:
|
|
383
|
+
service: GCS
|
|
384
|
+
project: Project Name
|
|
385
|
+
credentials: <%= Rails.root.join("path/to/key.json") %>
|
|
386
|
+
bucket: Bucket Name
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
Modify your `active_storage.service` setting depending on what environment you are using. For example, to use Amazon s3 in production, make the following change:
|
|
322
390
|
|
|
323
|
-
|
|
324
|
-
|
|
391
|
+
**config/environments/production.rb**
|
|
392
|
+
|
|
393
|
+
```rb
|
|
325
394
|
config.active_storage.service = :amazon
|
|
326
395
|
```
|
|
327
396
|
|
|
397
|
+
To use Google GCS in production, configure the active storage service like so:
|
|
398
|
+
|
|
399
|
+
```rb
|
|
400
|
+
config.active_storage.service = :google
|
|
401
|
+
```
|
|
402
|
+
|
|
328
403
|
As you would normally with imgix-rails, configure your application to point to your imgix source:
|
|
329
404
|
|
|
330
|
-
|
|
331
|
-
|
|
405
|
+
**config/application.rb**
|
|
406
|
+
|
|
407
|
+
```rb
|
|
332
408
|
Rails.application.configure do
|
|
333
409
|
config.imgix = {
|
|
334
410
|
source: your_domain,
|
|
@@ -340,20 +416,34 @@ end
|
|
|
340
416
|
|
|
341
417
|
Finally, the two can be used together by passing in the filename of the ActiveStorage blob into the imgix-rails helper function:
|
|
342
418
|
|
|
343
|
-
|
|
419
|
+
**show.html.erb**
|
|
420
|
+
|
|
344
421
|
```erb
|
|
345
422
|
<%= ix_image_tag(@your_model.image.key) %>
|
|
346
423
|
```
|
|
347
424
|
|
|
348
|
-
|
|
425
|
+
## Upgrade Guides
|
|
426
|
+
|
|
427
|
+
### 3.x to 4.0
|
|
428
|
+
|
|
429
|
+
The v4.0.0 release of imgix-rails introduces a variety of improvements relating to how this gem handles and generates `srcset` attributes. However, in releasing this version there are some significant interface/behavioral changes that users need to be aware of. Users should note that the `min_width` and `max_width` fields (passed via `tag_options`), as well as the `widths` field, have all been moved to their own encompassing `srcset_options` field. This is done with the intention of providing a more organized and intuitive experience when fine-tuning how `srcset` width pairs are generated. See the following example demonstrating this new pattern:
|
|
430
|
+
|
|
431
|
+
```erb
|
|
432
|
+
<%= ix_image_tag('/unsplash/hotairballoon.jpg',
|
|
433
|
+
srcset_options: { min_width: 1000, max_width: 2500},
|
|
434
|
+
tag_options: { alt: 'A hot air balloon on a sunny day' }) %>
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
For users migrating to version 4.0 or later, it is important that all srcset-related modifiers be passed via `srcset_options`, as doing so through `tag_options` or `widths` directly will result in errors. For more details on these modifiers, please see the [ix_image_tag](https://github.com/imgix/imgix-rails#ix_image_tag) or [ix_picture_tag](https://github.com/imgix/imgix-rails#ix_picture_tag) sections.
|
|
438
|
+
|
|
439
|
+
In addition to these changes, imgix-rails is now capable of producing [fixed-image srcsets](https://github.com/imgix/imgix-rb#fixed-image-rendering). Users should note that when certain dimension information is provided, imgix-rails will produce a `srcset` at different screen resolutions rather than the typical width pairs. This feature provides expanded functionality to cover more `srcset` use cases that users can take advantage of. We are always happy to provide our users with more tools to assist them in their efforts to build out responsive images on the web.
|
|
440
|
+
|
|
349
441
|
## Development
|
|
350
442
|
|
|
351
443
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/console` for an interactive prompt that will allow you to experiment.
|
|
352
444
|
|
|
353
445
|
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release` to create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
|
354
446
|
|
|
355
|
-
|
|
356
|
-
<a name="contributing"></a>
|
|
357
447
|
## Contributing
|
|
358
448
|
|
|
359
449
|
1. Fork it ( https://github.com/[my-github-username]/imgix-rails/fork )
|
data/imgix-rails.gemspec
CHANGED
|
@@ -14,6 +14,12 @@ Gem::Specification.new do |spec|
|
|
|
14
14
|
spec.description = %q{Makes integrating imgix into your Rails app easier. It builds on imgix-rb to offer a few Rails-specific interfaces. Please see https://github.com/imgix/imgix-rails for more details.}
|
|
15
15
|
spec.homepage = "https://github.com/imgix/imgix-rails"
|
|
16
16
|
|
|
17
|
+
spec.metadata = {
|
|
18
|
+
'bug_tracker_uri' => 'https://github.com/imgix/imgix-rails/issues',
|
|
19
|
+
'changelog_uri' => 'https://github.com/imgix/imgix-rails/blob/main/CHANGELOG.md',
|
|
20
|
+
'documentation_uri' => "https://www.rubydoc.info/gems/imgix-rails/#{spec.version}",
|
|
21
|
+
'source_code_uri' => "https://github.com/imgix/imgix-rails/tree/v#{spec.version}"
|
|
22
|
+
}
|
|
17
23
|
# Prevent pushing this gem to RubyGems.org by setting 'allowed_push_host', or
|
|
18
24
|
# delete this section to allow pushing this gem to any host.
|
|
19
25
|
if spec.respond_to?(:metadata)
|
|
@@ -27,10 +33,10 @@ Gem::Specification.new do |spec|
|
|
|
27
33
|
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
|
28
34
|
spec.require_paths = ["lib"]
|
|
29
35
|
|
|
30
|
-
spec.add_runtime_dependency "imgix", "
|
|
36
|
+
spec.add_runtime_dependency "imgix", ">= 3.0"
|
|
31
37
|
|
|
32
38
|
spec.add_development_dependency "bundler", ">=1.9"
|
|
33
|
-
spec.add_development_dependency "rake", "~>
|
|
39
|
+
spec.add_development_dependency "rake", "~> 12.3"
|
|
34
40
|
spec.add_development_dependency "rspec"
|
|
35
41
|
spec.add_development_dependency "rspec-rails"
|
|
36
42
|
end
|
data/lib/imgix/rails.rb
CHANGED
|
@@ -3,9 +3,28 @@ require "imgix/rails/tag"
|
|
|
3
3
|
class Imgix::Rails::ImageTag < Imgix::Rails::Tag
|
|
4
4
|
|
|
5
5
|
def render
|
|
6
|
-
|
|
7
|
-
@tag_options[:sizes] ||= '100vw'
|
|
6
|
+
url = ix_image_url(@source, @path, @url_params)
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
if @attribute_options[:srcset].present?
|
|
9
|
+
@tag_options[@attribute_options[:srcset]] = srcset
|
|
10
|
+
else
|
|
11
|
+
@tag_options[:srcset] = srcset
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
if @attribute_options[:size].present?
|
|
15
|
+
@tag_options[@attribute_options[:size]] ||= '100vw'
|
|
16
|
+
else
|
|
17
|
+
@tag_options[:sizes] ||= '100vw'
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
if @attribute_options[:src].present?
|
|
21
|
+
@tag_options[@attribute_options[:src]] = url
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
if @tag_options[:src].present?
|
|
25
|
+
image_tag(@tag_options[:src], @tag_options)
|
|
26
|
+
else
|
|
27
|
+
image_tag(url, @tag_options)
|
|
28
|
+
end
|
|
10
29
|
end
|
|
11
30
|
end
|
|
@@ -1,35 +1,42 @@
|
|
|
1
1
|
require "imgix/rails/tag"
|
|
2
2
|
require "imgix/rails/image_tag"
|
|
3
|
+
require "action_view"
|
|
3
4
|
|
|
4
5
|
class Imgix::Rails::PictureTag < Imgix::Rails::Tag
|
|
5
6
|
include ActionView::Context
|
|
6
7
|
|
|
7
|
-
def initialize(path, source: nil, tag_options: {}, url_params: {}, breakpoints: {},
|
|
8
|
+
def initialize(path, source: nil, tag_options: {}, url_params: {}, breakpoints: {}, srcset_options: {})
|
|
8
9
|
@path = path
|
|
9
10
|
@source = source
|
|
10
11
|
@tag_options = tag_options
|
|
11
12
|
@url_params = url_params
|
|
12
13
|
@breakpoints = breakpoints
|
|
13
|
-
@
|
|
14
|
+
@srcset_options = srcset_options
|
|
14
15
|
end
|
|
15
16
|
|
|
16
17
|
def render
|
|
17
18
|
content_tag(:picture, @tag_options) do
|
|
18
19
|
@breakpoints.each do |media, opts|
|
|
20
|
+
validate_opts(opts)
|
|
21
|
+
|
|
19
22
|
source_tag_opts = opts[:tag_options] || {}
|
|
20
23
|
source_tag_url_params = opts[:url_params] || {}
|
|
21
|
-
|
|
22
|
-
unsupported_opts = opts.except(:tag_options, :url_params, :widths)
|
|
23
|
-
if unsupported_opts.length > 0
|
|
24
|
-
raise "'#{unsupported_opts.keys.join("', '")}' key(s) not supported; use tag_options, url_params, widths."
|
|
25
|
-
end
|
|
26
|
-
|
|
24
|
+
srcset_options = opts[:srcset_options] || {}
|
|
27
25
|
source_tag_opts[:media] ||= media
|
|
28
|
-
source_tag_opts[:srcset] ||= srcset(url_params: @url_params.clone.merge(source_tag_url_params),
|
|
26
|
+
source_tag_opts[:srcset] ||= srcset(url_params: @url_params.clone.merge(source_tag_url_params), srcset_options: srcset_options)
|
|
27
|
+
|
|
29
28
|
concat(content_tag(:source, nil, source_tag_opts))
|
|
30
29
|
end
|
|
31
30
|
|
|
32
|
-
concat Imgix::Rails::ImageTag.new(@path, source: @source, url_params: @url_params).render
|
|
31
|
+
concat Imgix::Rails::ImageTag.new(@path, source: @source, url_params: @url_params, srcset_options: @srcset_options).render
|
|
33
32
|
end
|
|
34
33
|
end
|
|
34
|
+
|
|
35
|
+
private
|
|
36
|
+
def validate_opts(opts = {})
|
|
37
|
+
unsupported_opts = opts.except(:tag_options, :url_params, :srcset_options)
|
|
38
|
+
if unsupported_opts.length > 0
|
|
39
|
+
raise "'#{unsupported_opts.keys.join("', '")}' key(s) not supported; use tag_options, url_params, srcset_options."
|
|
40
|
+
end
|
|
41
|
+
end
|
|
35
42
|
end
|
data/lib/imgix/rails/tag.rb
CHANGED
|
@@ -1,83 +1,31 @@
|
|
|
1
1
|
require "imgix/rails/url_helper"
|
|
2
|
+
require "action_view"
|
|
2
3
|
|
|
3
4
|
class Imgix::Rails::Tag
|
|
4
5
|
include Imgix::Rails::UrlHelper
|
|
5
6
|
include ActionView::Helpers
|
|
6
7
|
|
|
7
|
-
def initialize(path, source: nil, tag_options: {}, url_params: {},
|
|
8
|
+
def initialize(path, source: nil, tag_options: {}, url_params: {}, srcset_options: {}, attribute_options: {})
|
|
8
9
|
@path = path
|
|
9
10
|
@source = source
|
|
10
11
|
@tag_options = tag_options
|
|
11
12
|
@url_params = url_params
|
|
12
|
-
@
|
|
13
|
+
@srcset_options = srcset_options
|
|
14
|
+
@attribute_options = attribute_options
|
|
13
15
|
end
|
|
14
16
|
|
|
15
17
|
protected
|
|
16
18
|
|
|
17
|
-
def srcset(url_params: @url_params,
|
|
18
|
-
|
|
19
|
-
warn "Warning: srcset generation will be refactored in the next major release. "\
|
|
20
|
-
"Please consult this project\'s documentation when upgrading to better understand the expected behavior."
|
|
21
|
-
end
|
|
22
|
-
widths = widths || target_widths
|
|
19
|
+
def srcset(source: @source, path: @path, url_params: @url_params, srcset_options: @srcset_options, tag_options: @tag_options)
|
|
20
|
+
params = url_params.clone
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
width_tolerance = ::Imgix::Rails.config.imgix[:srcset_width_tolerance]
|
|
23
|
+
min_width = @srcset_options[:min_width]
|
|
24
|
+
max_width = @srcset_options[:max_width]
|
|
25
|
+
widths = @srcset_options[:widths]
|
|
26
|
+
disable_variable_quality = @srcset_options[:disable_variable_quality]
|
|
27
|
+
options = { widths: widths, width_tolerance: width_tolerance, min_width: min_width, max_width: max_width, disable_variable_quality: disable_variable_quality}
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
srcset_url_params[:h] = (width * (url_params[:h].to_f / url_params[:w])).round
|
|
30
|
-
end
|
|
31
|
-
|
|
32
|
-
"#{ix_image_url(@source, @path, srcset_url_params)} #{width}w"
|
|
33
|
-
end.join(', ')
|
|
34
|
-
end
|
|
35
|
-
|
|
36
|
-
@@standard_widths = nil
|
|
37
|
-
|
|
38
|
-
def compute_standard_widths
|
|
39
|
-
tolerance = ::Imgix::Rails.config.imgix[:srcset_width_tolerance] || SRCSET_TOLERANCE
|
|
40
|
-
prev = MINIMUM_SCREEN_WIDTH
|
|
41
|
-
widths = []
|
|
42
|
-
while prev <= MAXIMUM_SCREEN_WIDTH do
|
|
43
|
-
widths.append(2 * (prev/2).round) # Ensure widths are even
|
|
44
|
-
prev = prev * (1 + tolerance*2.0)
|
|
45
|
-
end
|
|
46
|
-
|
|
47
|
-
widths
|
|
29
|
+
ix_image_srcset(@source, @path, params, options)
|
|
48
30
|
end
|
|
49
|
-
|
|
50
|
-
def standard_widths
|
|
51
|
-
return @@standard_widths if @@standard_widths
|
|
52
|
-
|
|
53
|
-
@@standard_widths = compute_standard_widths
|
|
54
|
-
@@standard_widths.freeze
|
|
55
|
-
|
|
56
|
-
@@standard_widths
|
|
57
|
-
end
|
|
58
|
-
|
|
59
|
-
private
|
|
60
|
-
|
|
61
|
-
MINIMUM_SCREEN_WIDTH = 100
|
|
62
|
-
MAXIMUM_SCREEN_WIDTH = 8192 # Maximum width supported by imgix
|
|
63
|
-
SRCSET_TOLERANCE = 0.08
|
|
64
|
-
|
|
65
|
-
# Return the widths to generate given the input `sizes`
|
|
66
|
-
# attribute.
|
|
67
|
-
#
|
|
68
|
-
# @return {Array} An array of {Fixnum} instances representing the unique `srcset` URLs to generate.
|
|
69
|
-
def target_widths
|
|
70
|
-
min_width = @tag_options[:min_width]
|
|
71
|
-
max_width = @tag_options[:max_width]
|
|
72
|
-
if min_width || max_width
|
|
73
|
-
min_width = min_width || MINIMUM_SCREEN_WIDTH
|
|
74
|
-
max_width = max_width || MAXIMUM_SCREEN_WIDTH
|
|
75
|
-
widths = standard_widths.select { |w| min_width <= w && w <= max_width }
|
|
76
|
-
else
|
|
77
|
-
widths = standard_widths
|
|
78
|
-
end
|
|
79
|
-
|
|
80
|
-
widths
|
|
81
|
-
end
|
|
82
|
-
|
|
83
31
|
end
|
|
@@ -10,28 +10,65 @@ module Imgix
|
|
|
10
10
|
when 1
|
|
11
11
|
path = args[0]
|
|
12
12
|
source = nil
|
|
13
|
-
|
|
13
|
+
params = {}
|
|
14
14
|
when 2
|
|
15
15
|
if args[0].is_a?(String) && args[1].is_a?(Hash)
|
|
16
16
|
source = nil
|
|
17
17
|
path = args[0]
|
|
18
|
-
|
|
18
|
+
params = args[1]
|
|
19
19
|
elsif args[0].is_a?(String) && args[1].is_a?(String)
|
|
20
20
|
source = args[0]
|
|
21
21
|
path = args[1]
|
|
22
|
-
|
|
22
|
+
params = {}
|
|
23
23
|
else
|
|
24
|
-
raise RuntimeError.new("path and source must be of type String;
|
|
24
|
+
raise RuntimeError.new("path and source must be of type String; params must be of type Hash")
|
|
25
25
|
end
|
|
26
26
|
when 3
|
|
27
27
|
source = args[0]
|
|
28
28
|
path = args[1]
|
|
29
|
-
|
|
29
|
+
params = args[2]
|
|
30
30
|
else
|
|
31
31
|
raise RuntimeError.new('path missing')
|
|
32
32
|
end
|
|
33
33
|
|
|
34
|
-
imgix_client(source).path(path).to_url(
|
|
34
|
+
imgix_client(source).path(path).to_url(params).html_safe
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
protected
|
|
38
|
+
|
|
39
|
+
def ix_image_srcset(*args)
|
|
40
|
+
validate_configuration!
|
|
41
|
+
|
|
42
|
+
case args.size
|
|
43
|
+
when 1
|
|
44
|
+
path = args[0]
|
|
45
|
+
source = nil
|
|
46
|
+
params = {}
|
|
47
|
+
when 2
|
|
48
|
+
if args[0].is_a?(String) && args[1].is_a?(Hash)
|
|
49
|
+
source = nil
|
|
50
|
+
path = args[0]
|
|
51
|
+
params = args[1]
|
|
52
|
+
elsif args[0].is_a?(String) && args[1].is_a?(String)
|
|
53
|
+
source = args[0]
|
|
54
|
+
path = args[1]
|
|
55
|
+
params = {}
|
|
56
|
+
else
|
|
57
|
+
raise RuntimeError.new("path and source must be of type String; params must be of type Hash")
|
|
58
|
+
end
|
|
59
|
+
when 3
|
|
60
|
+
source = args[0]
|
|
61
|
+
path = args[1]
|
|
62
|
+
params = args[2]
|
|
63
|
+
when 4
|
|
64
|
+
source = args[0]
|
|
65
|
+
path = args[1]
|
|
66
|
+
params = args[2]
|
|
67
|
+
options = args[3]
|
|
68
|
+
else
|
|
69
|
+
raise RuntimeError.new('path missing')
|
|
70
|
+
end
|
|
71
|
+
imgix_client(source).path(path).to_srcset(options: options, **params).html_safe
|
|
35
72
|
end
|
|
36
73
|
|
|
37
74
|
private
|
|
@@ -44,8 +81,8 @@ module Imgix
|
|
|
44
81
|
end
|
|
45
82
|
|
|
46
83
|
if imgix[:source]
|
|
47
|
-
unless imgix[:source].is_a?(
|
|
48
|
-
raise ConfigurationError.new("imgix source must be a String
|
|
84
|
+
unless imgix[:source].is_a?(String)
|
|
85
|
+
raise ConfigurationError.new("imgix source must be a String.")
|
|
49
86
|
end
|
|
50
87
|
end
|
|
51
88
|
|
|
@@ -54,10 +91,6 @@ module Imgix
|
|
|
54
91
|
raise ConfigurationError.new(":sources must be a Hash")
|
|
55
92
|
end
|
|
56
93
|
end
|
|
57
|
-
|
|
58
|
-
unless !imgix.key?(:shard_strategy) || STRATEGIES.include?(imgix[:shard_strategy])
|
|
59
|
-
raise ConfigurationError.new("#{imgix[:shard_strategy]} is not supported")
|
|
60
|
-
end
|
|
61
94
|
end
|
|
62
95
|
|
|
63
96
|
def imgix_client(source)
|
|
@@ -79,9 +112,7 @@ module Imgix
|
|
|
79
112
|
}
|
|
80
113
|
|
|
81
114
|
if imgix[:source].is_a?(String)
|
|
82
|
-
opts[:
|
|
83
|
-
else
|
|
84
|
-
opts[:hosts] = imgix[:source]
|
|
115
|
+
opts[:domain] = imgix[:source]
|
|
85
116
|
end
|
|
86
117
|
|
|
87
118
|
if imgix.has_key?(:include_library_param)
|
|
@@ -92,15 +123,11 @@ module Imgix
|
|
|
92
123
|
opts[:use_https] = imgix[:use_https]
|
|
93
124
|
end
|
|
94
125
|
|
|
95
|
-
if imgix.has_key?(:shard_strategy)
|
|
96
|
-
opts[:shard_strategy] = imgix[:shard_strategy]
|
|
97
|
-
end
|
|
98
|
-
|
|
99
126
|
sources = imgix[:sources] || { imgix[:source] => imgix[:secure_url_token] }
|
|
100
127
|
@imgix_clients = {}
|
|
101
128
|
|
|
102
129
|
sources.map do |source, token|
|
|
103
|
-
opts[:
|
|
130
|
+
opts[:domain] = source
|
|
104
131
|
opts[:secure_url_token] = token
|
|
105
132
|
@imgix_clients[source] = ::Imgix::Client.new(opts)
|
|
106
133
|
end
|
data/lib/imgix/rails/version.rb
CHANGED
|
@@ -8,12 +8,12 @@ module Imgix
|
|
|
8
8
|
module ViewHelper
|
|
9
9
|
include UrlHelper
|
|
10
10
|
|
|
11
|
-
def ix_image_tag(source=nil, path, tag_options: {}, url_params: {},
|
|
12
|
-
return Imgix::Rails::ImageTag.new(path, source: source, tag_options: tag_options, url_params: url_params,
|
|
11
|
+
def ix_image_tag(source=nil, path, tag_options: {}, url_params: {}, srcset_options: {}, attribute_options: {})
|
|
12
|
+
return Imgix::Rails::ImageTag.new(path, source: source, tag_options: tag_options, url_params: url_params, srcset_options: srcset_options, attribute_options: attribute_options).render
|
|
13
13
|
end
|
|
14
14
|
|
|
15
|
-
def ix_picture_tag(source=nil, path, tag_options: {}, url_params: {}, breakpoints: {},
|
|
16
|
-
return Imgix::Rails::PictureTag.new(path, source: source, tag_options: tag_options, url_params: url_params, breakpoints: breakpoints,
|
|
15
|
+
def ix_picture_tag(source=nil, path, tag_options: {}, url_params: {}, breakpoints: {}, srcset_options: {})
|
|
16
|
+
return Imgix::Rails::PictureTag.new(path, source: source, tag_options: tag_options, url_params: url_params, breakpoints: breakpoints, srcset_options: srcset_options).render
|
|
17
17
|
end
|
|
18
18
|
end
|
|
19
19
|
end
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: imgix-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 4.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Kelly Sutton
|
|
@@ -9,28 +9,22 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: exe
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2021-01-05 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: imgix
|
|
16
16
|
requirement: !ruby/object:Gem::Requirement
|
|
17
17
|
requirements:
|
|
18
|
-
- - "~>"
|
|
19
|
-
- !ruby/object:Gem::Version
|
|
20
|
-
version: '1.1'
|
|
21
18
|
- - ">="
|
|
22
19
|
- !ruby/object:Gem::Version
|
|
23
|
-
version:
|
|
20
|
+
version: '3.0'
|
|
24
21
|
type: :runtime
|
|
25
22
|
prerelease: false
|
|
26
23
|
version_requirements: !ruby/object:Gem::Requirement
|
|
27
24
|
requirements:
|
|
28
|
-
- - "~>"
|
|
29
|
-
- !ruby/object:Gem::Version
|
|
30
|
-
version: '1.1'
|
|
31
25
|
- - ">="
|
|
32
26
|
- !ruby/object:Gem::Version
|
|
33
|
-
version:
|
|
27
|
+
version: '3.0'
|
|
34
28
|
- !ruby/object:Gem::Dependency
|
|
35
29
|
name: bundler
|
|
36
30
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -51,14 +45,14 @@ dependencies:
|
|
|
51
45
|
requirements:
|
|
52
46
|
- - "~>"
|
|
53
47
|
- !ruby/object:Gem::Version
|
|
54
|
-
version: '
|
|
48
|
+
version: '12.3'
|
|
55
49
|
type: :development
|
|
56
50
|
prerelease: false
|
|
57
51
|
version_requirements: !ruby/object:Gem::Requirement
|
|
58
52
|
requirements:
|
|
59
53
|
- - "~>"
|
|
60
54
|
- !ruby/object:Gem::Version
|
|
61
|
-
version: '
|
|
55
|
+
version: '12.3'
|
|
62
56
|
- !ruby/object:Gem::Dependency
|
|
63
57
|
name: rspec
|
|
64
58
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -97,6 +91,11 @@ executables: []
|
|
|
97
91
|
extensions: []
|
|
98
92
|
extra_rdoc_files: []
|
|
99
93
|
files:
|
|
94
|
+
- ".github/CODEOWNERS"
|
|
95
|
+
- ".github/ISSUE_TEMPLATE/bug_report.md"
|
|
96
|
+
- ".github/ISSUE_TEMPLATE/feature_request.md"
|
|
97
|
+
- ".github/ISSUE_TEMPLATE/question.md"
|
|
98
|
+
- ".github/pull_request_template.md"
|
|
100
99
|
- ".gitignore"
|
|
101
100
|
- ".rspec"
|
|
102
101
|
- ".travis.yml"
|
|
@@ -120,6 +119,10 @@ homepage: https://github.com/imgix/imgix-rails
|
|
|
120
119
|
licenses:
|
|
121
120
|
- BSD-2-Clause
|
|
122
121
|
metadata:
|
|
122
|
+
bug_tracker_uri: https://github.com/imgix/imgix-rails/issues
|
|
123
|
+
changelog_uri: https://github.com/imgix/imgix-rails/blob/main/CHANGELOG.md
|
|
124
|
+
documentation_uri: https://www.rubydoc.info/gems/imgix-rails/4.2.0
|
|
125
|
+
source_code_uri: https://github.com/imgix/imgix-rails/tree/v4.2.0
|
|
123
126
|
allowed_push_host: https://rubygems.org
|
|
124
127
|
post_install_message:
|
|
125
128
|
rdoc_options: []
|
|
@@ -136,8 +139,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
136
139
|
- !ruby/object:Gem::Version
|
|
137
140
|
version: '0'
|
|
138
141
|
requirements: []
|
|
139
|
-
|
|
140
|
-
rubygems_version: 2.6.13
|
|
142
|
+
rubygems_version: 3.1.4
|
|
141
143
|
signing_key:
|
|
142
144
|
specification_version: 4
|
|
143
145
|
summary: Makes integrating imgix into your Rails app easier. It builds on imgix-rb
|