Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/labor-digital/typo3-page-layout-form-element
A TYPO3 Extension which allows to create backend form elements that allow a page layout for their content
https://github.com/labor-digital/typo3-page-layout-form-element
Last synced: about 1 month ago
JSON representation
A TYPO3 Extension which allows to create backend form elements that allow a page layout for their content
- Host: GitHub
- URL: https://github.com/labor-digital/typo3-page-layout-form-element
- Owner: labor-digital
- License: apache-2.0
- Created: 2020-06-30T18:38:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-01T20:24:52.000Z (over 2 years ago)
- Last Synced: 2024-11-08T00:23:59.543Z (about 2 months ago)
- Language: PHP
- Size: 138 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# TYPO3 - Page Layout Form Element
This package adds a new form element preset to your TYPO3 TCA configuration, which allows you to add content elements to every record. It utilizes hidden pages
to provide you a complete page layout GUI.
## Requirements
- TYPO3 v10
- TYPO3 - Better API
- Installation using Composer
## Known issues
- This extension is NOT tested with workspaces, and will probably not work correctly.
- A record that contains the content field has to be saved, before the content elements can be created.
(This is, because otherwise I would create lots of orphan pages)
## Installation
Install this package using composer:
```
composer require labor-digital/typo3-page-layout-form-element
```
## Usage
#### Configuring the TCA
You should read up on creating TCA definitions using the Better API bundle to use this package.
After that go to your table configuration class and add a new field using the pageLayout() form preset:
```php
getType();
$type->getField('content')->applyPreset()->pageLayout();
}
}
```
#### Adding content elements
After adding the preset, make sure to clear the caches, update your SQL Database and open the record. If you created a new record, please save the record at
least once, before you go on further. You enable the content element page using the "enable elements" button. This will automatically create a "hidden" page in
the background and render the preview inside an iframe at the same spot.
#### Extending the Model
To use the content elements in your frontend you should probably start with adding a new property to your records model.
```php
content;
}
}
```
#### Rendering the contents in FLUID (optional)
After you extended your model you can use the built-in viewhelper to render the content elements in fluid. For that pass the instance of your model into your
fluid view using ```$view->assign('yourModel', $model);```
And then extend your template like so:
```html
{yourModel.content}
```
#### Using [Frontend API](https://github.com/labor-digital/typo3-frontend-api)
The page layout form element comes with built-in support for the frontend api extension. You don't have to take care of anything, just create the resource for
your model and make sure you add the "?include=content" parameter to your query when requiring the records from the API and you are all set.
To enable the integration make sure your api configuration registers the page layout resource bundle.
```php
register(PageLayoutBundle::class);
}
public static function registerResources(ResourceCollector $collector,SiteConfigContext $context) : void{ }
public static function configureSite(ApiConfigurator $configurator,SiteConfigContext $context) : void{ }
}
```
#### using [~~Vue Framework~~](https://github.com/labor-digital/typo3-vue-framework)
**The vue framework is now deprecated, as a new version is developed and build on top of nuxt, this is here for legacy reasons, this documentation is valid to
v9 of this bundle**
As the official framework to our frontend API bundle, the vue-framework also has built-in support for the page layout form element. After you added the resource
of your model you can either load your record using the initial state query or via the resource api.
In your vue component you can then handle the layout like any other data. Let's say you have a content element controller like this, that defines a initial
state query for a single element:
```php
setInitialStateQuery('myModel', [
'id' => $context->getRequest()->getQueryParams()['id'],
'include' => ['content'],
]);
}
}
```
Now you can do the following in your vue component to render the content element list:
```vue
import {ContentElementContext} from '@labor-digital/typo3-vue-framework/lib/Core/Context/ContentElementContext';
export default {
name: 'Dummy',
props: {
// The context gets automatically injected
context: null as ContentElementContext
},
};
```
## Postcardware
You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning
which of our package(s) you are using.
Our address is: LABOR.digital - Fischtorplatz 21 - 55116 Mainz, Germany
We publish all received postcards on our [company website](https://labor.digital).