PHPackages                             snowsoft/oapage-designer - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. snowsoft/oapage-designer

ActiveLibrary[Admin Panels](/categories/admin)

snowsoft/oapage-designer
========================

Page designer for open admin

0.01(2y ago)05MITPHPPHP >=7.0.0

Since Oct 2Pushed 2y agoCompare

[ Source](https://github.com/snowsoft/oapage-designer)[ Packagist](https://packagist.org/packages/snowsoft/oapage-designer)[ Docs](https://github.com/snowsoft/oapage-designer)[ RSS](/packages/snowsoft-oapage-designer/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

PageDesigner for Open-admin
===========================

[](#pagedesigner-for-open-admin)

Freely position items on a page and edit their content.

[![StyleCI](https://camo.githubusercontent.com/a4961887fa462bb05039f78219d9bc9a0525d7ea55400277a2beea790a364a4d/68747470733a2f2f7374796c6563692e696f2f7265706f732f3530333839333236392f736869656c643f6272616e63683d6d61696e)](https://styleci.io/repos/503893269)[![Packagist](https://camo.githubusercontent.com/ebebb3efc1d339770205cf28bb9e9afbf0e33913852875ae1b9ce8ae5f18e940/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6f70656e2d61646d696e2d6f72672f706167652d64657369676e65722e7376673f7374796c653d666c61742d73717561726526636f6c6f723d627269676874677265656e)](https://packagist.org/packages/open-admin-ext/page-designer)[![Total Downloads](https://camo.githubusercontent.com/641453e20e3dec60c98c3e1571e49e2c7f90551aa07f87bdb3593949bf78da94/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f70656e2d61646d696e2d6578742f706167652d64657369676e65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/open-admin-ext/page-designer)![Pull request welcome](https://camo.githubusercontent.com/25f2db1404306d6dc01b1ac6e8c70f5f397ea8043dd9584d8dc4bc31b8bfea59/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f70722d77656c636f6d652d677265656e2e7376673f7374796c653d666c61742d737175617265)

Screenshot
----------

[](#screenshot)

[![extention-page-designer](https://user-images.githubusercontent.com/86517067/173943033-9234fe5a-273f-4383-84a1-d2f38120c3bf.png)](https://user-images.githubusercontent.com/86517067/173943033-9234fe5a-273f-4383-84a1-d2f38120c3bf.png)

Installation
------------

[](#installation)

### 1) Terminal

[](#1-terminal)

```
$ composer require open-admin-ext/page-designer

$ php artisan admin:import page-designer

$ php artisan vendor:publish --tag=page-designer

$ php artisan migrate

```

### 2) Add Routes

[](#2-add-routes)

Add admin routes in App/Admin/routes.php

```
$router->resource('page-designer', PageDesignerController::class);
$router->resource('page-designer-images', PageDesignerImagesController::class);
$router->resource('page-designer-videos', PageDesignerVideoController::class);
$router->resource('page-designer-texts', PageDesignerTextController::class);
$router->resource('page-designer-inline-galleries', PageDesignerInlineGalleryController::class);
$router->resource('page-designer-embeds', PageDesignerEmbedController::class);
```

Add front-end routes in routes/web.php

```
use App\Http\Controllers\PageDesignerController;

Route::get('/page/{id}', [PageDesignerController::class, 'index'])->name('page-designer');
```

### 3) Check it out

[](#3-check-it-out)

App\\Controllers\\PageDesignerController.php

Now in the form section you see.

```
$form->pagedesigner('data', __('pageDesign'));
```

##### For the front-end:

[](#for-the-front-end)

Go to your-app-url/page/{id} and see how it look you can alter the look by changing resources/views/page\_designer.blade.php

Options
-------

[](#options)

```
// set snap
$form->pagedesigner('data', __('pageDesign'))->snap(30);
```

Adding new items to the PageDesigner
------------------------------------

[](#adding-new-items-to-the-pagedesigner)

The PageDesigner automaticly scans the `Admin/Controllers` directory to see if there are controller with `PageDesignItem` trait.

You can generate an AdminController like you normaly would (Tip: use the helper plugin), then you can add the following code below.

Lets say you like an quote item to add to your PageDesigner after you create the controller. Alter it to look like this:

```
use OpenAdmin\Admin\PageDesigner\Traits\PageDesignItem;

class PageDesignerQuoteController extends AdminController
{
    use PageDesignItem;

    public function __construct()
    {
        $this->initPageDesignItem();
    }

    public static function pageDesign()
    {
        return [
            'parent_field'=> 'page_id',
            'type'        => 'quote',
            'title'       => 'quote',
            'icon'        => 'icon-quote-right',
            'model'       => "\App\Models\PageDesignerQuote",
        ];
    }

    // this part renders the content part of the item
    // the rendering on the frond-end is seperate, but offcourse you can let them share styles
    public static function pageDesignScripts()
    {
        return