michael / editable-website

A SvelteKit template for building CMS-free editable websites
https://editable.website
MIT License
1.52k stars 120 forks source link

Integrate image cropping #13

Closed michael closed 1 year ago

michael commented 1 year ago

It would be neat to be able to provide an aspect property to the component, so the user can select a portion of the image.

Didn't do much research, but https://github.com/ValentinH/svelte-easy-crop seems to do the right thing and could be tweaked to fit our needs. We probably don't need all the functionality so we could strip down code or take it as an inspiration to create our own cropper.

As for the UX: We'd just display a modal with a confirm/cancel button before we upload+insert the image.

Usage:

<Image
  {editable}
  {currentUser}
  class="inline-block w-48 h-48 md:w-72 md:h-72 rounded-full"
  maxWidth=384
  maxHeight=384
  aspect={1/1}
  quality=0.8
  bind:src={bioPicture}
  alt={currentUser.name}
/>
michael commented 1 year ago

Done via https://github.com/michael/editable-website/commit/5048c09242a3cbbda5bc236a2a52caf093d352cc.