How to include live-preview in my template? =========================================== Sulu provides a powerful live-preview system which can be used by every website theme. But as a prerequisite the template has to be adapted a little bit. Quick Example ------------- The preview-system relies on the schema definition from `RDFA `_. This standard allows you to add information about the content in the html structure without maintaining another file. The following example is a very basic template implementation which is able to be updated by sulu. **template.html.twig** .. code-block:: twig {% extends "::master.html.twig" %} {% block content %}

{{ content.title }}

{% endblock %} **master.html.twig** .. code-block:: twig {{ content.title }} {% block content %}{% endblock %} **page.xml** .. code-block:: xml This page consists of a single title and a url. The template is quite basic but includes the RDFa attribute `property="title"` to tell sulu that the title is rendered in this container. When the title of the page will be updated in the content form the admin will send this change to the server where the twig block `content` will be rendered. The server response contains only the part which was changed (indicated by `property="title"`). Back in the javascript application the preview on the right will update the container which is marked with the particular property. This process ensures a quite good performance (as good as the rendering on the server side) and minimizes the load of the requests. Supported RDFa features ----------------------- To see a full example of the syntax take a look in the `example.html.twig ` file. Links ***** For links you can use the href-attribute which will also be updated if the mentioned property was changed. .. code-block:: twig {{ content.link.title }} Images ****** To update an image you can simply use the src-attribute when the mentioned property has changed .. code-block:: twig {{ image.title }} Multiple values *************** For multiple values simply use table, ul, ol or div tags and the content will be updated if the mentioned property was changed. .. code-block:: twig Snippets ******** For the snippet content-type all the selected snippets has to be updated. Therefore you only have to set the upper property. .. code-block:: twig
{% for snippet in content.snippets %}

{{ snippet.title }}

{% endfor %}
Smart-Content ************* Smart-Content will be handled like other properties. You only have to define the property name (in this example `similar_pages`). .. code-block:: twig Single-Internal-Link ******************** For rendering single-internal links you can use the :doc:`../bundles/markup/index`. This example will place the title of the page in the content of the anchor tag. .. code-block:: twig Blocks ****** Blocks are the only property-type which needs a different syntax beside the `property` attribute. .. code-block:: twig
{% for block in content.blocks %}
{{ block.title }}
{% endfor %}
You have to define the `property="blocks"` as `typeof="collection"` and each item of the block as `typeof="block"` and set the relation to the parent property, in this case "blocks". With these definitions the system is able to update only the `title` of the first block item and doesn't have to return the entire container of the block-property in the response.