Skip to content
A Symfony Bundle for Sulu content management platform containing boilerplate blocks
Branch: development
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
composer.json

README.md

Sulu block bundle

A Symfony Bundle for Sulu content management platform containing boilerplate blocks

1. Installation

Composer

composer require connectholland/sulu-block-bundle

Activation of the bundle

Add the bundle class to app/AbstractKernel.php in the registerBundles function

new ConnectHolland\Sulu\BlockBundle\ConnectHollandSuluBlockBundle()

2. Usage

Template

Add or adjust a page template file (be aware of adding xmlns:xi="http://www.w3.org/2001/XInclude")

<!-- app/Resources/templates/pages/default.xml -->
<?xml version="1.0" ?>
<template xmlns="http://schemas.sulu.io/template/template"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:xi="http://www.w3.org/2001/XInclude"
          xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">

    <key>default</key>

    <view>templates/default</view>
    <controller>SuluWebsiteBundle:Default:index</controller>
    <cacheLifetime>2400</cacheLifetime>

    <meta>
        <title lang="en">Default</title>
        <title lang="nl">Standaard</title>
    </meta>

    <properties>
        <!--
        <section name="highlight">
            <properties>
                <property name="title" type="text_line" mandatory="true">
                    <meta>
                        <title lang="en">Title</title>
                        <title lang="nl">Titel</title>
                    </meta>
                    <params>
                        <param name="headline" value="true"/>
                    </params>

                    <tag name="sulu.rlp.part"/>
                </property>

                <property name="url" type="resource_locator" mandatory="true">
                    <meta>
                        <title lang="en">Resourcelocator</title>
                        <title lang="nl">Adres</title>
                    </meta>

                    <tag name="sulu.rlp"/>
                </property>
            </properties>
        </section>

        <property name="article" type="text_editor">
            <meta>
                <title lang="en">Article</title>
                <title lang="de">Artikel</title>
            </meta>
        </property>-->

        <!-- Choose the same name as using in twig (see next paragraph) -->
        <block name="blocks" default-type="text" minOccurs="0">
            <meta>
                <title lang="en">Content</title>
                <title lang="nl">Inhoud</title>
            </meta>
            <types>
                <xi:include href="sulu-block-bundle://blocks/text.xml"/>
                <xi:include href="sulu-block-bundle://blocks/youtube.xml"/>
            </types>
        </block>

        <!-- Choose the same name as using in twig (see next paragraph) -->
        <block name="banners" default-type="text" minOccurs="0">
            <meta>
                <title lang="en">Banners</title>
                <title lang="nl">Banners</title>
            </meta>
            <types>
                <xi:include href="sulu-block-bundle://blocks/text.xml"/>
                <xi:include href="sulu-block-bundle://blocks/youtube.xml"/>
            </types>
        </block>
    </properties>
</template>

Twig

Add includes to your twig templates

{% block content %}
    <div vocab='http://schema.org/' typeof='Content'>
        <h1 property='title'>{{ content.title }}</h1>

        <div property='article'>
            {{ content.article|raw }}
        </div>

        {% include 'ConnectHollandSuluBlockBundle::html5-blocks.html.twig' %}
        {% include 'ConnectHollandSuluBlockBundle::html5-blocks.html.twig' with {element: 'aside', collection: 'banners'} %}
    </div>
{% endblock %}

Override twig templates

Put twig templates with the same name as the ones you want to override in app/Resources/ConnectHollandSuluBlockBundle. So if you want to override src/Resources/views/html5/parts/images.html.twig of this bundle, you should create the file app/Resources/ConnectHollandSuluBlockBundle/views/html5/parts/images.html.twig.

And if you only want to override certain blocks of the templates in this bundle, you can extend the base template by using the namespace @sulu-block-bundle.

For example like this:

{# app/Resources/ConnectHollandSuluBlockBundle/views/html5/parts/images.html.twig #}
{% extends "@sulu-block-bundle/html5/parts/images.html.twig" %}

{% block image_source %}{{ image.thumbnails['50x50'] }}{% endblock %}

3. Available blocks

  • Text with title (text)
  • Images with title (images)
  • Images with title and text (images_text)
  • Youtube video with title (youtube)
  • Link with title (link)

4. Adding additional properties

When using a block and you want to add additional properties, you can configure them separately in app/Resources/ConnectHollandSuluBlockBundle/templates/properties/{blockname}.xml. For instance, if you want to add a caption to the images block. You would create the following file in your client app:

<!-- app/Resources/ConnectHollandSuluBlockBundle/templates/properties/images.xml -->
<?xml version='1.0' ?>
<properties xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <property name='caption' type='text_line'>
        <meta>
            <title lang='en'>Caption</title>
            <title lang='nl'>Bijschrift</title>
        </meta>
    </property>
</properties>

5. Override params of a property

5.1 Fully override all params

When using a block and you want to choose all the params of the blocks properties yourself, you can configure them separately in app/Resources/ConnectHollandSuluBlockBundle/templates/params/{blockname}.xml. For instance, if you want to set all the params for the text editor property. You would create the following file in your client app:

<!-- app/Resources/ConnectHollandSuluBlockBundle/templates/params/text_editor.xml -->
<?xml version='1.0' ?>
<params xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <param name="link" value="true"/>
    <param name="paste_from_word" value="true"/>
    <param name="height" value="100"/>
    <param name="max_height" value="200"/>
</params>

5.2 Adjust params

When using a block and you want to change the params of the blocks properties, you can configure them separately in app/Resources/ConnectHollandSuluBlockBundle/templates/params/{blockname}_adjustments.xml. For instance, if you want to adjust the height and disable table functionality of the text_editor property. You would create the following file in your client app:

<!-- app/Resources/ConnectHollandSuluBlockBundle/templates/params/text_editor_adjustments.xml -->
<?xml version='1.0' ?>
<params xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <param name="height" value="200"/>
    <param name="table" value="false"/>
</params>

5.3 Add params

When using a block and you want to add params to the blocks properties, you can configure them separately in app/Resources/ConnectHollandSuluBlockBundle/templates/params/{blockname}_additions.xml. For instance, if you want to add ui_color param to the text_editor property. You would create the following file in your client app:

<!-- app/Resources/ConnectHollandSuluBlockBundle/templates/params/text_editor_additions.xml -->
<?xml version='1.0' ?>
<params xmlns='http://schemas.sulu.io/template/template'
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:schemaLocation='http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd'
    >
    <param name="ui_color" value="#ffcc00"/>
</params>
You can’t perform that action at this time.