clevyr / backpack-page-builder
Clevyr Page Builder for Backpack
Installs: 1 583
Dependents: 0
Suggesters: 0
Security: 0
Stars: 7
Watchers: 16
Forks: 2
Open Issues: 1
Requires
- backpack/crud: ^6.1
- backpack/permissionmanager: ^7.0
- intervention/image: ^2.5
This package is auto-updated.
Last update: 2024-11-04 20:58:41 UTC
README
Prerequisite
Laravel Backpack must be installed
- Laravel 7
- PHP 7.4
- GD or Imagick for Image Intervention
Table of Contents
Installation
Run composer require clevyr/backpack-page-builder
This will install the Page Builder and the https://github.com/Laravel-Backpack/PermissionManager package
This will install Image Intervention http://image.intervention.io/getting_started/introduction
To install the Page builder run the following command, this will install the Permissions Manager and the Page Builder
Run php artisan pagebuilder:install
Update the config -> backpack -> base.php
file
'guard' => 'backback',
to
'guard' => config('auth.defaults.guard'),
Run composer dump-autoload
Seed the permissions
Run php artisan db:seed --class=PageBuilderSeeder
Update resources -> views -> vendor -> backpack -> base -> inc -> sidebar_content.blade.php
file with
@canany(['View User List', 'View Role List', 'View Permission List']) <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-users"></i> Authentication</a> <ul class="nav-dropdown-items"> @can('View User List') <li class="nav-item"><a class="nav-link" href="{{ backpack_url('user') }}"><i class="nav-icon la la-user"></i> <span>Users</span></a></li> @endcan @can('View Role List') <li class="nav-item"><a class="nav-link" href="{{ backpack_url('role') }}"><i class="nav-icon la la-id-badge"></i> <span>Roles</span></a></li> @endcan @can('View Permission List') <li class="nav-item"><a class="nav-link" href="{{ backpack_url('permission') }}"><i class="nav-icon la la-key"></i> <span>Permissions</span></a></li> @endcan </ul> </li> @endcanany @can('View Page List') <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"> <i class="nav-icon la la-folder"></i> Pages </a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="{{ backpack_url('pages') }}"> <i class="nav-icon la la-address-book"></i> <span> Manage </span> </a> </li> </ul> </li> @endcan
Update app -> User.php
with
... use Backpack\CRUD\app\Models\Traits\CrudTrait; use Spatie\Permission\Traits\HasRoles; ... class User extends Model { ... use CrudTrait; use HasRoles; ... }
Create a super admin
Run php artisan pagebuilder:user
Run with parameters
php artisan pagebuilder:user --name=Name --email=email@example.com --password=password
Page Development
Syncing pages
Navigate to pages -> manage
Click the sync icon in the bottom right, this will load in static pages (Every folder that is not the dynamic folder) and it will reload the page
You also have the option to sync them from the command line with the following command
php artisan pagebuilder:sync
Editing static pages
Navigate to the page management page and click edit on the homepage
Page Settings
Name: Page name, admin functionality only, does not affect the functionality of the page's at all
Title: Page title, also generates the slug as you type
Slug: Slug of the page
View: Page view
Page Content
The page content populates with a list of sections, and their fields which you can edit.
Editing Dynamic pages
See Editing Static Pages for a run down of Page Settings and Page Content
- Page Layout
Note - You can only use the Page Layout tab if you are working with a dynamic page
Sections list
A list of dynamic sections will be displayed, you can click them to add them to the Content Section
Content Section
The content section displays the sections that will be available to edit on the page
You will not be able to edit the content until you save the page
Creating pages
Pages are located at resources -> views -> pages
each folder is considered as the page, with the contents inside
the folder dictating what view / sections are available
Contents
- Sections - Holds each individual section for that view
- config.php - Holds the configuration for the page sections
- index.blade.php - Is the view of the page
Note - Pages sections will not sync if there is not a .blade
file inside the sections directory and
a config property inside the config.php
Generating Pages
To generate a new page run the following command
php artisan pagebuilder:page page
with page being the name of the new page
This will create a folder with the page name with the following structure
- page
- index.blade.php
- config.php
- sections
- default.blade.php
Sections
The sections
folder holds the .blade
files that correspond to the section key in the config.php
Using data inside a section
You have access to the $sections
variable which is an anonymous function that returns
the field data from the section name
and the field title
<h1> {{-- default: section name, title: field name --}} {{ $sections('default', 'title') }} <br /> <small> {{ $sections('default', 'sub-title') }} </small> </h1> {!! $sections('default', 'content') !!}
config.php
The config.php
holds the configuration of the page sections.
Each section holds a list of backpack crud fields https://backpackforlaravel.com/docs/4.1/crud-fields
any field, including custom fields will be available to be used inside the config.
Example config
<?php return [ 'default' => [ // Section name, the blade file for the section's name must be the same as this key 'is_dynamic' => true, // Defaults to false, if this is set it will be available to be used in dynamic pages 'title' => [ // Field name 'type' => 'text', // crud field type 'name' => 'title', // crud field name 'label' => 'Title' // crud field label // ... Any other crud field properties ], 'sub-title' => [ 'type' => 'text', 'name' => 'sub-title', 'label' => 'Sub Title' ], 'content' => [ 'type' => 'wysiwyg', 'label' => 'Content', 'name' => 'content', ], ], ];
index.blade.php
The index.blade.php
is the view file for the page and it's sections.
Example index.blade.php
<div> @include('pages.homepage.sections.default') </div>
Development
Submitting Changes
Please push your changes to a new branch before submitting a PR
Setting up local package development
- Within the root of an existing Laravel Backpack project, clone this project to
./packages/clevyr/backpack-page-builder
- Add the following to your composer.json
"repositories": [ { "type": "path", "url": "./packages/clevyr/backpack-page-builder", "options": { "symlink": true } } ],
- Add
clevyr/backpack-page-builder
to your list of requires in yourcomposer.json
like below:
"require": { ... "clevyr/backpack-page-builder": "dev-master", ... }
- Run
composer require clevyr/backpack-page-builder