TALL-forms
  • TALL-forms
  • Installation
    • Quickstart: Artisan cmd
    • Manual installation
      • Package
      • Translations
      • Css & Theme
      • Javascript
      • Tailwind
      • Laravel Mix
      • Wrapper view
      • Laravel Jetstream/Breeze
  • Upgrade v7 to v8
    • Configuration changes
    • Component & Field changes
    • Blade view changes
    • Notification changes
    • Styling changes
  • Concept
    • Configuration
    • Validation
    • Styling
    • Icons
    • Javascript
    • Layout vs Wrapper
    • Model binding
    • Manually saving data
    • Extend Blade Components
  • Create Forms
    • Form Data
    • Form Types
      • Standard form
      • As modal
      • Without buttons
      • Fields only
      • Headless
    • Form attributes
    • Form buttons
    • Form slots
    • Form methods
    • Lifecycle hooks
    • Render a form
    • Mass generate
  • Fields
    • Declaration
    • Labels
    • Field Slots
    • Field methods
    • Custom field attributes
    • Conditional field
    • Custom view
    • Custom field
    • Custom Livewire component
    • Relations
    • Fields
      • Checkbox
      • Checkboxes
      • FileUpload
      • Honeypot
      • ImageCropper
      • Input
      • Password
      • InputArray
      • KeyVal (array)
      • Radio
      • Range
      • Repeater (array)
      • Search
      • Select & Multiselect
      • Tags
      • TagsSearch
      • Textarea
      • Trix
      • SpatieTags
    • Sponsor Fields
      • More Inputs
      • CKEditor
      • DatePicker
      • Heading
      • Markdown
      • Panels
      • SearchList
      • SelectOptGroup
      • Tabs
      • Trix, file-uploads
  • Blade components
    • Notifications
    • Label wrapper
    • Button
    • Modal blade component
    • Modal form blade component
  • Examples
    • Input examples
    • Array fields example
Powered by GitBook
On this page
  • Requirements
  • Existing files
  • updatedFoo() - update existing images
  • Additional methods
  • ->dropZoneHelp(string $text)
  • ->fileInfo(string $text)
  • ->uploadButton(string $text)
  • ->includeExternalScripts()
  • ->thumbnail(string $class)
  • ->width(int $pixels)
  • ->height(int $pixels)
  • ->circle()
  • ->square()

Was this helpful?

  1. Fields
  2. Fields

ImageCropper

Based on Croppie JS

PreviousHoneypotNextInput

Last updated 3 years ago

Was this helpful?

Requirements

  • @stack('styles') in the head of your app layout,

  • @stack('scripts') after Livewire and AlpineJS script tags.

  • Based on Croppie JS,

//expects existing value to be a image file url
//use form-generator hook saveFoo()
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');
    

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

saveFoo() - save the data

The ImageCropper generates a base64 png

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
}
//in Livewire component
public mixed $imageCropper = '';

//blade view
<x-tall-image-cropper :field="ImageCropper::blade('imageCropper')
    ->width(150)
    ->height(150)
    ->square()
    ->includeExternalScripts()
    ->thumbnail('w-1/4')
    ->dropZoneHelp('Drag an image here or click in this area')"
    :image-url="$imageCropper ?? 'https://picsum.photos/seed/picsum/400/200'"
/>

Search for ImageCropper in tall-theme.css

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.

updatedFoo() - update existing images

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

  • The ImageCropper generates a base64 png

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
    }
}

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

->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

You must save the uploaded image your self. Read more about how to

Omit this method if you import the scripts yourself,

Manually save data
https://github.com/Foliotek/Croppie
https://github.com/Foliotek/Croppie