Documentation

Theme implementation

An Integrated theme can be implemented in any bundle.  A theme contains Twig views with:

  • Base layout(s)
  • Content type item views
  • Block views

When a view is not available in the theme it will default to the view provided by the default theme or the general default one. This will be a view with a basic Bootstrap based layout.

A theme can be used for multiple websites.

Directory structure

When a bundle contains a theme, the directory structure of it will look like:

- Resources
- - views
- - - themes
- - - - themename
- - - - - base.html.twig
- - - - - - blocks
- - - - - - - content
- - - - - - - - articles.html.twig
- - - - - - content
- - - - - - - Article
- - - - - - - - default.html.twig

Integrated will find base view, content item views and block views this way. Off course other directories and views can be added when needed in your application.

Using bootstrap

Integrated heavily relies on Bootstrap, because the its grid model allows column and block based page editing in any bootstrap based template. Using the Bootstrap frameworks also helps with a nice display of elements which have not been defined in the template, using Bootstrap the default view still looks fine. Use of the Bootstrap css in your base views is required.

Page editing

Integrated is able to provide page editing with blocks and columns. You have to define the area(s) which can be filled with blocks. In most situations this is the complete content area between the header and the footer, but you can define multiple areas as well.

Between all areas the the form need to be defined. Before the areas:

1
2
3
4
{% <strong>if </strong>form <strong>is </strong>defined %}
<em>    </em>{{ form_start(form) }}
     {{ form_errors(form) }}
 {% <strong>endif </strong>%}

To define an area (called "main"):

1
    {{ integrated_grid(<strong>'main'</strong>) }} 

After the areas:

1
2
3
4
5
6
{% <strong>if </strong>form <strong>is </strong>defined %}
<em>    </em>{{ form_row(form._token) }}
     {{ form_end(form, { <strong>'render_rest'</strong>: false }) }}
 
     {{ include(<strong>'IntegratedWebsiteBundle::handlebars.html.twig'</strong>) }}
 {% <strong>endif </strong>%}

Editable navigation menu

With an editable navigation menu users can edit the website navigation menu. You can define multiple navigation menus. A menu can be defined with:

1
<pre><span class="cp">{{</span> <span class="nv">integrated_menu</span><span class="o">(</span><span class="s1">'main'</span><span class="o">,</span> <span class="o">{</span> <span class="s1">'template'</span><span class="o">:</span> <span class="s1">'AppBundle:themes/mytheme:templates/main_menu.html.twig'</span> <span class="o">})</span> <span class="cp">}}</span></pre>

A menu view may look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<p class="p1"><span class="s1"><b>{%</b></span><span class="s2"> <b>extends</b> </span><span class="s3">'BraincraftedBootstrapBundle:Menu:bootstrap.html.twig'</span> <span class="s1"><b>%}</b></span>
 
<p class="p1"><span class="s1"><b>{%</b></span><span class="s2"> <b>import</b> </span><span class="s3">'BraincraftedBootstrapBundle:Menu:bootstrap.html.twig'</span> <span class="s4">as</span> <span class="s4">knp</span> <span class="s1"><b>%}</b></span>
 
<p class="p2"> 
 
<p class="p3"><span class="s1"><b>{%</b></span><span class="s3"> <b>block</b> </span><span class="s4">list</span> <span class="s1"><b>%}</b></span>
 
<p class="p4"><span class="s2"><span class="Apple-converted-space">    </span></span><span class="s1"><b>{%</b></span><span class="s2"> <b>if</b> </span><span class="s3">item.hasChildren</span><span class="s2"> <b>and</b> </span><span class="s3">options.depth</span><span class="s2"> <b>is</b> <b>not</b> </span><span class="s5"><b>sameas</b></span><span class="s2"><b>(</b></span><span class="s6">0</span><span class="s2"><b>)</b> <b>and</b> </span><span class="s3">item.displayChildren</span> <span class="s1"><b>%}</b></span>
 
