From 155876bd2165271116f7d8ea3cf3afddd9511ec9 Mon Sep 17 00:00:00 2001 From: Ghassan Yusuf Date: Sun, 25 Jan 2026 14:58:48 +0300 Subject: [PATCH] Add EXAMPLE.md --- EXAMPLE.md | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 EXAMPLE.md diff --git a/EXAMPLE.md b/EXAMPLE.md new file mode 100644 index 0000000..3281e7d --- /dev/null +++ b/EXAMPLE.md @@ -0,0 +1,130 @@ +# 🚀 Laravel Image Cropper - Quick Start Guide + +Follow these steps to get the **Laravel Cropper (Takeone)** package installed and working in your project in less than 5 minutes. + +--- + +## 🛠 Step 1: Add the Repository + +Open your project's `composer.json` and add the custom repository. This is necessary because the package is currently hosted on a private Gitea server. + +```json +"repositories": [ + { + "type": "vcs", + "url": "https://git.innovator.bh/ghassan/laravel-image-cropper" + } +] +``` + +--- + +## 🛠 Step 2: Install the Package + +Run the following command. **Note:** We use `@dev` to bypass the stability check since the package is in development. + +```bash +composer require takeone/cropper:@dev +``` + +--- + +## 🛠 Step 3: Link Storage + +Run this command to make your uploaded images accessible from the web: + +```bash +php artisan storage:link +``` + +--- + +## 🛠 Step 4: Prepare Your Layout + +Add **Bootstrap 5**, **jQuery**, and `@stack('modals')` to your `resources/views/layouts/app.blade.php`: + +```html + + + + + + My Laravel App + + + + +
+ @yield('content') +
+ + + + + + + @stack('modals') + + +``` + +--- + +## 🛠 Step 5: Use the Component + +In any of your Blade views (e.g., `profile.blade.php`), simply add the component: + +```html +@extends('layouts.app') + +@section('content') +
+

Update Profile Picture

+

Click the button below to upload and crop your photo.

+ + +
+@endsection +``` + +--- + +## ✅ Step 6: Test It! + +1. Open your browser to the page where you added the component. +2. Click **"Change Photo"**. +3. Select an image from your computer. +4. Use the **Zoom** and **Rotation** sliders to adjust. +5. Click **"Crop & Save Image"**. +6. Check your `public/storage/avatars/` folder to see the result! + +--- + +## 💡 Pro Tips + +### Displaying the Image +```html + +``` + +### Rectangular Cropping (Banners) +```html + +``` + +--- + +**Happy Coding!** 🚀 \ No newline at end of file