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.