imgix_client 1.0.0+1 imgix_client: ^1.0.0+1 copied to clipboard
A Dart client library for generating URLs with imgix.
Imgix Dart Client #
A Dart client library for generating URLs with imgix.
Install #
dependencies:
imgix_client: ^1.0.0
Basic Usage #
A simple usage example:
import 'package:imgix/imgix_client.dart';
void main() {
var urlBuilder = UrlBuilder('demos.imgix.net');
var params = { 'w': '100', 'h': '100' };
print('awesome: ${urlBuilder.createURL('bridge.png', params)}');
}
// Prints out:
// https://demos.imgix.net/bridge.png?h=100&w=100
HTTPS support is available by default. However, if you need HTTP support, call setUseHttps on the builder:
import 'package:imgix/imgix_client.dart';
void main() {
var builder = UrlBuilder('demos.imgix.net');
builder.useHttps = false; // use http
var params = { 'w': '100', 'h': '100' };
print(builder.createURL("bridge.png", params));
}
// Prints out
// http://demos.imgix.net/bridge.png?h=100&w=100
Signed URLs #
To produce a signed URL, you must enable secure URLs on your source and then provide your signature key to the URL builder.
import 'package:imgix/imgix_client.dart';
void main() {
var builder = UrlBuilder('demos.imgix.net');
builder.useHttps = false; // use http
builder.signKey = 'test1234'; // set sign key
var params = { 'w': '100', 'h': '100' };
print(builder.createURL("bridge.png", params));
}
// Prints out
// http://demos.imgix.net/bridge.png?h=100&w=100&s=bb8f3a2ab832e35997456823272103a4
Srcset Generation #
The imgix-java library allows for generation of custom srcset
attributes, which can be invoked through createSrcSet()
. By default, the srcset
generated will allow for responsive size switching by building a list of image-width mappings.
import 'package:imgix/imgix_client.dart';
void main() {
var ub = UrlBuilder('demos.imgix.net', true, 'my-token', false);
var srcset = ub.createSrcSet("bridge.png");
print(srcset);
}
Will produce the following attribute value, which can then be served to the client:
https://demos.imgix.net/bridge.png?w=100&s=494158d968e94ac8e83772ada9a83ad1 100w,
https://demos.imgix.net/bridge.png?w=116&s=6a22236e189b6a9548b531330647ffa7 116w,
https://demos.imgix.net/bridge.png?w=134&s=cbf91f556dd67c0b9e26cb9784a83794 134w,
...
https://demos.imgix.net/bridge.png?w=7400&s=503e3ba04588f1c301863c9a5d84fe91 7400w,
https://demos.imgix.net/bridge.png?w=8192&s=152551ce4ec155f7a03f60f762a1ca33 8192w
In cases where enough information is provided about an image's dimensions, createSrcSet()
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
(width), h
(height), and ar
(aspect ratio). By invoking createSrcSet()
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.
import 'package:imgix/imgix_client.dart';
void main() {
var ub = UrlBuilder('demos.imgix.net', true, 'my-token', false);
var params = { 'h': '200', 'ar': '3:2', 'fit': 'crop' };
var srcset = ub.createSrcSet("bridge.png", params);
print(srcset);
}
Will produce the following attribute value:
https://demos.imgix.net/bridge.png?ar=3%3A2&dpr=1&fit=crop&h=200&s=4c79373f535df7e2594a8f6622ec6631 1x,
https://demos.imgix.net/bridge.png?ar=3%3A2&dpr=2&fit=crop&h=200&s=dc818ae4522494f2f750651304a4d825 2x,
https://demos.imgix.net/bridge.png?ar=3%3A2&dpr=3&fit=crop&h=200&s=ba1ec0cef6c77ff02330d40cc4dae932 3x,
https://demos.imgix.net/bridge.png?ar=3%3A2&dpr=4&fit=crop&h=200&s=b51e497d9461be62354c0ea12b6524fb 4x,
https://demos.imgix.net/bridge.png?ar=3%3A2&dpr=5&fit=crop&h=200&s=dc37c1fbee505d425ca8e3764b37f791 5x
For more information to better understand srcset
, we recommend Eric Portis' "Srcset and sizes" article which goes into depth about the subject.
Features and bugs #
Please file feature requests and bugs at the issue tracker.
Running Tests #
To run tests clone this project and run:
pub run test