1

Hi I am finding a solution where we can pass css and js array and its automatically set to css(in Header) and js(footer) default layout in cakephp 3.5

the problem is all css and js is calling in each page which is not required.

can you help.

    ...
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?= $this->fetch('title'); ?>
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?= $this->Html->css('assets.min') ?>
    <?= $this->Html->css('styles') ?>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Josefin+Slab:100,100italic,300,300italic,regular,italic,600,600italic,700,700italic%7CLato:100,100italic,300,300italic,regular,italic,700,700italic,900,900italic%7CMontserrat:regular,700%7CNoto+Sans:regular,italic,700,700italic%7COpen+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic&subset=latin,latin-ext,cyrillic,vietnamese,devanagari,cyrillic-ext,greek-ext,greek");
        @import url("https://fonts.googleapis.com/css?family=Play:regular,700%7CRaleway:100,200,300,regular,500,600,700,800,900%7CRoboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic%7CSlabo+13px:regular%7CSlabo+27px:regular&subset=latin,latin-ext,cyrillic,vietnamese,devanagari,cyrillic-ext,greek-ext,greek");
        @import url("https://fonts.googleapis.com/css?family=Ubuntu:300,300italic,regular,italic,500,500italic,700,700italic&subset=latin,latin-ext,cyrillic,vietnamese,devanagari,cyrillic-ext,greek-ext,greek");
    </style>
    <?= $this->Html->css('styles-assets') ?>
    <?= $this->fetch('meta') ?>
</head>
<body class="moto-background">
    <div class="page">
        <?= $this->element('header'); ?>
        <?= $this->fetch('content') ?>
    </div>
    <?php echo $this->element('footer'); ?>
    <div data-moto-back-to-top-button class="moto-back-to-top-button">
        <a ng-click="toTop($event)" class="moto-back-to-top-button-link">
            <span class="moto-back-to-top-button-icon fa"></span>
        </a>
    </div>
    <?php echo $this->Html->script("jquery-1.9.1.min"); ?>
    <?php echo $this->Html->script("jssor.slider.min"); ?>
    <script>
    jQuery(document).ready(function ($) {

        var options = {
            $FillMode: 2,                                       //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
            $AutoPlay: 1,                                       //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)
            $Idle: 4000,                                        //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnH

... ...

Mithilesh Kumar
  • 92
  • 1
  • 2
  • 13
  • 3
    This is pretty clearly covered in the manual section on [Using Blocks for Script and CSS Files](https://book.cakephp.org/3.0/en/views.html#using-blocks-for-script-and-css-files). – Greg Schmidt Oct 12 '18 at 16:39

1 Answers1

1

@Grag Schmidt pointed you in the right direction.

This line in your layout file listens for additional css files and puts them at the top of the file, inside the tag.

<?= $this->fetch('css') ?>

Calling the HtmlHelper css function with the block => true option from a view then inserts the file into where the fetch('css') was called.

$this->Html->css('additional_style.css', ['block' => true]);

See also

Roberto
  • 958
  • 13
  • 33