Dynamically Displaying the Twitter Bootstrap Version in a CakePHP Page

Written by James McDonald

June 12, 2019

This is the CakePHP Code that I embed in a page to display the current version of Bootstrap CSS that is in use on the website.

Assuming that JQuery is included somewhere on the page all that is required is a target div and then a snippet of javascript created using CakePHP scriptStart scriptEnd feature which will allow dynamic specification of the path to bootstrap.min.css and javascript to fetch and parse for the v4.3.1 or which ever version string it is

 <tr>
   <th>Twitter Bootstrap Version</th>
        <td>
          <div id="twbs_version"></div>
            <?php
                $this->Html->scriptStart(['block' => 'from_view']);
                    echo '$(function () {' .
                    '$.get("' . $this->Url->css('bootstrap.min.css') . 
                    '", function (data) {' .
                    'var version = data.match(/v[.\d]+[.\d]/);' .
                    '$("#twbs_version").html(version); }); });';
                $this->Html->scriptEnd();
            ?>
    </td>
</tr>

Here is the javascript that is output by CakePHP to a block named ‘from_view’ see the Layout.ctp

<script>
    $(function () { 
        $.get(
            "/css/bootstrap.min.css", 
            function (data) {
                var version = data.match(/v[.\d]+[.\d]/);
                $("#twbs_version").html(version); 
            }
        );
    });
</script>

Layout.ctp

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @since         0.10.0
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */

use Cake\Core\Configure;
$appDescription = Configure::read('appLongName');
$appShortDescription = Configure::read('appShortName');
?>
<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <?= $this->Html->charset() ?>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?= $appShortDescription ?> : <?= $this->fetch('title') ?></title>
        <?=
        $this->Html->meta(
    'favicon',
    'img/logo/logo4-120.png',
    ['type' => 'icon']
); ?>
         <?=  $this->Html->meta('description', $appDescription ); ?>
         <?=  $this->Html->meta([
            'http-equiv' => "Content-Language",
            'content' => "en"
            ]); ?>
	<?= $this->Html->meta('google', 'notranslate'); ?>


        <?=  $this->Html->meta([
            'property' => "og:title",
            'content' => $appDescription
            ]); ?>

        <?=  $this->Html->meta([
            'property' => "og:description",
            'content' => $appDescription
            ]); ?>

        <?=  $this->Html->meta([
            'property' => "og:url",
            'content' => $this->Url->build('/', true)
            ]); ?>

        <?= $this->Html->meta(['name' => 'robots', 'content' => "noindex,nofollow" ]) ?>
        <?=  $this->Html->meta([
            'property' => "og:image",
            'content' => $this->Url->build('img/logo/logo.png', true)
            ]); ?>

             <?=  $this->Html->meta([
            'property' => "og:image:type",
            'content' => 'image/png'
            ]); ?>
                 <?=  $this->Html->meta([
            'property' => "og:image:width",
            'content' => '300'
            ]); ?>
                     <?=  $this->Html->meta([
            'property' => "og:image:height",
            'content' => '200'
            ]); ?>

            <?=  $this->Html->meta([
            'property' => "og:image:alt",
            'content' => $appDescription
            ]); ?>

        <?=
        $this->Html->css(
                [
                    'normalize',
                   // 'main',
                    'fontawesome-all.min',
                    'bootstrap.min',
                    'select2.min',
                    'melbdc'
                ]
        );
        ?>

        <?= $this->Html->script('vendor/modernizr-2.8.3.min'); ?>
        <?=
        $this->Html->script([
            'vendor/jquery-1.12.0.min',
            'plugins',
            'bootstrap.min',
            'select2.full.min',
             'custom'
                ], [
            'block' => 'end_of_body'
        ]);
        ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
    </head>
    <body>
        <!--[if lt IE 8]>
                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->

            <?= $this->element('Nav/nav'); ?>

        <div class="container">
            <?= $this->Flash->render('auth'); ?>
            <?= $this->Flash->render(); ?>
        </div>
        <div class="container">
            <?= $this->fetch('content') ?>
        </div>


<?= $this->fetch('end_of_body'); ?>
<?= $this->fetch('from_view'); ?>

<?php if( ! $debug ): ?>
        <script>
            (function (b, o, i, l, e, r) {
                b.GoogleAnalyticsObject = l;
                b[l] || (b[l] =
                        function () {
                            (b[l].q = b[l].q || []).push(arguments)
                        });
                b[l].l = +new Date;
                e = o.createElement(i);
                r = o.getElementsByTagName(i)[0];
                e.src = 'https://www.google-analytics.com/analytics.js';
                r.parentNode.insertBefore(e, r)
            }(window, document, 'script', 'ga'));
            ga('create', 'UA-XXXXXXXX-X', 'auto');
            ga('send', 'pageview');
        </script>
        <?php        endif;?>
    </body>
</html>

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Squarespace Image Export

To gain continued access to your Squarespace website images after cancelling your subscription you have several...

MySQL 8.x GRANT ALL STATEMENT

-- CREATE CREATE USER 'tgnrestoreuser'@'localhost' IDENTIFIED BY 'AppleSauceLoveBird2024'; GRANT ALL PRIVILEGES ON...

Exetel Opt-Out of CGNAT

If your port forwards and inbound and/or outbound site-to-site VPN's have failed when switching to Exetel due to their...