Installation

Quick Installation

Image CRUD can be installed in just three simple steps:

composer require grocerycrud/image-crud
cp vendor/grocerycrud/image-crud/src/ImageCrud/ImageCrudPublisher.php app/Publishers
php spark publish

These commands will:

  1. Install Image CRUD via Composer
  2. Copy the publisher file to your application
  3. Publish the necessary assets to your public directory

Controller Example

<?php

namespace App\Controllers;

use ImageCrud\Core\ImageCrud;

class ImagesExamples extends BaseController
{

    private function _example_output($output = null) {
        if (isset($output->isJSONResponse) && $output->isJSONResponse) {
            header('Content-Type: application/json; charset=utf-8');
            echo $output->output;
            exit;
        }

        return view('image_crud/template.php', (array)$output);
    }

    public function example1(): string
    {
        $imageCrud = new ImageCrud();

        $imageCrud->setPrimaryKeyField('id');
        $imageCrud->setUrlField('url');
        $imageCrud->setTable('example_1')
            ->setImagePath('uploads');

        $output = $imageCrud->render();

        return $this->_example_output($output);
    }
}

Routing Requirements

Image CRUD has specific routing requirements due to its architecture. You must configure your routes properly for Image CRUD to work correctly:

// In app/Config/Routes.php
$routes->add('/images-examples/example1', 'ImagesExamples::example1');
$routes->add('/images-examples/example1/(:segment)(/(:segment))?', 'ImagesExamples::example1/$1/$2');

Important limitations:

  • Image CRUD currently supports only two levels in the URL (e.g., example.com/gallery/product_images)
  • The controller function must be at the second level of the URL
  • URLs with only one level (e.g., example.com/gallery pointing directly to a controller function) will not work with Image CRUD

For each Image CRUD controller function you create, you'll need to add similar routes to handle both the initial page load and subsequent AJAX requests.

Example Route Structure

URL Pattern Purpose
/controller/function Initial gallery page load
/controller/function/upload_file Image upload handling
/controller/function/delete_file/204 Image deletion
/controller/function/ordering Image reordering (if ordering is enabled)

Note on File Operations

Don't worry about implementing file upload, deletion, or ordering functionality yourself. Image CRUD handles all these operations automatically, including:

  • File uploads with validation
  • Image deletion with file removal
  • Drag-and-drop reordering
  • Image title editing

Just make sure you have added the correct routes as shown in the example above, and Image CRUD will take care of the rest.

Template Structure

Image CRUD requires a template file to properly display its interface. Below is an example of a minimal template file that you can use:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php
if (!empty($css_files)) {
    foreach($css_files as $css_file) { ?>
        <link rel="stylesheet" type="text/css" href="<?php echo $css_file; ?>" />
    <?php }
}
?>
<?php
if (!empty($js_files)) {
    foreach($js_files as $file) { ?>
        <script src="<?php echo $file; ?>"></script>
    <?php }
}
?>
</head>
<body>
 <div class="container">
     <!-- Your site header and navigation can go here -->

     <!-- Image CRUD output -->
     <div class="my-4">
         <?php
         if (!empty($output)) {
             echo $output;
         }
         ?>
     </div>

     <!-- Your site footer can go here -->
 </div>
</body>
</html>

Important elements in the template:

  • CSS and JavaScript inclusions: The template must include the CSS and JavaScript files that Image CRUD provides via the $css_files and $js_files variables.
  • Output display: The $output variable contains the HTML for the Image CRUD interface and must be echoed where you want the gallery to appear.

Save this template as app/Views/image_crud/template.php and reference it in your controller as shown in the examples above.

Configuration

You can customize Image CRUD by creating a configuration file at app/Config/ImageCrud.php:

<?php
namespace Config;

class ImageCrud
{
    public function getDefaultConfig() {
        helper('url');

        return [
            'default_language' => 'English',

            // This is the 'assets' folder where all the JavaScript, CSS, images and font files are located
            'assets_folder' => base_url() . '/vendor/image-crud/',

        ];
    }
}

Configuration Options

Option Description
default_language Sets the default language for Image CRUD interface elements
assets_folder Specifies the location of JavaScript, CSS, and other assets

Available Languages

  • Arabic
  • Dutch
  • English
  • German
  • Greek
  • Hungarian
  • Portuguese
  • Romanian
  • Russian
  • Spanish
  • Turkish
  • Ukrainian

Next Steps

Now that you have installed Image CRUD, you can proceed to the Documentation to learn how to implement it in your project.