ngx-synaps-pics
Angular bindings for Synaps.Pics
Installation
With npm:
npm i --save ngx-synaps-pics
With yarn:
yarn add ngx-synaps-pics
Usage
Import SynapsPicsModule
to your app.
;
Now you can use synapsPics
directive in your templates.
Using as background
By default, synapsPics
directive sets the image url for src
and/or srcset
attribute. If you want to use image as a background you can use as-background
attribute.
Using as an attribute
You can also set url as an attribute:
Link to image
Lazy Loading
ngx-synaps-pics
has the ability lazy loading images with a given condition or by checking if it's in the viewport.
Lazy load image when it's visible
Please note that, visibility checking is using Intersection Observer API. If you need to support Internet Explorer and Safari browsers please include intersection observer pollyfill to your page. Just run
npm i --save intersection-observer
and then addimport 'intersection-observer';
line to yourpollyfill.ts
file.
Lazy loading with a condition
[lazy]
attribute also accepts a boolean value. So you can write some conditions for defining when image will be loaded. This feature is handy when you want to use it with a slider/carousel component for example.
Reference for manipulation parameters
For the original image below available manipulation parameters and example results are here.
parameter | value | example | Description |
---|---|---|---|
width | (integer) | sets width: <img [synapsPics]="'/anon/image_bla.jpg'" width="80"> |
|
height | (integer) | sets height: <img [synapsPics]="'/anon/image_bla.jpg'" height="80"> |
|
crop | fit (default) | The image is resized so that it takes up as much space as possible within a bounding box defined by the given width and height parameters. The original aspect ratio is retained and all of the original image is visible.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fit"> |
|
crop | scale | Change the size of the image exactly to the given width and height without necessarily retaining the original aspect ratio: all original image parts are visible but might be stretched or shrunk.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="scale"> |
|
crop | fill | Same as the 'fit' mode but only if the original image is larger than the given limit (width and height), in which case the image is scaled down so that it takes up as much space as possible within a bounding box defined by the given width and height parameters. The original aspect ratio is retained and all of the original image is visible.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill"> |
|
crop | pad | Resize the image to fill the given width and height while retaining the original aspect ratio. If the proportions of the original image do not match the given width and height, padding is added to the image to reach the required size.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="pad"> |
|
crop | limit | Same as the 'fit' mode but only if the original image is larger than the given limit (width and height).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="limit"> |
|
quality | integer (default 80) | Output quality. 1 to 100.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" q="40"> |
|
gravity | center (default) | The focus to the center of the image when cropping.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="center"> |
|
gravity | northwest | The focus to the northwest of the image when cropping.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="northwest"> |
|
gravity | northeast | North east corner (top right).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="northeast"> |
|
gravity | southeast | South east corner (bottom right).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="southeast"> |
|
gravity | southwest | South west corner (bottom left).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="southwest"> |
|
gravity | north | North center part (top center).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="north"> |
|
gravity | west | Middle west part (left).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="west"> |
|
gravity | east | Middle east part (right).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="east"> |
|
gravity | south | Middle south part (bottom center).<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="south"> |
|
gravity | auto | Smart cropping with feature detection.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="fill" gravity="auto"> |
|
background | ffffff | Fill background color for pad crop style.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" crop="pad" bg="ffffff"> |
|
format | jpg,png,gif,webp | Set the output image format.<img [synapsPics]="'/anon/image_bla.jpg'" width="80" height="80" format="gif"> |
Thanks
Special thanks to BrowserStack for their support about testing our work on multiple platforms.