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.

import { SynapsPicsModule } from 'ngx-synaps-pics';

@NgModule{
  ....
  imports: [
    ...,
    SynapsPicsModule
  ],

Now you can use synapsPics directive in your templates.

<img [synapsPics]="imageUrl" width="100" height="100" crop="fill">

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.

<div [synapsPics]="imageUrl" width="100" height="100" as-background></div>

Using as an attribute

You can also set url as an attribute:

<a [synapsPics]="imageUrl" width="100" height="100" crop="fill" as-attr="href">Link to image</a>

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

<img [synapsPics]="imageUrl" lazy>

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 add import 'intersection-observer'; line to your pollyfill.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.

<div class="slide" *ngFor="let slide of slides; let i = index">
  <img [synapsPics]="imageUrl" [lazy]="activeSlide === i">
</div>

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.