Image Cropper

Requirements

• @stack('styles') in the head of your app layout,
• @stack('scripts') after Livewire and AlpineJS script tags.
• Based on Croppie JS, https://github.com/Foliotek/Croppie (See below on how to auto include scripts.)

Extends BaseField

Additional methods

->dropZoneHelp(string $text)

->fileInfo(string $text)

->uploadButton(string $text)

->includeExternalScripts()

• Pushes (once) external (cdn-links) for required scripts and styles to your layout
• Not included by default
• Omit this method if you import the scripts yourself, https://github.com/Foliotek/Croppie

->thumbnail(string $class)

• Image preview size (class) in relation to its container.
• Default = w-full h-full.

->width(int $pixels)

• Cropper width in pixels

->height(int $pixels)

• Cropper height in pixels

->circle()

• Circular cropper shape

->square()

• Square cropper shape

Example

ImageCropper::make('Single Image Cropper', 'single_base64')
    ->width(150)
    ->height(150)
    ->square()
    ->includeExternalScripts() //will only be included once if multiple imageCropper fields.
    ->thumbnail('w-1/4')
    ->dropZoneHelp('Drag an image here or click in this area')                      

saveFoo() - save the data

• You must save the uploaded image your self. Read more about how to save "Custom Data" ->.
• The ImageCropper generates a base64 png

updatedFoo() - update existing images

• The hook is emitted when an existing image is deleted.

public function updatedFoo($value)
{
    if(filled($value)) {
        // $value = png base64 image
        // a new image was added, save it
    }
    if(blank($value)) {
        // an existing image was deleted, remove it from the model and storage
    }
}

Based on the example above, where the field key = single_base64

public function saveSingleBase64($base64png) {
    //validate and save as an image url on the model
}

Existing files

This field loads an existing image if it is a valid image url. It is up to you to load the field correctly and save the field value as a valid url.

Blade component

<x-tall-image-cropper
    :field="$field"
    :image-url="data_get($this, $field->key)"
/>

Styling = Blade component

Extend Blade component (or override in config file)

Tanthammar\TallForms\Components\ImageCropper::class

Theme

 /* ImageCropper */
    .tf-cropper-root {
        @apply bg-white border-2 border-dashed border-gray-300 mx-auto p-4 relative rounded w-full;
    }
    .tf-cropper-drop-zone {
        @apply cursor-pointer font-bold text-center text-gray-500 text-xs tracking-wide uppercase;
    }
    .tf-cropper-file-info {
        @apply font-thin text-gray-500 text-xs;
    }
    .tf-cropper-icon {
        @apply mx-auto h-12 w-12 text-gray-400;
    }
    .tf-cropper-modal-bg {
        @apply fixed inset-0 h-screen w-screen p-2 sm:p-10 md:p-20 bg-gray-800 bg-opacity-75 z-50;
    }
    .tf-cropper-modal {
        @apply bg-white rounded w-full h-full flex justify-center items-center;
    }
    .tf-cropper-btns-root {
        @apply z-10 absolute inset-0;
    }
    .tf-cropper-btns-wrapper {
        @apply flex gap-2 h-full w-full items-center justify-center;
    }
    .tf-cropper-edit-btn-wrapper {
        @apply z-10 absolute inset-0;
    }
    .tf-cropper-thumb {
        @apply w-full h-full;
    }
    .tf-cropper-upload {
        @apply tf-bg-primary flex font-medium items-center mt-2 mx-auto outline-none px-2 rounded-sm text-center text-white text-xs;
    }
    .tf-cropper-delete {
        @apply tf-bg-danger text-white p-2 rounded;
    }
    .tf-cropper-save {
        @apply tf-bg-success text-white p-2 rounded;
    }
    .tf-cropper-swap {
        @apply tf-bg-danger bg-opacity-75 hover:bg-opacity-100 text-white p-1 text-xs rounded;
    }
    .tf-cropper-edit {
        @apply tf-bg-success bg-opacity-75 hover:bg-opacity-100 text-white p-1 text-xs rounded;
    }

Button translations = config file

 //form buttons translations
    'save' => 'global.save',
    'swap' => 'global.swap',
    'delete' => 'global.delete',
    'edit' => 'global.edit',