https://github.com/twicpics/components-demo-angular
Demonstration of TwicPics components in a Angular project.
https://github.com/twicpics/components-demo-angular
Last synced: about 2 months ago
JSON representation
Demonstration of TwicPics components in a Angular project.
- Host: GitHub
- URL: https://github.com/twicpics/components-demo-angular
- Owner: TwicPics
- Created: 2022-12-21T17:13:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-11T11:23:35.000Z (3 months ago)
- Last Synced: 2025-02-11T12:30:11.268Z (3 months ago)
- Language: HTML
- Homepage:
- Size: 660 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TwicPics Components + Angular
This project is a demonstration project of [TwicPics Components](https://www.twicpics.com/docs/components/angular?utm_source=github&utm_medium=organic&utm_campaign=components) using [Angular](https://angular.io/) and [standalone components](https://angular.io/guide/standalone-components).
## How to build
### Using npm
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run serve
# build for production
$ npm run build
```
### Using yarn
```bash
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn serve
# build for production
$ yarn build
```
## Overview
### What is [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components)?
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) is a **Responsive Image Service Solution** (SaaS) that enables **on-demand responsive image generation**.
With [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components), developers only deal with high-resolution versions of their media while end-users receive **optimized, perfectly sized, device-adapted** versions **delivered from a server close to them**.
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) acts as an **image proxy**. It requests your master image, be it on your own web server, cloud storage or DAM, then generates a **device-adapted** version with **best-in-class compression**, delivered directly to the end-user from the **closest delivery point** available.
### What is TwicPics Components?
TwicPics Components is a **collection of web components** that make it dead easy to unleash the power of [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) in your own projects.
Basically, TwicPics components replace `img` and `video` tags. They greatly and transparently optimize your CLS by providing LQIP (Low-Quality Image Placeholders) and Lazy Loading out of the box.
Simply replace this:
```html
```
With this:
```html
```
Thanks to the open source [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) Components, delivering responsive images in your [Angular](https://angular.io/) projects has never been easier.
## TwicPics configuration
### Requirement
The only requirement is to have a TwicPics account.
If you don't already have one, you can easily [create your own TwicPics account for free](https://account.twicpics.com/signup).
### Configuring `@twicpics/components`
An example of configuration is set within `app.component.ts` file.
All you have to do is set your configuration options to the desired values ([see documentation](https://www.twicpics.com/docs/components/angular?utm_source=github&utm_medium=organic&utm_campaign=components#setup-options)).
## Examples
All the examples proposed in this project are located in the `app` directory.
Feel free to inspire yourself from these different use cases to unleash the power of [TwicPics](https://www.twicpics.com/) in your own projects.
## Questions and feedback
Fell free to submit an [issue](https://github.com/TwicPics/components/issues) or to ask us anything by dropping an email at [[email protected]](mailto:[email protected]).
## Licence
[![License][license-image]][license-url]
[license-image]: https://img.shields.io/npm/l/@twicpics/components.svg?style=flat-square
[license-url]: https://raw.githubusercontent.com/twicpics/components/master/LICENSE