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

Getting started with volt - rookie question

Hi all, just trying to get going with Phalcon and Volt. Can't seem to get default views to load. The project was made using create-project with the tools. So I have a services,php which give me:

$di->set('view', function () use ($config) {

    $view = new View();

    $view->setViewsDir($config->application->viewsDir);

    $view->registerEngines(array(
        '.volt' => function ($view, $di) use ($config) {
            $volt = new VoltEngine($view, $di);
            $volt->setOptions(array(
                'compiledPath' => $config->application->cacheDir,
                'compiledSeparator' => '_'
            ));

            return $volt;
        },
        '.phtml' => 'Phalcon\Mvc\View\Engine\Php'
    ));

    return $view;
}, true);

and a controller like so:

class IndexController extends ControllerBase
{
    public function indexAction()
    {

    }
}

and a file in the views folder called index.volt, which contains the old "You're now flying .. ' text. Trouble is I get a blank screen if I try to hit localhost/myapp. However if I create a file called index.phtml, all is cool.

My config.php looks like this 

return new \Phalcon\Config(array(
    'database' => array(
        'adapter'     => 'Mysql',
        'host'        => 'localhost',
        'username'    => 'root',
        'password'    => '',
        'dbname'      => 'test',
    ),
    'application' => array(
        'controllersDir' => __DIR__ . '/../../app/controllers/',
        'modelsDir'      => __DIR__ . '/../../app/models/',
        'viewsDir'       => __DIR__ . '/../../app/views/',
        'pluginsDir'     => __DIR__ . '/../../app/plugins/',
        'libraryDir'     => __DIR__ . '/../../app/library/',
        'cacheDir'       => __DIR__ . '/../../app/cache/',
        'baseUri'        => '/ptut/',
    )
));

Should there be something about views in there?

Thanks for any pointers. Mark



33.8k

...However if I create a file called index.phtml, all is cool.

If you are trying to automatically load the index.volt file with an action of the same name, you can't. You've to create a phtml file for that action. Later, in the file, you use Volt.

(PD: put compileAlways = true in the setOptions so you don't have headaches with the things you see in the views)



972
edited Sep '14

OK. Thanks for the reply

Later, in the file, you use Volt.

So, the phtml file loads the Volt template? Could you please give a simple example? Couple of line and I'll be .... er..... flying ;-)

Or is simply a question of using the volt {{{% endraw %{% raw %}}}} syntax within a phtml file? If so, how are the .volt files used?



33.8k

Did you use Twig? Well, Volt is the same in everything (except the name xD)



98.9k

.phtml files load the PHP template (Phalcon\Mvc\View\Engine\Php) and .volt files load Volt files (Phalcon\Mvc\View\Engine\Volt)



972

Thanks. That's pretty much what I'd gathered, but RompePC's answer above suggests you can't automatically spin up a view called index.volt based on an action with the same name - like there has to be phtml file. I'm probably being very thick...If the phtml is the first port of call, how does it load the volt file. I'm missing something here...:(



33.8k
Accepted
answer

nameYouWant.volt

<!DOCTYPE html>
    <head>
    ...
    </head>
    <body>
        <h1>You're flying with Phalcon!</h1>
        {% block content %}{% endblock %}
    </body>
</html>

index.phtml

{% extends "your/path/starting/from/views/folder/nameYouWant.volt" %}

{% block content %}
    <h2>And it's so great!</h2>
{% endblock %}

When you call your index.phtml the result will be:

<!DOCTYPE html>
    <head>
    ...
    </head>
    <body>
        <h1>You're flying with Phalcon!</h1>
        <h2>And it's so great!</h2>
    </body>
</html>


972

The light goes on.. I just couldn't see how the phtml linvoked the volt. Thank you.



972

OK, progress ... of sorts.
My index.volt is thus:

<!DOCTYPE html>
<head>
    ...
</head>
<body>
<h1>You're flying blind ...</h1>
{% block content %}{% endblock %}
</body>
</html>

My index.phtml is thus:

{% extends "views/index/index.volt" %}

{% block content %}
<h2>And it's so great!</h2>
{% endblock %}

and in my index.php, I have this for views

    $di->set('view', function() {

        $view = new \Phalcon\Mvc\View();

        $view->setViewsDir('../app/views/');

        $view->registerEngines(array(
            ".volt" => 'Phalcon\Mvc\View\Engine\Volt',
            ".phtml" => 'Phalcon\Mvc\View\Engine\Volt'

        ));

        return $view;
    });

I added the ".phtml" => 'Phalcon\Mvc\View\Engine\Volt' having looked at the examples on the Volt tutorial page.

What I'm seeing is the output from the .volt file but NOT the phtml file. I suspect my extends directive is possibly wrong....



972

Got it working...

   $di->set('view', function() {

        $view = new \Phalcon\Mvc\View();
        $view->setViewsDir('../app/views/');

        $view->registerEngines(array(
            ".phtml" => 'Phalcon\Mvc\View\Engine\Volt',
            ".volt" => 'Phalcon\Mvc\View\Engine\Volt',

        ));

        return $view;
    });

Spot the difference ? .... phtml first.



33.8k

Spot the difference ? .... phtml first.

Nope, I've it in the opposite order and works perfectly. Use a separate folder under views (like templates), and place inside the volt files.

Later, set the .phtml so you can create a compiled views folder (or else it will create the compiled views in the same folder were the action view lies).



33.8k

Spot the difference ? .... phtml first.

Nope, I've it in the opposite order and works perfectly. Use a separate folder under views (like templates), and place inside the volt files.

Later, set the .phtml so you can create a compiled views folder (or else it will create the compiled views in the same folder were the action view lies).