Load CSS/JS assets with theme_url or do assets.JS/CSS

#1

Hello there.

I’m trying to customize the Future Imperfect theme, by HTML5Up to Grav, and the following happens to me:

If I use OPTION 1 …

{% block stylesheets %}
  {% do assets.addCss('theme://assets/css/main.css') %}
{% endblock %}

and the same happens with JS:

{% block javascripts %}
  {% do assets.addJs('theme://assets/js/main.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/breakpoints.min.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/browser.min.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/jquery.min.js', {group:'bottom'}) %}
  {% do assets.addJs('theme://assets/js/util.js', {group:'bottom'}) %}
{% endblock %} #}

The open menu effect with this option not working.

If I use OPTION 2 …

<link rel="stylesheet" href="{{theme_url}}/assets/css/main.css" />
<script src="{{theme_url}}/assets/js/jquery.min.js"></script>
<script src="{{theme_url}}/assets/js/browser.min.js"></script>
<script src="{{theme_url}}/assets/js/breakpoints.min.js"></script>
<script src="{{theme_url}}/assets/js/util.js"></script>
<script src="{{theme_url}}/assets/js/main.js"></script>

All works fine.

Moreover, if I inspect the code in Chrome or Firefox, the routes are same (<link href="/grav-admin2/user/themes/future2/assets/css/main.css" rel=“stylesheet”>, for example)

Why is this happening? What should I change?

Thanks in advance

Note: I’m making port of Future Theme from scratch, I’m not using the Grav theme in repository. Original theme where you can open menu effect https://html5up.net/uploads/demos/future-imperfect/

#2

@pmoreno , Are you working on a fresh install of the latest Grav v1.7.0-rc.20?

If so, did you add the |raw filter to the output of assets, like {{ assets.js('bottom') | raw }}?

Since Grav v1.7.0-rc.20 all output is auto-escaped for security reasons. When using |raw you are telling Twig the output is safe and should not be auto-escaped. This escaped code may look OK-ish in de dev console of the browser, but isn’t…

This is what is printed without the |raw filter:

&lt;script src=&quot;/user/themes/future/assets/js/skel.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/user/themes/future/assets/js/util.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/user/themes/future/assets/js/main.js&quot;&gt;&lt;/script&gt;;
#3

Hi @pamtbaau

I’m working in a Grav v1.6.31 (the latest) and my botton block is:

{% block bottom %}
   {{ assets.js('bottom')|raw }}
{% endblock %}

For example, with {% do assets.addJs(‘theme://assets/js/main.js’, {group:‘bottom’}) %}, the result in html is: <script src="/grav-admin2/user/themes/future2/assets/js/main.js">.

With <script src="{{theme_url}}/assets/js/main.js">, the result is same: <script src="/grav-admin2/user/themes/future2/assets/js/main.js)">.

However, with the second options all works fine and the first option doesn’t work.
I have not any idea what happens in this case.

I’ll continue to investigate this issue.

#4

@pmoreno, Can I have a look at your repo?

#5

I have not repo yet. The theme ported to Grav is still in a very early stage. I will try to create one in the next few days.

Thanks @pamtbaau for you interest.

#6

@pmoreno, After looking at the repo, it appears to be an issue of the order in which javascripts were loaded using the Asset Manager. jQuery was being loaded after the other scripts needed it and errors showed up in the dev-console of the browser.

Updating the order in which javascripts are being added to the Asset Manager solved the issue.

#7

Thanks so much @pamtbaau.

Your solution works fine.