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	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">`