Solved thread

This post is marked as solved. If you think the information contained on this thread must be part of the official documentation, please contribute submitting a pull request to its repository.

volt best layout skeleton

Hi , I want to build a website with a common templat e(like most modern Websites today) with volt:

header -> widget1 widget2

sidebar left -> widget1 widget2

content , -> widget1 widget2

sidebar right -> widget1 widget2

footer-> widget1 widget2

Even more complex.

Every widget gets content through components(plugins). I wonder whats the best approach to do this in an organized way. Using blocks and inheritance or partials. Any Idea is welcome. thx in advance

Ps. Big thx to all the phalcon developers



16.8k

http://docs.phalconphp.com/es/latest/reference/volt.html#partial-vs-include

There points out which command is better. Partial looks more dinamycally than include.

Anyway, I should do a block/partial per widget.



843

thx RompePC for your reply your reply is a bit short and does not explain exactly how to use block or partial the best (organized) way. Please more details when to prefer block or partials and how to organize them. Or if someone knows an example to look at would be nice =)



40.5k

I use partial instead of include because I find that include (and extend for that matter) doesn't work well with my modules/commons/views structure. I don't want to see four .. in each template path.



25.2k
edited Feb '15

Hi,

+1 for dschiessler.

To help you a bit, I would suggest you to create templates: 1column.volt, 2column.volt, blog.volt, gallery.volt, ... I think that it is faster to write some html/volt blocks than to code some complex behaviors ! then

// controller action
$this->view->setTemplateAfter('2column');
//code for getting $menu, $news->latest, $gallery

$this->view->setVars(array(
            'menu' => $menu,
            'latestNews' => $news->latest,
            'gallery' => $gallery
        ));

// in 2column.volt template

<div class="row">
    <div class="left">
        {{ partial("widget/navmenu", menu) }}
        {{ partial("widget/newslist", latestNews) }}
    </div>
    <div class="right">
        {{ partial("widget/gallery", gallery }}
    </div>
</div>

For a more generic way to handle your widgets in the view, you may try to pass collections of Widget objects to the view (one for each area of the template). Each Widget object could have a "type" (navmenu, newslist, gallery ...) and a "data" attribute ...



40.5k
Accepted
answer
edited Feb '15

You can also extend your Volt compiler to better suit your directory structure. I have my partials set to the Module partials directory and I also have project commons level partials that I access like the following: {{ common("noscript_warning") }}.

I added this Volt function:

$compiler->addFunction('common', function($partial) {
    return '$this->partial(\'../../../../common/views/partials/\' . ' . $partial . ')';
});

[edit] Unfortunately the extend feature is not very usable for me still. I think that its vital to at least use a partial for the boring head stuff.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--[if IE]><link rel="shortcut icon" href="{{url('assets/favicon.png')}}"><![endif]-->
  <!-- Windows 8 IE10+ "Metro" Start menu tiles 144x144 pixels -->
  <meta name="msapplication-TileColor" content="#D83434">
  <meta name="msapplication-TileImage" content="{{url('assets/favicon_windows_start.png')}}">
  <!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels -->
  <link rel="apple-touch-icon-precomposed" href="{{url('assets/favicon_apple_touch.png')}}">
  <!-- Firefox, Chrome, Safari, IE 11+ and Opera 96x96 pixels -->
  <link rel="icon" href="{{url('assets/favicon.png')}}">


843

thx very much dschissler,

i am still thinking about the way you described. I think i will do it close to this solution. But I still wonder , if there is an advantage of building the skeleton with %block ...% %endblock% and extend a base template.

And wonder if its a good habit to call a service from a partial for better organisation and flexiblity :),or call the different modules in a controller and pass the variables to the view. partial example: <h1>testpartial/h1>

<?php

$moduldata= $this->MyModul->giveData() ; ?>

{% for t20 in moduldate %}

* Name: {{ t20.id ~ t20.tag|e }}

{% endfor %}

Any idea thx in advance

You can also extend your Volt compiler to better suit your directory structure. I have my partials set to the Module partials directory and I also have project commons level partials that I access like the following: {{ common("noscript_warning") }}.

I added this Volt function:

```php $compiler->addFunction('common', function($partial) { return '$this->partial(\'../../../../common/views/partials/\' . ' . $partial . ')'; }); ```

[edit] Unfortunately the extend feature is not very usable for me still. I think that its vital to at least use a partial for the boring head stuff.

``` <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if IE]><link rel="shortcut icon" href="{{url('assets/favicon.png')}}"><![endif]--> <!-- Windows 8 IE10+ "Metro" Start menu tiles 144x144 pixels --> <meta name="msapplication-TileColor" content="#D83434"> <meta name="msapplication-TileImage" content="{{url('assets/faviconwindowsstart.png')}}"> <!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels --> <link rel="apple-touch-icon-precomposed" href="{{url('assets/faviconappletouch.png')}}"> <!-- Firefox, Chrome, Safari, IE 11+ and Opera 96x96 pixels --> <link rel="icon" href="{{url('assets/favicon.png')}}"> ```



40.5k

Now I'm setting the partials and layouts path at the common views folder and in the main action views path of the module I've added _base, _layouts and _partials. I'm adding the underscore so that there is no way for it to interfere with the action name. Since the action path is the root for extends and include I'm able to use include with a path like {% include "_partials/file.volt" %}



40.5k

Yes I'm also extending from a base view now in some cases. I still like having a separate head_init file in the common partials though and I just call this in the base view.

I devised a simple hack that can help out a lot:

view folder in module

index/
session/
...
_base/
_partials/
_layouts/

Using this approach you can have more flexibility with commons and module views. To extend now I just enter "_base/base.volt" because the main view path is set to the module view. So no .. necessary. Again partials are set to _partials and then I use {{ common("") }} to load common partial views.



843

Thx dschissler though i dont understand last comment. You have directory module/index/....? an example?



25.2k

And wonder if its a good habit to call a service from a partial for better organisation and flexiblity :),or call the different modules in a controller and pass the variables to the view

IMHO, second approach is what is called "best practices" in MVC application coding.

So, following your exemple, you should build $moduldata= $this->MyModul->giveData() ; in the controller and pass the $moduldata variable to the view



25.2k
edited Feb '15

I still wonder , if there is an advantage of building the skeleton with %block ...% %endblock% and extend a base template.

this will give you much more flexibility for managing your templates. You may use partials in your blocks

{% block footer %}
<div id="footer">
  <div class="span4">{{ partial("partials/footer", ['links': sponsorsLinks]) }}</div>
  <div class="span4">{{ partial("partials/footer", ['links': legalLinks]) }}</div>
  <div class="span4">{{ partial("partials/footer", ['links': webLinks]) }}</div>
</div>
{% endblock %}

// build $sponsorsLinks, $legalLinks, $webLinks in you BaseController for example


843

IMHO, second approach is what is called "best practices" in MVC application coding. So, following your exemple, you should build $moduldata= $this->MyModul->giveData() ; in the controller and pass the >$moduldata variable to the view

thanks le51, than I will do it this way..

I still wonder , if there is an advantage of building the skeleton with %block ...% %endblock% and extend a base template.

this will give you much more flexibility for managing your templates. You may use partials in your blocks

```php

{% block footer %} <div id="footer"> <div class="span4">{{ partial("partials/footer", ['links': sponsorsLinks]) }}</div> <div class="span4">{{ partial("partials/footer", ['links': legalLinks]) }}</div> <div class="span4">{{ partial("partials/footer", ['links': webLinks]) }}</div> </div> {% endblock %}

// build $sponsorsLinks, $legalLinks, $webLinks in you BaseController for example ```