43 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
			
		
		
	
	
			43 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
| <form wire:submit.prevent="save">
 | |
|     @if($header)
 | |
|         <div
 | |
|             class="d-flex flex-column justify-content-center"
 | |
|             wire:ignore
 | |
|             x-data="{
 | |
|                 setUp() {
 | |
|                     const cropper = new Cropper(document.getElementById('header'), {
 | |
|                         aspectRatio: 1.46,
 | |
|                         autoCropArea: 1,
 | |
|                         viewMode: 1,
 | |
|                         crop (event) {
 | |
|                             @this.set('x', event.detail.x)
 | |
|                             @this.set('y', event.detail.y)
 | |
|                             @this.set('width', event.detail.width)
 | |
|                             @this.set('height', event.detail.height)
 | |
|                         }
 | |
|                     })
 | |
|                 }
 | |
|             }"
 | |
|             x-init="setUp"
 | |
|         >
 | |
|             <div class="d-flex justify-content-center text-center mt-4 mb-4">
 | |
|                 <img id="header" src="{{ $header->temporaryUrl() }}" style="width: 100%; max-width: 270px; margin:5px auto;">
 | |
|             </div>
 | |
|             <div class="d-flex justify-content-end text-end mt-4 mb-4">
 | |
|                 <button type="submit" class="btn btn-gradient btn-small">
 | |
|                     <span>Save Profile Header</span>
 | |
|                 </button>
 | |
|             </div>
 | |
|         </div>
 | |
|     @else
 | |
|         <div class="mb-2 mx-2">
 | |
|             <label for="header" style="width: 100%;">
 | |
|                 <img src="{{ auth()->user()->artists()->first()->header() }}" style="width: 100%; max-width: 270px; margin:5px auto;">
 | |
|             </label>
 | |
|         </div>
 | |
|         <div class="mb-2 mx-2">
 | |
|             <input type="file" name="header" id="header" class="sr-only" wire:model="header">
 | |
|         </div>
 | |
|     @endif
 | |
| </form>
 |