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

Using Phalcon Assets from VOLT

Hello!

I have some doubts about the best way to make links to JavaScript libraries and CSS files. I have a template (base.volt):

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}{{ title }}{% endblock %}</title>
    <meta content="es" name="language">
    <link rel="stylesheet" href="{{ static_url('assets/bootstrap/css/bootstrap.min.css') }}">
    <script src="{{ static_url('assets/fontawesome/svg-with-js/js/fontawesome-all.min.js') }}"></script>
    <link rel="stylesheet" href="{{ static_url('css/base.css') }}">
    {% block extracss %}{% endblock %}
    <link rel="shortcut icon" type="image/x-icon" href="{{ static_url('img/favicon.ico') }}"/>
  </head>
  <body>
    {% include 'templates/navbar.volt' %}
    {% include 'templates/footer.volt' %}
    <main role="main" class="container">
      <div class="starter-template">
        {% block content %}{% endblock %}
      </div>
    </main>
    <script src="{{ static_url('assets/jquery/jquery.min.js') }}"></script>
    <script src="{{ static_url('assets/popper/popper.min.js') }}"></script>
    <script src="{{ static_url('assets/bootstrap/js/bootstrap.min.js') }}"></script>
    <script src="{{ static_url('js/base.js') }}"></script>
    <script>
      var base_uri = '{{ config.application.baseUri }}';
      var rewrite_uri = '{{ router.getRewriteUri() }}';
      var url = (base_uri+rewrite_uri).replace("//","/");
    </script>
    {% block extrajs %}{% endblock %}
  </body>
</html>

Doing this way I can use extra CSS and JS files in another volt file that extends from base.volt in this way:

{% block extrajs %}
  <script src="{{ static_url('assets/bootbox/bootbox.min.js') }}"></script>
></script>
{% endblock %}
{% block extracss %}
  <link rel="stylesheet" href="{{ static_url('css/forms-styles.css') }}">
 {% endblock %}

I think it's a mistake to use static_url method. Which is the best way? I want to optimize to the maximum possible with Phalcon.

By the way, is this the best way to link an image? <img class="img-fluid" src='{{ static_url('img/logo.png') }}'>

Thanks for your patience (I'm new at MVC) :-)

All the best.



13.8k

By the way, this:

    <script>
      var base_uri = '{{ config.application.baseUri }}';
      var rewrite_uri = '{{ router.getRewriteUri() }}';
      var url = (base_uri+rewrite_uri).replace("//","/");
    </script>

should I do that or move it to ControllerBase and use $this->view?



32.3k

Hi @falkdav you have to use Assets services

Good luck



125.8k

Typically I use the Assets service like @emiliodeg suggested. In the controller you can have as many calls to $this->assets->addJs('path/to/js/file'), or the equivalent addCss() method, as necessary. Then in your base template file, just call {{ assets.outputJs }} and all the necessary markup will be created.

As a sidenote, unless you've modified the sourcecode, you should be linking to CDN versions of those JS libraries.



13.8k
in reply to Dylan Anderson

Hi Dylan, thanks for commenting!

So, the right way is put them in the Controller and not in the volts templates?

Typically I use the Assets service like @emiliodeg suggested. In the controller you can have as many calls to $this->assets->addJs('path/to/js/file'), or the equivalent addCss() method, as necessary. Then in your base template file, just call {{ assets.outputJs }} and all the necessary markup will be created.

As a sidenote, unless you've modified the sourcecode, you should be linking to CDN versions of those JS libraries.



125.8k
Accepted
answer

I don't think there's one RIGHT way, but it's one way, and a way I personally think is pretty clean and easy.

My response was more intended to flesh out @emiliodeg 's answer than be a proper response to you.

So to properly respond to you, let me say that often I do pretty much what you've done in your example. I don't know what static_url() does, but I just use a configuration setting to point to the correct directory. I use this method for site-wide resources like Bootstrap or the application's CSS file.

Alternatively I use the Asset service for CSS and JS files that are relevant to only one controller or action, as it's simpler to just make a call to $this->assets->addCss() than mess around with trying to pass paths to resources up the the inheritance chain of many nested templates.

I wouldn't use the {% block extraCss %} technique, as that's basically exactly what the Assets service does. Replace those blocks with {{ assets.outputCss }}