Skip to content

docs(design): clean up image documentation #4497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xelaint merged 1 commit into from
May 26, 2026
Merged

docs(design): clean up image documentation #4497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions libs/design-examples/image/src/basic-image/basic-image.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<daff-image
src="https://assets.daff.io/ergonomic_bronze_pants.png"
alt="Ergonomic Bronze Pants T-Shirt"
[width]="934"
[height]="934"
[width]="400"
[height]="400"
>
</daff-image>
4 changes: 2 additions & 2 deletions libs/design-examples/image/src/skeleton-image/skeleton-image.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
[skeleton]="true"
src="https://assets.daff.io/ergonomic_bronze_pants.png"
alt="Ergonomic Bronze Pants T-Shirt"
[width]="934"
[height]="934"
[width]="300"
[height]="300"
>
</daff-image>
35 changes: 6 additions & 29 deletions libs/design/image/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ Image builds on Angular's [`NgOptimizedImage`](https://angular.dev/guide/image-o

## Usage

### Within a standalone component
To use image in a standalone component, import `DAFF_IMAGE_COMPONENTS` directly into your custom component:
Import `DAFF_IMAGE_COMPONENTS` into your component:

```ts
import { Component } from '@angular/core';
Expand All @@ -29,31 +28,9 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
export class CustomComponent {}
```

### Within a module (deprecated)
To use image in a module, import `DaffImageModule` into your custom module:

```ts
import { NgModule } from '@angular/core';
import { DaffImageModule } from '@daffodil/design/image';
import { CustomComponent } from './custom.component';

@NgModule({
declarations: [
CustomComponent,
],
exports: [
CustomComponent,
],
imports: [
DaffImageModule,
],
})
export class CustomComponentModule { }
```

> **Warning**
>
> This method is deprecated. It's recommended to update all custom components to standalone.
> **Deprecation notice:**
>
> `DaffImageModule` is deprecated. Use the standalone component imports instead.

## Required attributes
All four of the following attributes are required and will throw an error if missing:
Expand All @@ -67,12 +44,12 @@ All four of the following attributes are required and will throw an error if mis

## Features

## Skeleton screen
### Skeleton screen
Use the `skeleton` property to display a placeholder skeleton screen that helps reduce load-time frustration.

<daff-docs-example-viewer example="skeleton-image"></daff-docs-example-viewer>

## Priority loading
### Priority loading
Use the `priority` property to mark an image as a priority for loading. Priority images are loaded eagerly and not lazy-loaded.

## Accessibility
Expand Down
Loading