2

I would like to add async to script tags coming from here <jdoc:include type="head" />.

I have done some research and I found a few solutions, however those are for custom scripts.

I managed to find a workaround by editing the core file HeadRenderer.php located in [root]/libraries\src\Document\Renderer\Html and directly adding the async attribute, but It doesn't feel quite right.

Is it possible to add async and media="all for Joomla core scripts and css, such as templates/system/css/general.cssand media/jui/js/jquery-migrate.min.js?06b66bce294749c101f79cb21aac7ace?

So my question is:

Is there any way to either override the head core file or adding async from my index.php file?

Improve this question

2 Answers 2

Reset to default
2

You'd better not edit ("core hack") Joomla's core files because that's a recipe for disaster.

The async attribute is available if you use the HTMLHelper to include your CSS file. See Joomla 3.9.19 /libraries/src/HTML/HTMLHelper.php line 687 for how to write a <link> element to load a CSS file and it's documentation.

// Namespace to include HTMLHelper
use Joomla\CMS\HTML\HTMLHelper;

// Add the template.css stylesheet to the <head>
HTMLHelper::_(
    'stylesheet',
    'template.css',
    ['version' => 'auto', 'relative' => true],
    ['async' => 'async']
);
Improve this answer
3
  • 1
    And for JavaScript check the same file a few lines down (line 665) for the HTMLHelper script method.
    – pe7er ♦
    Commented Jun 24, 2020 at 14:34
  • 2
    Just an FYI that the async attribute doesn't do anything on a <link> element, which HTMLHelper::_('stylesheet'...); generates. However it will work on <script>. In Joomla 3, you're going to have to override the Styles Renderer to preload CSS files or create a plugin
    – Lodder
    Commented Jun 24, 2020 at 16:36
  • Yeah I noticed that too, thank you. I need for both to be honest. I'm trying onload("this.media='all'") for <link>
    – Thiago Guimarães
    Commented Jun 24, 2020 at 16:39
1

If you want to add attributes to all scripts, use a system plugin with onBeforeCompileHead event.

defined('_JEXEC') or die;

use Joomla\CMS\Plugin\CMSPlugin;

class PlgSystemExample extends CMSPlugin
{
    protected $app;

    public function onBeforeCompileHead()
    {
        foreach ($this->app->getDocument()->_scripts as &$script)
        {
            $script['async'] = true;
        }
    }
}

Is there any way to either override the head core file or adding async from my index.php file?

Although similar code can be added to the template file, it will not affect modules because they are rendered after the template has been parsed. As well as some plugins which add assets during onBeforeRender or onBeforeCompileHead events.

Improve this answer
2
  • Thank you for your answer. I will keep that in mind. For now Peter's solution fits better in my case but your answer is also helpful.
    – Thiago Guimarães
    Commented Jun 24, 2020 at 15:29
  • By the way, I also used your solution. By adding: foreach($this->app->getDocument()... and it's worked out. Thank you once again.
    – Thiago Guimarães
    Commented Jun 24, 2020 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.