2

I want to minify the output html from php file, I have followed this guide:

How to minify php page html output?

This is my code:

<?php

function sanitize_output($buffer) {

    $search = array(
        '/\>[^\S ]+/s',  // strip whitespaces after tags, except space
        '/[^\S ]+\</s',  // strip whitespaces before tags, except space
        '/(\s)+/s'       // shorten multiple whitespace sequences
    );

    $replace = array(
        '>',
        '<',
        '\\1'
    );

    $buffer = preg_replace($search, $replace, $buffer);

    return $buffer;
}

ob_start("sanitize_output");

?>

The page minify, but my slider on the homepage disappears. I have nivo slider which you can see here:

https://github.com/gilbitron/nivo-slider

This is the code I have in my page for the nivo slider:

<div id="featured">
    <div id="slides">
        <div id="slider" class="nivoSlider">
            <?
            $is_first_image = TRUE;
            foreach($_info["img_slider_homepage"]["src"] as $indice=>$src)
            {
                $href       = $_info["img_slider_homepage"]["href"][$indice];
                $alt        = $_info["img_slider_homepage"]["alt"][$indice];
                $capt_id    = $_info["img_slider_homepage"]["capt_id"][$indice];
                $capt_txt   = $_info["img_slider_homepage"]["capt_txt"][$indice];
                $title      = ($capt_id
                                ? "#".$capt_id
                                : $_info["img_slider_homepage"]["title"][$indice]);

                if($href)
                {
                    ?><a href="<?=$href?>" class="<?=$is_first_image ? "" : "lazywait"?>"><img src="<?=$src?>" title="<?=$title?>" alt="<?=$alt?>" width="<?=$_info["img_slider_width"]?>" height="<?=$_info["img_slider_height"]?>"></a><?
                }
                else
                {
                    ?><img src="<?=$src?>" class="<?=$is_first_image ? "" : "lazywait"?>" title="<?=$title?>" alt="<?=$alt?>" width="<?=$_info["img_slider_width"]?>" height="<?=$_info["img_slider_height"]?>"><?
                }

                $is_first_image = FALSE;
            }
            ?>
        </div>

        <?
        foreach($_info["img_slider_homepage"]["src"] as $indice=>$src)
        {
            $capt_id    = $_info["img_slider_homepage"]["capt_id"][$indice];
            $capt_txt   = $_info["img_slider_homepage"]["capt_txt"][$indice];

            if($capt_id AND $capt_txt)
            {
                ?>
                <div id="<?=$capt_id?>" class="nivo-html-caption">
                    <?=$capt_txt?>
                </div>
                <?
            }
        }
        ?>
    </div>
</div>

this is autput html:

<body >

<div id="container"><div id="row"><div id="header_home_page"> <ul id="top-menu"><ul id="nullo" class="sf-menu"> <li><a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div> <ul> </ul> </li></ul> <li><a href="/vacanze_weekend/">Vacanze</a></li><li><a href="/matrimoni/">Matrimoni</a></li><li><a href="/meeting/">Meeting</a></li> </li><li><span class="current-lang">ita</span> | <a href="/en/" title="English - Luxury hotels and historical boutique hotels">ENG</a></li><div id="additional-info"><div id="search-form"><form action="/chi_siamo/cerca.php" id="cse-search-box"> <input type="hidden" name="cx" value="010014129502104197540:hsefbn00beg" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="25" id="searchinput"/><input type="image" src="/inc/files/images/search_btn.png" id="searchsubmit" /></form></div> <!-- end #search-form --></div></ul><div class="wrap"><div id="branding"><div class="logohome">&nbsp;</div></div> </div></div><div id="additional-info"></div></div><div id="featured"><div id="slides"><div id="slider" class="nivoSlider"><img src="/inc/files/images/slider/mntr2.jpg" class="" title="" alt="" width="960" height="332"><img src="/inc/files/images/slider/cimb1.jpg" class="lazywait" title="" alt="" width="960" height="332"><img src="/inc/files/images/slider/murl2.jpg" class="lazywait" title="" alt="" width="960" height="332"><img src="/inc/files/images/slider/pvch1.jpg" class="lazywait" title="" alt="" width="960" height="332"></div></div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script src="/inc/script/jquery.nivo.slider.pack.js" type="text/javascript"></script><script src="/inc/script/lazyload.js" type="text/javascript"></script><script type="text/javascript">$(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation directionNavHide: true, // Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: true, // Use thumbnails for Control Nav controlNavThumbsFromRel: true, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... keyboardNav: true, // Use left & right arrows pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions captionOpacity: 0.8, // Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded });
});</script><div id="category-name" style="padding-top:38px;"> <div id="category-inner"> <h3>Siamo specializzati in Vacanze ed Eventi di Alto Livello<br>in dimore storiche di pregio con almeno 100 anni di storia</h3><p>Le nostre dimore storiche hanno in media solo 11 camere e ospitano un solo evento in esclusiva al giorno</p> </div></div> <!-- end .category-name --> ecc
Community
  • 1
  • 1
themich
  • 193
  • 1
  • 3
  • 15
  • can you show the generated html – Faiz Rasool Jun 15 '15 at 14:44
  • Any chance you can post the corresponding html once minified and once unminified? – Kevin M Jun 15 '15 at 14:48
  • i have update first post, thanks – themich Jun 15 '15 at 15:28
  • 1
    Seeing as you're running on Apache Gentoo, I would strongly suggest switching to **mod_pagespeed**. It will perform this kind of minification and also optimize Javascript, CSS and multiple static files. – LSerni Jun 15 '15 at 15:56
  • do yourself a favour and use an existing library for this kind of work. Just stripping some whitespaces wont do, as you'll get yourself in all sorts of trouble, especially when using javascript inside your page. – giorgio Jun 15 '15 at 15:59

1 Answers1

1

The reason the slider disappears is that the javascript in the < script > tag contains comments. The '//' operator comments everything until the end of the line.

< script type="text/javascript">$(window).load(function() {   
$('#slider').nivoSlider({ effect: 'random', // Specify sets like: fold,fade,sliceDown' 
animSpeed: 500, // Slide transition speed pauseTime: 3000 ......

When you minify the script, it basically inserts all content in one line. The script after '//Specify sets....' has been moved to one line and then has been commented out, so all script after this has been ignored.

You can avoid this by removing comments as well. A regular expression for javascript comments can be found here.

Community
  • 1
  • 1
Haris
  • 757
  • 1
  • 7
  • 10
  • thanks , the problem is a comment, now have solved, but have small issue now, when load the page nivoslider load after some other content , for 0,5 sec not show anithing after i see load the class of nivoslider, why ? – themich Jun 15 '15 at 16:22
  • I didn't get your question. Is the nivoslider loading 5 seconds after the page has loaded? – Haris Jun 15 '15 at 16:57
  • no 5 second but 0,5 second approximately, example , the normal pages is , when load the page not show but after 0,5 second compare between , in this case is nivoslider – themich Jun 15 '15 at 17:06
  • If the nivoslider is loading after some time when the minified script is used, then check the minified script. Minify your javascript on [javascript-minifier.com/](http://javascript-minifier.com/) and then use this script to load the nivoslider. If everything runs fine, I guess there is some problem with your minified script. Compare your minified script with the script minified online. Maybe something else has to be removed as well. – Haris Jun 16 '15 at 04:21