Skip to content

feat(sanity): sanity image transformations#2

Merged
osnoser1 merged 2 commits into
mainfrom
feature/image-transformation
Nov 14, 2024
Merged

feat(sanity): sanity image transformations#2
osnoser1 merged 2 commits into
mainfrom
feature/image-transformation

Conversation

@osnoser1

Copy link
Copy Markdown
Member

Key Feature

This PR introduces real-time image transformation updates during Sanity live editing sessions, enabling immediate preview of image crop adjustments and other transformations without requiring page reload.

Technical Implementation

1. Manual Change Detection for Live Updates

The core improvement is in the SanityImage directive, which now properly handles live updates to image sources.

2. Enhanced URL Parameter Handling

Improved the image loader to handle URL parameters directly:

3. Type-Safe Image Parameters

Benefits

  • Live Preview: Immediate visual feedback when editing image crops in Sanity Studio
  • Type Safety: Better TypeScript integration with Sanity's image URL builder options
  • Improved Performance: Direct URL parameter manipulation instead of builder chains

Breaking Changes

None. This is a feature enhancement that maintains backward compatibility.

This PR template focuses on the most significant aspect - the live editing functionality - while still covering the other important technical improvements. The manual change detection implementation is crucial as it enables real-time preview of image transformations, which is especially valuable during content editing sessions in Sanity Studio.

Closes #1

@osnoser1 osnoser1 added the enhancement New feature or request label Nov 13, 2024
@netlify

netlify Bot commented Nov 13, 2024

Copy link
Copy Markdown

Deploy Preview for limitless-angular-sanity-example ready!

Name Link
🔨 Latest commit 88eb546
🔍 Latest deploy log https://app.netlify.com/sites/limitless-angular-sanity-example/deploys/67357ee0615c8b00088d86f2
😎 Deploy Preview https://deploy-preview-2--limitless-angular-sanity-example.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@nx-cloud

nx-cloud Bot commented Nov 13, 2024

Copy link
Copy Markdown

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 88eb546. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@osnoser1 osnoser1 merged commit 66cfc4d into main Nov 14, 2024
@osnoser1 osnoser1 deleted the feature/image-transformation branch November 14, 2024 04:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feature request: support crop in image loader

1 participant