We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.

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



33.8k

https://docs.phalcon.io/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.



1.6k

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 =)



43.9k
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 ...



1.6k

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:

$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')}}">


1.6k

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



43.9k

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



43.9k
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


1.6k

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


{% 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