Skip to main content
Version: 2024.1

Renderlet Editable

General

The renderlet is a special container which is able to handle every element in Pimcore (Documents, Assets, Objects). You can decide in your controller/action what to do with the element which is linked to the renderlet. So it's possible to make a multifunctional area in editmode where the editor can drop anything on it. A typical use-case would be to render product objects within a document.

Configuration

NameTypeDescriptionMandatory
controllerstringSpecify controller reference, e.g. App\Controller\FooController::myActionX
templatestringSpecify template
classNamestring or string[]Specify class name (if type object chosen) as single string or as string array
heightinteger or stringHeight of the renderlet in pixel or 'auto'
reloadboolReload document on change
titlestringAdd a title to the box in editmode
typestringThe type of the element assigned to the renderlet (document,asset,object)
widthintegerWidth of the renderlet in pixel
classstringA CSS class that is added to the surrounding container of this element in editmode

Optionally you can pass every parameter (with a scalar data type) you like to the renderlet which can be accessed in the configured controller with $request->get('yourKey').

Methods

NameReturnDescription
isEmpty()boolWhether the editable is empty or not.

In the configured Controller Action

In the target controller action, you get the following parameters which can be accessed by $request->get('key').

NameTypeDescription
idintegerThe id of the element assigned to the renderlet
typestringThe type of the element assigned to the renderlet (document,asset,object)
subtypestringThe subtype of the element assigned to the renderlet (folder, image, link, page, classname, ...)

If you have defined any custom parameters on the renderlet configuration you can access them also with $request->get('yourParam').

Example

The code below shows how to use renderlet to create gallery based on it.

Specify the Renderlet Editable in a Template

<section id="renderlet-gallery">
{{
pimcore_renderlet('myGallery', {
"controller" : "App\\Controller\\ContentController::myGalleryAction",
"title" : "Drag an asset folder here to get a gallery",
"height" : 400
})
}}
</section>

Now editors are able to put elements onto the renderlet in the editmode.

Renderlet gallery - editmodeRenderlet gallery - editmodeRenderlet gallery - editmode

Specify the Controller Action

#[Template('my-gallery.html.twig')]
public function myGalleryAction(Request $request): array
{
if ('asset' === $request->get('type')) {
$asset = Asset::getById((int) $request->get('id'));
if ('folder' === $asset->getType()) {
return [
'assets' => $asset->getChildren()
];
}
}

return [];
}

The action is responsible for validation and transferring assets to the view. Of course, to limit access to the renderlet, you can use the type configuration option as well.

Create View

Now you have to create the template file at: templates/content/my_gallery.html.twig

{% if assets %}
<div class="my-gallery">
{% for asset in assets %}
{% if asset is instanceof('\\Pimcore\\Model\\Asset\\Image') %}
<div class="gallery-row">
{{ asset.getThumbnail('myThumbnailName').getHTML()|raw }}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}

And the final view is like, below: Rendered renderlet - frontendRendered renderlet - frontendRendered renderlet - frontend

Editmode

Please be aware, that the renderlet itself is not editmode-aware. If you need to determine within the renderlet whether in editmode or not, you need to pass that parameter to the renderlet.

{{
pimcore_renderlet('myRenderlet', {
....
"editmode" : editmode
})
}}

Within the renderlet, you can access the editmode parameter as follows:

{% if editmode %}