Assets group ignored #2477

drnasin · 2019-04-25T16:24:34Z

I'm trying to update to 1.6 but seems like assigning assets to groups doesn't work anymore.

I have this in base twig (html head)

 {% block javascripts %}
            {% do assets.addJs('theme://js/jquery.js', 100) %}
            {% do assets.addJs('theme://js/jquery.dropotron.js', {group:'bottom'}, 99) %}
            {% do assets.addJs('theme://js/browser.js', {group:'bottom'}, 98) %}
            {% do assets.addJs('theme://js/breakpoints.js', {group:'bottom'}, 97) %}
            {% do assets.addJs('theme://js/util.js', {group:'bottom'}, 96) %}
            {% do assets.addJs('theme://js/main.js', {group:'bottom'}, 95) %}
 {% endblock %}
 {{ assets.js() }}

and before the closing body tag I have

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

but all the generated script's are in the html head section.
Works like a charm in 1.5.10 ...

The text was updated successfully, but these errors were encountered:

rhukster · 2019-04-25T17:25:33Z

It's because you are missing the options param with an inline priority. Frankly, I'm surprised that it worked in 1.5. I can probably create a backward compatible use case for this, but in the meantime, it will be better to fix your references to use options-array format.

Should be like this:

{% do assets.addJs('theme://js/jquery.js', 100) %} // quick syntax with priority only
{% do assets.addJs('theme://js/jquery.dropotron.js', {group:'bottom', priority: 99}) %} // more flexible format that allows lots of options in ay order
...

drnasin · 2019-04-25T17:41:51Z

it works now. Yeah I'm also surprised it worked as this is something I use from day 1. Will have to update this across my sites as I have it in every base twig file.

rhukster · 2019-04-25T17:54:13Z

I've added a workaround, but this was one of those weird undocumented scenarios that worked before (although I think priority was being lost). Now it will work and keep priority. Although, that said, better to just use the full options array format.

axel-rank · 2019-04-26T07:56:51Z

In the header template of my modular theme i implemented a script that is executed after form submit showing a modal success box.

My header.html.twig:

<header>
    <div class="container">
        <div class="intro-text">
            {{ content }}
            {% for button in page.header.buttons %}
                <a class="btn btn-xl" href="{{ button.url }}">{{ button.text }}</a>
            {% endfor %}

            {% if form.message %}
<div id="danke" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="alert notices {{ form.message_color ?: 'green' }}"><p>{{ form.message|raw }}</p></div>
                <button type="button" class="close btn-lg" data-dismiss="modal" aria-hidden="true">&times;</button>
                
        </div>
    </div> 
</div>

{% endif %}
            {% set multipart = '' %}
            {% set method = form.method|upper|default('POST') %}
        </div>
    </div>

<script>
    $(document).ready(function(){
    $('#danke').modal('show');
}); $(document).ready(function(){
    $('#danke').on('hidden.bs.modal', function () {
    location.replace(location.pathname);
});
});
</script>

</header>

After the new GRAV deferred twig extension and theme updates (agency theme) this script is not processed anymore.
New Agency base.html.twig:

<!DOCTYPE html>
<html lang="{{ grav.language.getActive ?: grav.config.site.default_lang }}">
<head>
  {% block head %}
  <meta charset="utf-8" />
  <title>{% if header.title %}{{ header.title }} | {% endif %}{{ site.title }}</title>
  {% include 'partials/metadata.html.twig' %}
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="icon" type="image/png" href="{{ url('theme://img/favicon.png') }}" />
  {% endblock %}

  {% block stylesheets %}
    {% do assets.addCss('theme://css-compiled/global.css',100) %}
    {% do assets.addCss('theme://css/custom.css',100) %}
    {% do assets.addCss('theme://css/font-awesome.min.css',100) %}
    <link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='//fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href='//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
  {% endblock %}

  {% block javasripts %}
    {% do assets.addJs('jquery',{'priority':101,'group':'bottom'}) %}
    {% do assets.addJs('theme://js/bootstrap.min.js',{'priority':100,'group':'bottom'}) %}
    {% do assets.addJs('theme://js/jquery.easing.min.js',{'group':'bottom'}) %}
    {% do assets.addJs('theme://js/classie.js',{'group':'bottom'}) %}
    {% do assets.addJs('theme://js/cbpAnimatedHeader.js',{'group':'bottom'}) %}
    {% do assets.addJs('theme://js/agency.js',{'group':'bottom'}) %}
  {% endblock %}

  {% block assets deferred %}
    {{ assets.css()|raw }}
    {{ assets.js()|raw }}
  {% endblock %}
</head>
<body id="page-top" class="index">

  {% block header_navigation %}
    {% include 'partials/navigation.html.twig' %}
  {% endblock %}
  {% block body %}
    {% block content %}{% endblock %}
  {% endblock %}

  {% block footer %}
    {% include 'partials/footer.html.twig' %}
  {% endblock %}

  {% block javascripts_bottom %}
  {{ assets.js('bottom')|raw }}  
  {% endblock %}
</body>
</html>

If I change

{% do assets.addJs('jquery',{'priority':101,'group':'bottom'}) %}

to

{% do assets.addJs('jquery',{'priority':101,'group':'head'}) %}

or to

{% do assets.add('jquery',101) %}

then it's working again.

not working:

{% do assets.addJs('theme://js/jquery.js', 100) %} // quick syntax with priority only

rhukster · 2019-04-26T17:57:01Z

Are you saying jquery is not added to the head with:

{% do assets.addJs('theme://js/jquery.js', 100) %}

And you are sure you have a user/themes/your_theme/js/jquery.js file?

The syntax here:

{% do assets.add('jquery',101) %}

Does not have theme://js/ prefix because it's loading Grav's JS assets.

axel-rank · 2019-04-26T19:02:29Z

Ok, my fault. Using theme inheritance based on agency theme.
There is no jquery.js file. Only agency.js
So I'm better using

{% do assets.add('jquery',101) %}

to get my script working?
'group': 'bottom' is not working.

rhukster · 2019-04-26T19:13:20Z

Yup, use that. JQuery likes to be loaded in head.

rhukster added the evaluating label Apr 25, 2019

rhukster added a commit that referenced this issue Apr 25, 2019

Fixed Assets options array mixed with standalone priority #2477

f30334d

rhukster added fixed and removed evaluating labels Apr 25, 2019

rhukster closed this as completed Apr 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Assets group ignored #2477

Assets group ignored #2477

drnasin commented Apr 25, 2019

rhukster commented Apr 25, 2019

drnasin commented Apr 25, 2019

rhukster commented Apr 25, 2019

axel-rank commented Apr 26, 2019 •

edited

Loading

rhukster commented Apr 26, 2019 •

edited

Loading

axel-rank commented Apr 26, 2019

rhukster commented Apr 26, 2019

Assets group ignored #2477

Assets group ignored #2477

Comments

drnasin commented Apr 25, 2019

rhukster commented Apr 25, 2019

drnasin commented Apr 25, 2019

rhukster commented Apr 25, 2019

axel-rank commented Apr 26, 2019 • edited Loading

rhukster commented Apr 26, 2019 • edited Loading

axel-rank commented Apr 26, 2019

rhukster commented Apr 26, 2019

axel-rank commented Apr 26, 2019 •

edited

Loading

rhukster commented Apr 26, 2019 •

edited

Loading