<p class="p4"><span class="s2"><span class="Apple-converted-space">        </span></span><span class="s1"><b>{%</b></span><span class="s2"> <b>set</b> </span><span class="s3">listAttributes</span><span class="s2"> <b>=</b> </span><span class="s3">listAttributes</span><span class="s2"><b>|</b></span><span class="s5"><b>merge</b></span><span class="s2"><b>({</b> </span><span class="s7">'class'</span><span class="s2"><b>:</b> <b>(</b></span><span class="s3">listAttributes.class</span><span class="s2"><b>|</b></span><span class="s5"><b>default</b></span><span class="s2"><b>(</b></span><span class="s7">''</span><span class="s2"><b>)|</b></span><span class="s5"><b>trim</b></span><span class="s2"> <b>~</b> </span><span class="s7">' nav navbar-nav pull-left-md'</span><span class="s2"><b>)|</b></span><span class="s5"><b>trim</b></span><span class="s2"> <b>})</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p2"> 
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">        </span></span><span class="s1"><b>{%</b></span><span class="s3"> <b>if</b> </span><span class="s4">item.level</span><span class="s3"> <b>is</b> </span><span class="s5"><b>sameas</b></span><span class="s3"><b>(</b></span><span class="s6">0</span><span class="s3"><b>)</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p1"><span class="s2"><span class="Apple-converted-space">            </span></span><span class="s1"><b>{%</b></span><span class="s2"> <b>set</b> </span><span class="s4">listAttributes</span><span class="s2"> <b>=</b> </span><span class="s4">listAttributes</span><span class="s2"><b>|</b></span><span class="s5"><b>merge</b></span><span class="s2"><b>({</b> </span><span class="s3">'itemscope'</span><span class="s2"><b>:</b> </span><span class="s3">''</span><span class="s2"><b>,</b> </span><span class="s3">'itemtype'</span><span class="s2"><b>:</b> </span><span class="s3">'http://schema.org/SiteNavigationElement'</span><span class="s2"> <b>})</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">        </span></span><span class="s1"><b>{%</b></span><span class="s3"> <b>endif</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p2"> 
 
<p class="p4"><span class="s2"><span class="Apple-converted-space">        </span><</span><span class="s8">ul</span><span class="s1"><b>{{</b></span> <span class="s3">knp.attributes</span><span class="s2"><b>(</b></span><span class="s3">listAttributes</span><span class="s2"><b>)</b> </span><span class="s1"><b>}}</b></span><span class="s2">></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">            </span></span><span class="s1"><b>{{</b></span> <span class="s1">block</span><span class="s3"><b>(</b></span><span class="s7">'children'</span><span class="s3"><b>)</b> </span><span class="s1"><b>}}</b></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">        </span></</span><span class="s8">ul</span><span class="s3">></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">    </span></span><span class="s1"><b>{%</b></span><span class="s3"> <b>endif</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p3"><span class="s1"><b>{%</b></span><span class="s3"> <b>endblock</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p2"> 
 
<p class="p3"><span class="s1"><b>{%</b></span><span class="s3"> <b>block</b> </span><span class="s4">item</span> <span class="s1"><b>%}</b></span>
 
<p class="p4"><span class="s2"><span class="Apple-converted-space">    </span></span><span class="s1"><b>{%</b></span><span class="s2"> <b>if</b> </span><span class="s3">item.displayed</span> <span class="s1"><b>%}</b></span>
 
<p class="p4"><span class="s2"><span class="Apple-converted-space">        </span></span><span class="s1"><b>{%</b></span><span class="s2"> <b>set</b> </span><span class="s3">attributes</span><span class="s2"> <b>=</b> </span><span class="s3">item.attributes</span><span class="s2"><b>|</b></span><span class="s5"><b>merge</b></span><span class="s2"><b>({</b> </span><span class="s7">'class'</span><span class="s2"><b>:</b> <b>(</b></span><span class="s3">item.attributes.class</span><span class="s2"><b>|</b></span><span class="s5"><b>default</b></span><span class="s2"><b>(</b></span><span class="s7">''</span><span class="s2"><b>)|</b></span><span class="s5"><b>trim</b></span><span class="s2"> <b>~</b> </span><span class="s7">' nav-item'</span><span class="s2"><b>)|</b></span><span class="s5"><b>trim</b></span><span class="s2"> <b>})</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p2"> 
 
<p class="p4"><span class="s2"><span class="Apple-converted-space">        </span><</span><span class="s8">li</span><span class="s1"><b>{{</b></span> <span class="s3">knp.attributes</span><span class="s2"><b>(</b></span><span class="s3">attributes</span><span class="s2"><b>)</b> </span><span class="s1"><b>}}</b></span><span class="s2">></span>
 
<p class="p4"><span class="s2"><span class="Apple-converted-space">            </span><</span><span class="s8">a</span> <span class="s3">href</span><span class="s2"><b>=</b></span><span class="s7">"</span><span class="s1"><b>{{</b></span> <span class="s3">item.uri</span> <span class="s1"><b>}}</b></span><span class="s7">"</span> <span class="s3">class</span><span class="s2"><b>=</b></span><span class="s7">"nav-link"</span> <span class="s3">itemprop</span><span class="s2"><b>=</b></span><span class="s7">"url"</span><span class="s2">></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">                </span><</span><span class="s8">span</span> <span class="s4">itemprop</span><span class="s3"><b>=</b></span><span class="s7">"name"</span><span class="s3">></span><span class="s1"><b>{{</b></span> <span class="s1">block</span><span class="s3"><b>(</b></span><span class="s7">'label'</span><span class="s3"><b>)</b> </span><span class="s1"><b>}}</b></span><span class="s3"></</span><span class="s8">span</span><span class="s3">></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">            </span></</span><span class="s8">a</span><span class="s3">></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">        </span></</span><span class="s8">li</span><span class="s3">></span>
 
<p class="p2"> 
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">        </span></span><span class="s1"><b>{%</b></span><span class="s3"> <b>if</b> <b>not</b> </span><span class="s4">item.isLast</span><span class="s3"><b>|</b></span><span class="s5"><b>default</b></span> <span class="s1"><b>%}</b></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">            </span><</span><span class="s8">li</span> <span class="s4">class</span><span class="s3"><b>=</b></span><span class="s7">"navbar-divider"</span><span class="s3">></</span><span class="s8">li</span><span class="s3">></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">        </span></span><span class="s1"><b>{%</b></span><span class="s3"> <b>endif</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p3"><span class="s3"><span class="Apple-converted-space">    </span></span><span class="s1"><b>{%</b></span><span class="s3"> <b>endif</b> </span><span class="s1"><b>%}</b></span>
 
<p class="p3"><span class="s1"><b>{%</b></span><span class="s3"> <b>endblock</b> </span><span class="s1"><b>%}</b></span>