Forums

CSS Asset Loading (5.7.3)

Permalink
Hello!
Currently i´am developing a new Theme for 5.7.
I want to load the CSS files with the (AssetList::getInstance())->register() Method.
I have this Code in the on_start() routine in my Package Controller

(($cdn['load_from_cdn']) ?
    $al->register('css', 'owlcarousel', '//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css', array('position'=>Asset::ASSET_POSITION_HEADER, 'local' => false, 'version' => '1.3.2'), $this)
:
    $al->register('css', 'owlcarousel', 'themes/porto/vendor/owlcarousel/owl.carousel.css', array('position'=>Asset::ASSET_POSITION_HEADER, 'local' => true, 'version' => '1.3.2'), $this));


This works and outputs:

<link href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all">


Problem: In my case i need the media="screen" attribute but i cant find a way to change the value.

---------------------

My second Problem are files that only loads for IE. For example:

<!--[if lte IE 8]>
    <script src="/5.7.3/packages/porto/themes/porto/vendor/respond/respond.js"></script>
<![endif]-->



I can not find a solution for adding this files with that method. My first Idea:

$al->register('css', '....', '....', array(......, 'css_wrapper'=>'lte IE 8', 'media'=>'screen'), $this));




How can i add css files with the media screen attribute and wrapps it in <!--[if lte IE 8]> and <![endif]--> ??????



greeting Johnny
Blade83
 
fudyartanto replied on at Permalink Reply
fudyartanto
HI, if you take a look under /concrete/src/Asset/CssAsset.php and see __toString() function you will see media parameter is hardcoded. 

public function __toString() {
        $e = new HeadLink($this->getAssetURL(), 'stylesheet', 'text/css', 'all');
        if (count($this->combinedAssetSourceFiles)) {
            $source = '';
            foreach ($this->combinedAssetSourceFiles as $file) {
                $source .= $file . ' ';
            }
            $source = trim($source);
            $e->setAttribute('data-source', $source);
        }
        return (string) $e;
    }


So I think if you need costum your output you need to create new Asset Type in your package. If you just develop the theme (not in package) maybe the best practice is by write manually your asset output

<link href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet" type="text/css" media="screen">


Maybe read register function under AssetList class will give you idea also. See that on this path /concrete/src/Asset/AssetList.php

public function register($assetType, $assetHandle, $filename, $args = array(), $pkg = false) {
  //read code here you will know system flow
}