immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-01 11:20:12 +03:00
Code Issues 783 Packages Projects Releases 12 Wiki Activity

[PR #25892] fix(web): Ensure profile picture is cropped to 1:1 ratio #18386

New Issue
Open
opened 2026-02-05 16:37:26 +03:00 by OVERLORD · 0 comments
OVERLORD commented 2026-02-05 16:37:26 +03:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/immich-app/immich/pull/25892
Author: @aditya-ai-architect
Created: 2/4/2026
Status: 🔄 Open

Base: main ← Head: fix/profile-picture-1-1-ratio

📝 Commits (2)

  • 5dddc81 fix(web): Ensure profile picture is cropped to 1:1 ratio
  • a607ae5 fix: remove trailing whitespace to pass prettier check

📊 Changes

1 file changed (+10 additions, -6 deletions)

View changed files

📝 web/src/lib/modals/ProfileImageCropperModal.svelte (+10 -6)

📄 Description

Summary

Fixes #20097

Problem

When setting a profile picture from a portrait or landscape image, the avatar was being cropped to the aspect ratio of the original photo instead of maintaining a 1:1 (square) ratio.

Solution

Changed the image capture target from the PhotoViewer element (imgElement) to the crop container element (cropContainer) which has the aspect-square Tailwind class applied.

This ensures the captured image is always square regardless of the original image's aspect ratio.

Changes

  • Added cropContainer ref to bind to the outer container div
  • Modified onSubmit to capture cropContainer instead of imgElement
  • Used container's offsetWidth for both width and height to ensure 1:1 ratio

Testing

  • Set profile picture from portrait image -> Avatar is now square
  • Set profile picture from landscape image -> Avatar is now square
  • Zoom/pan functionality works as expected

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/immich-app/immich/pull/25892 **Author:** [@aditya-ai-architect](https://github.com/aditya-ai-architect) **Created:** 2/4/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `fix/profile-picture-1-1-ratio` --- ### 📝 Commits (2) - [`5dddc81`](https://github.com/immich-app/immich/commit/5dddc81ec193e9fdb96037e68c9cd5948588b9bf) fix(web): Ensure profile picture is cropped to 1:1 ratio - [`a607ae5`](https://github.com/immich-app/immich/commit/a607ae59c2040ed338e2d6b55aa69e3b69a02d37) fix: remove trailing whitespace to pass prettier check ### 📊 Changes **1 file changed** (+10 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `web/src/lib/modals/ProfileImageCropperModal.svelte` (+10 -6) </details> ### 📄 Description ## Summary Fixes #20097 ## Problem When setting a profile picture from a portrait or landscape image, the avatar was being cropped to the aspect ratio of the original photo instead of maintaining a 1:1 (square) ratio. ## Solution Changed the image capture target from the `PhotoViewer` element (`imgElement`) to the crop container element (`cropContainer`) which has the `aspect-square` Tailwind class applied. This ensures the captured image is always square regardless of the original image's aspect ratio. ## Changes - Added `cropContainer` ref to bind to the outer container div - Modified `onSubmit` to capture `cropContainer` instead of `imgElement` - Used container's `offsetWidth` for both width and height to ensure 1:1 ratio ## Testing - Set profile picture from portrait image -> Avatar is now square - Set profile picture from landscape image -> Avatar is now square - Zoom/pan functionality works as expected --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
OVERLORD added the pull-request label 2026-02-05 16:37:26 +03:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
dependencies
documentation
external-library
format
good first issue
mobile-beta
mobile-beta
mobile-beta
needs-answer
nice to have
pull-request
Mirrored from GitHub Pull Request
 sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#18386
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?