Love Fuel?    Donate

FuelPHP Forums

Ask your question about FuelPHP in the appropriate forum, or help others by answering their questions.
How to deal with 3rd-party assets?
  • Hi,

    I do initialize my admin Theme like this:

    public function before()
    {
    parent::before();

    $this->theme = Theme::instance(
    '_default_',
    [
    'active' => 'default',
    'assets_folder' => 'admin/assets',
    'view_ext' => '.php',
    'paths' => [APPPATH . 'themes' . DS . 'admin']
    ]
    );

    $this->theme->set_template( 'templates' . DS . 'layout' );
    }

    I'm now able to load assets located in /admin/assets/default/ via Theme::instance()->asset('style.css', 'css');

    However, I'm having lots of 3rd party libraries and styles coming from package manager.

    image


    How can I deal with those and link them in my header?

    Currently I have defined BASEURL (Uri::base())  and link them link this:

    <link rel="stylesheet" href="<?= BASEURL ?>admin/assets/default/bower_components/bootstrap/dist/css/bootstrap.min
    .css">
    imageI wonder if I can still use assets instance in this case?
  • Yes, why not?

    Theme::instance()->asset('bower_components/bootstrap/dist/css/bootstrap.min.css', 'css');

    Should work fine.
  • I believe you have a typo right there. I forgot to mention that I have tried this one:

    Theme::instance()->asset->css('bower_components/bootstrap/dist/css/bootstrap.min.css')
    Getting following error:

    Fuel\Core\FuelException [ Error ]:
    Could not find asset: bower_components/bootstrap/dist/css/bootstrap.min.css
  • I just copied and pasted the file info from your post.

    If loading "styles.css" works, and that file is in /admin/assets/default, then the above will work, as long as a bootstrap.min.css file exists in /admin/assets/default/bower_components/bootstrap/dist/css. 

    And is readable by the webserver user.
  • Alright, my typo then.

    "styles.css" is placed in /admin/assets/default/css.

    Since assets directories are split according to file types - js, css and some more I believe.

    Logically, it doesn't have right to work since asset instance is searching /admin/assets/default/css. 

    Hence my thread :-)


    To make it work, I can add ../ at the beginning:

    Theme::instance()->asset->css('../bower_components/bootstrap/dist/css/bootstrap.min.css')

    However, it doesn't look nice in the source.
  • That can't really be helped, the Asset class needs to know where to find files of a certain type. If you have a system that puts assets in a different place you'll have to adapt your way of working.

    It is by design not to go looking for files, as that would slow down the application quite significantly,.

    What you can do, allthough a bit complex, is extend Asset_Instance, and define a new asset type "bower" (or something), and create a render_bower() method, that for example uses the file extension to internally call render_css() or render_js().
  • Isn't it possible to add another asset path to search? (or this is what you meant by saying that would slow down the application?)
  • Yes, that is not a problem.

    This issue is that everything is organized per asset type, so you have a "root path" and a renderer per type (css, js, etc). The Asset class is designed around this concept.

    But you have a path where everything is organised per "product", and directories have a mix of css and js files.

    You need to extend, and add something like this to the \Fuel\Core\Asset class:

    /**
     * Bower
     *
     * Add bower controlled assets
     *
     * @param    string    $type            Supported asset type.
     * @param    mixed   $files            The file name, or an array files.
     * @param    array     $attr            An array of extra attributes
     * @param    string    $group            The asset group name
     * @return     string
     */
    public static function bower($type, $files = array(), $attr = array(), $group = NULL)
    {
        // make sure it's an array
        $files = (array) $files;

        // loop over it to adjust the path
        foreach ($files as $file)
        {
            $result = static::instance()->assettype($type, '..'.DS.'bower_components'.DS.$file, $attr, $group);
        }
        
        // for compatibility
        return $result;
    }


    And then you can do this in your templates:

    Theme::instance()->asset->bower('css', 'bootstrap/dist/css/bootstrap.min.css')
    Theme::instance()->asset->bower('js', 'bootstrap/dist/js/bootstrap.min.js')


Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion