Download the PHP package pvtl/voyager-page-blocks without Composer
On this page you can find all versions of the php package pvtl/voyager-page-blocks. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package voyager-page-blocks
This repository is no longer actively maintained
Voyager Page Blocks
This Laravel/Voyager Frontend module is designed to give developers the ability to easily design page blocks, for Voyager admin users to build stunning frontend pages.
Built by Pivotal Agency.
Prerequisites
- Composer Installed
- Install Laravel
- Install Voyager
- Install Voyager Frontend
Installation
Creating & Modifying Blocks
Page blocks are created & configured in 2 steps:
- Define the block - in
/config/page-blocks.php
- Build the block's HTML layout - create the template in
/resources/views/vendor/voyager-page-blocks/blocks
1. Define a Block
Familiarize yourself with /config/page-blocks.php
. This is where you'll define each block - you'll tell it which fields the block should have (for the admin to manage) and which Blade template it should use on the frontend.
- Each array inside this configuration file is a page block
- Each block contains fields
- Each field contains a unique field key
- Each field is based on a Voyager Data Type
The below table explains what each property does and how it is relevant to the block itself:
Key | Purpose |
---|---|
Root key | This is the name of your page block, used to load the configuration |
name | This is the display name of your page block, used in the block 'adder' |
fields | This is where your page block fields live (text areas, images etc) |
fields => field | The content name of your field, used to store/load its content |
fields => display_name | The display name of this field in the back-end |
fields => type | The data row type that this field will use (check TCG\Voyager\FormFields ) |
fields => required | Self-explanatory, marks this field as required or not (not available for all partials) |
fields => placeholder | Self-explanatory, adds a placeholder to the field (not available for all partials) |
fields => details | Used for selects/checkboxes/radios to supply options |
template | This points to your blade file for your block template |
compatible | TBA |
2. Build the HTML
When you're ready to start structuring the display of your block, you'll need to create (or override our defaults) your blade template (located at /resources/views/vendor/voyager-page-blocks/blocks/your_block.blade.php
) and use the accessors you defined in your module's configuration file to fetch each fields data ({!! $blockData->image_content !!}
).
Example. Putting it all together
Let's say we want to create a new block with 1 WYSIWYG editor, called 'Company Overview'.
Step 1. Define the new block
In /config/page-blocks.php
, we'll add:
Step 2. Build the HTML
In /resources/views/vendor/voyager-page-blocks/blocks
, we'll create a new file called company_overview.blade.php
with:
Step 3. Add the block to a page
Next, jump into the Voyager Admin > Pages and click 'Content' next to a page. You'll now be able to select Company Overview
from the 'Add Block' section. Add the block to the page, drag/drop it into place, edit the text etc.
Developer Controller Blocks
You may also wish to include custom logic and functionality into your page blocks. This can be done with a Developer Controller Block - simply specify your controller namespace'd path and the method you wish to call, which should return a view and you'll be on your way.
For example, the Voyager Frontend package comes with a Recent Posts method/view that you can play with and review.
From the Add Block section of the page in the admin, add the block type of Developer Controller, then input the following into the path field:
This will output 2
blog posts on the frontend. You could change the first paramter of the method to 6, to output 6 blog posts. Simples.
Troubleshooting
It is important to sanitise your field output, null values will cause errors.
It is very important that you follow the naming scheme that is setup in the example page blocks as the keys reference other cogs in the system to stitch the blocks together. There are example blocks already set up in the resources/views
directory and configuration file for you to get started.