Skip to content

Commit a6b798f

Browse files
committed
docs(README): update badges
1 parent b0841ad commit a6b798f

File tree

1 file changed

+29
-27
lines changed

1 file changed

+29
-27
lines changed

README.md

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
# Angular Image Loader
22

3-
[![Build Status][travis-badge]][travis-badge-url]
3+
[![Build Status][circle-badge]][circle-badge-url]
44
[![Coverage Status][coveralls-badge]][coveralls-badge-url]
55
[![Commitizen friendly][commitizen-badge]][commitizen]
66
[![code style: prettier][prettier-badge]][prettier-badge-url]
77

8-
This project was generated with [Angular CLI][angular-cli] version 1.5.4.
9-
108
A simple progressive/responsive/lazy loading image library for [Angular][angular] that detects browser size and loads the appropriate image only when the element is in view. Classes are attributed and events emited on image loads. This package requires [@thisissoon/angular-inviewport][angular-inviewport].
119

1210
<img src="https://raw.githubusercontent.com/thisissoon/angular-image-loader/master/src/assets/example.gif" alt="example">
@@ -28,21 +26,21 @@ This is a simple library for [Angular][angular], implemented in the [Angular Pac
2826
```ts
2927
import {
3028
ImageLoaderModule,
31-
VideoLoaderModule
29+
VideoLoaderModule,
3230
} from '@thisissoon/angular-image-loader';
3331
import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
3432

3533
// Provide window object for platform browser
3634
export const providers: Provider[] = [
37-
{ provide: WindowRef, useFactory: () => window }
35+
{ provide: WindowRef, useFactory: () => window },
3836
];
3937

4038
@NgModule({
4139
imports: [
4240
InViewportModule.forRoot(providers),
4341
ImageLoaderModule, // Only this import required if using just the image loader
44-
VideoLoaderModule // Only this import required if using just the video loader
45-
]
42+
VideoLoaderModule, // Only this import required if using just the video loader
43+
],
4644
})
4745
export class AppModule {}
4846
```
@@ -58,8 +56,8 @@ import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
5856
// No need to provide WindowRef
5957
InViewportModule.forRoot(),
6058
ImageLoaderModule,
61-
VideoLoaderModule
62-
]
59+
VideoLoaderModule,
60+
],
6361
})
6462
export class AppModule {}
6563
```
@@ -77,7 +75,8 @@ A working example can be found inside [/src](https://github.com/thisissoon/angul
7775
imgClass="img"
7876
alt="lorem ipsum"
7977
(placeholderLoaded)="onPlaceholderLoad($event)"
80-
(imageLoaded)="onImageLoad($event)">
78+
(imageLoaded)="onImageLoad($event)"
79+
>
8180
</sn-image-loader>
8281
```
8382

@@ -88,7 +87,7 @@ export class AppComponent {
8887
sizes: Breakpoint[] = [
8988
{ size: 'xs', width: 0 },
9089
{ size: 'md', width: 768 },
91-
{ size: 'lg', width: 992 }
90+
{ size: 'lg', width: 992 },
9291
];
9392

9493
image: ResponsiveImage = {
@@ -98,19 +97,19 @@ export class AppComponent {
9897
{
9998
size: 'xs',
10099
x1: 'http://via.placeholder.com/150x350?text=xs+1x',
101-
x2: 'http://via.placeholder.com/300x700?text=xs+2x'
100+
x2: 'http://via.placeholder.com/300x700?text=xs+2x',
102101
},
103102
{
104103
size: 'md',
105104
x1: 'http://via.placeholder.com/350x250?text=md+1x',
106-
x2: 'http://via.placeholder.com/700x500?text=md+2x'
105+
x2: 'http://via.placeholder.com/700x500?text=md+2x',
107106
},
108107
{
109108
size: 'lg',
110109
x1: 'http://via.placeholder.com/700x400?text=lg+1x',
111-
x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
112-
}
113-
]
110+
x2: 'http://via.placeholder.com/1400x800?text=lg+2x',
111+
},
112+
],
114113
};
115114

116115
public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
@@ -147,7 +146,8 @@ export class AppComponent {
147146
[sizes]="sizes"
148147
imgClass="img"
149148
alt="lorem ipsum"
150-
#imgEl>
149+
#imgEl
150+
>
151151
</sn-image-loader>
152152

153153
<button (click)="imgEl.checkInViewportStatus()">Check status</button>
@@ -168,7 +168,8 @@ export class AppComponent {
168168
[playsInline]="true"
169169
type="video/mp4"
170170
videoClass="video"
171-
posterClass="img">
171+
posterClass="img"
172+
>
172173
</sn-video-loader>
173174
```
174175

@@ -179,30 +180,30 @@ export class AppComponent {
179180
sizes: Breakpoint[] = [
180181
{ size: 'xs', width: 0 },
181182
{ size: 'md', width: 768 },
182-
{ size: 'lg', width: 992 }
183+
{ size: 'lg', width: 992 },
183184
];
184185

185186
video: ResponsiveVideo = {
186187
videos: [
187188
{
188189
size: 'xs',
189190
url:
190-
'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_568,q_80,w_320/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
191+
'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_568,q_80,w_320/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4',
191192
},
192193
{
193194
size: 'md',
194195
url:
195-
'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_1024,q_80,w_768/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
196+
'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_1024,q_80,w_768/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4',
196197
},
197198
{
198199
size: 'lg',
199200
url:
200-
'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_720,q_80,w_1280/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4'
201-
}
201+
'http://res.cloudinary.com/thisissoon/video/upload/ac_none,c_fill,h_720,q_80,w_1280/v1517616795/demos/jellyfish-25-mbps-hd-hevc.mp4',
202+
},
202203
],
203204
poster: {
204205
// Responsive image, the same object as used for the image loader
205-
}
206+
},
206207
};
207208
}
208209
```
@@ -221,7 +222,8 @@ export class AppComponent {
221222
type="video/mp4"
222223
videoClass="video"
223224
posterClass="img"
224-
#videoEl>
225+
#videoEl
226+
>
225227
</sn-video-loader>
226228

227229
<button (click)="videoEl.checkInViewportStatus()">Check status</button>
@@ -259,8 +261,8 @@ Run `npm run release` to create a new release. This will use [Standard Version][
259261

260262
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README][angular-cli-readme].
261263

262-
[travis-badge]: https://travis-ci.org/thisissoon/angular-image-loader.svg?branch=master
263-
[travis-badge-url]: https://travis-ci.org/thisissoon/angular-image-loader
264+
[circle-badge]: https://circleci.com/gh/thisissoon/angular-image-loader.svg?branch=master
265+
[circle-badge-url]: https://circleci.com/gh/thisissoon/angular-image-loader
264266
[coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-image-loader/badge.svg?branch=master
265267
[coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-image-loader?branch=master
266268
[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield

0 commit comments

Comments
 (0)