Skip to content

Add focal point documentation to media library page #2930

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
pwizla merged 4 commits into from
Feb 4, 2026
Merged

Add focal point documentation to media library page #2930

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95b4c95
Add focal point documentation to media library page
markkaylor Jan 29, 2026
db34047
Fix typos
markkaylor Jan 30, 2026
a1ee43a
Update docusaurus/docs/cms/features/media-library.md
pwizla Jan 30, 2026
b02f429
Update docusaurus/docs/cms/features/media-library.md
pwizla Jan 30, 2026
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
14 changes: 14 additions & 0 deletions docusaurus/docs/cms/features/media-library.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,7 @@ Click on the edit <Icon name="pencil-simple" /> button of an asset to open up th
- click on the download button <Icon name="download-simple" /> to download the asset,
- click on the copy link button <Icon name="link" classes="ph-bold" /> to copy the asset's link to the clipboard,
- optionally, click on the crop button <Icon name="crop" classes="ph-bold" /> to enter cropping mode for the image (see [Cropping images](#cropping-images)).
- optionally, click on the pin button <Icon name="map-pin" classes="ph-bold" /> to enter focal point mode for the image (see [Adding a focal point](#adding-a-focal-point)).
- On the right, meta data for the asset is displayed at the top of the window <ScreenshotNumberReference number="2" /> and the fields below can be used to update the _File name_, _Alternative text_, _Caption_ and _Location_ (see [Organizing assets with folders](#organizing-assets-with-folders)) for the asset <ScreenshotNumberReference number="3" />.
- At the bottom, the **Replace Media** button <ScreenshotNumberReference number="4" /> can be used to replace the asset file but keep the existing content of the other editable fields, and the **Finish** button is used to confirm any updates to the fields.

Expand All @@ -657,6 +658,19 @@ Assets can also be moved to other folders from the main view of the Media Librar
<!-- TODO: ask devs because there seems to be a bug/unintuitive behavior: choosing crop the original asset does not quit cropping mode 😅 -->
5. Click **Finish** to save changes to the file.

#### Adding a focal point

A focal point ensures the most important part of an image remains visible when the image is cropped or resized in different contexts.

To add a focal point to an image:

1. Click on the edit <Icon name="pencil-simple" /> button.
2. In the window that pops up, click on the pin <Icon name="map-pin" /> button to enter focal point mode.
3. Move the crosshair to the desired location and click to set the focal point.
4. Click the check <Icon name="check" classes="ph-bold" /> button to validate the new focal point. Alternatively, click the cancel <Icon name="x" classes="ph-bold" /> button to abandon changes and exit focal point mode.
5. Click the reset <Icon name="arrows-counter-clockwise" classes="ph-bold" /> button to reset the focal point to the center of the image.
6. Click **Finish** to save changes to the file.

#### Deleting assets

1. Click on the edit <Icon name="pencil-simple" /> button for the asset to be deleted.
Expand Down
Binary file modified docusaurus/static/img/assets/media-library/media-library_asset-details.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docusaurus/static/img/assets/media-library/media-library_asset-details_DARK.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading