CouchCMS Forum Bug Reporting and Troubleshooting
Problems, need help? Have a tip or advice? Post it here.
4 posts Page 1 of 1
Post a reply
Previous Next

using CMS:embed for navbar

avatar
Cureck
Registered User
having an issue with the CMS:embed tag trying to use it for my navbar code. I basically want to put the navbar as a snippet and use the embed tag on each page to display the navbar. I created and copy of my navbar code and saved it as navbar.html (seen below) and then replaced the code in my index.php file with <cms:embed 'navbar.html' />. However, no the index page pulls up a blank webpage with no errors or anything. I am pretty sure I am not doing something right as a am new to website building with php. can anyone assist?

Here is my index.php file:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Home'>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Michael's Auction</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div style="padding-bottom:51px">
      <cms:embed 'navbar.html' />
    </div>

    <header id="main_carousel" class="carousel slide" data-ride="carousel" style="min-height: 300px; max-height: 300px;" >
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#main_carousel" data-slide-to="0" class="active"></li>
        <li data-target="#main_carousel" data-slide-to="1" class=""></li> 
        <li data-target="#main_carousel" data-slide-to="2" class=""></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="center-block fill" style="background-color:#ffffff" src="logos/michaelslogo-md.png" height="inherit" alt="First slide" >
        </div>
        <div class="item">
          <img class="center-block fill" style="background-color:#6A6A6A" src="img/Sample_house_two.jpg" height="inherit" alt="Second slide">
          <div class="carousel-caption" style="text-shadow:-1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -2px 0 0 #000000, 2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000;">
            <h3>Congrats to the new owners</h3>
            <p>Winning bid olny $65,000!!!</p>
          </div>
         </div>
        <div class="item">
          <img class="center-block fill" style="background-color:#6A6A6A" src="img/sample_house_one.jpg" height="inherit" alt="Third slide" >
          <div class="carousel-caption" style="text-shadow:-1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -2px 0 0 #000000, 2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000;">
            <h3>Next Estate Sale</h3>
            <p>July 8th at 9:00 AM</p>
          </div>
        </div>
       </div>
      <a class="left carousel-control" href="#main_carousel" role="button" data-slide="prev" >
          <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#main_carousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>     
   </header>
  

    <div class="container">
       <div class="row">
        <div class="col-lg-12">
          <div class="jumbotron jumbotron-fluid" style="background-color:#ffffff">
            <div class="container center_box">
              <h1 align="center">
                <button type="button" class="btn btn-primary" style="height:150px;width: 250px;font-size: xx-large" onclick="location.href='real_estate/realestate.html';"">Real Estate</button>
                <button type="button" class="btn btn-primary" style="height:150px;width:250px;font-size: xx-large;" onclick="location.href='auction_house/auctionhouse.php';">Auction House</button>
              </h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <hr>
    
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p align="center">Copyright &copy; <img src="logos/michaelslogo-sm.png" height="50px" width="160px"></p>
            </div>
        </div>
        <!-- /.row -->
    </footer>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
   </body>
</html>
</cms:template>
<?php COUCH::invoke(); ?>


and here is my navbar.html that resides in the couch/snippets folder:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Home'>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Michael's Auction</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div style="padding-bottom:51px">
      <cms:embed 'navbar.html' />
    </div>

    <header id="main_carousel" class="carousel slide" data-ride="carousel" style="min-height: 300px; max-height: 300px;" >
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#main_carousel" data-slide-to="0" class="active"></li>
        <li data-target="#main_carousel" data-slide-to="1" class=""></li> 
        <li data-target="#main_carousel" data-slide-to="2" class=""></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="center-block fill" style="background-color:#ffffff" src="logos/michaelslogo-md.png" height="inherit" alt="First slide" >
        </div>
        <div class="item">
          <img class="center-block fill" style="background-color:#6A6A6A" src="img/Sample_house_two.jpg" height="inherit" alt="Second slide">
          <div class="carousel-caption" style="text-shadow:-1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -2px 0 0 #000000, 2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000;">
            <h3>Congrats to the new owners</h3>
            <p>Winning bid olny $65,000!!!</p>
          </div>
         </div>
        <div class="item">
          <img class="center-block fill" style="background-color:#6A6A6A" src="img/sample_house_one.jpg" height="inherit" alt="Third slide" >
          <div class="carousel-caption" style="text-shadow:-1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -2px 0 0 #000000, 2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000;">
            <h3>Next Estate Sale</h3>
            <p>July 8th at 9:00 AM</p>
          </div>
        </div>
       </div>
      <a class="left carousel-control" href="#main_carousel" role="button" data-slide="prev" >
          <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#main_carousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>     
   </header>
  

    <div class="container">
       <div class="row">
        <div class="col-lg-12">
          <div class="jumbotron jumbotron-fluid" style="background-color:#ffffff">
            <div class="container center_box">
              <h1 align="center">
                <button type="button" class="btn btn-primary" style="height:150px;width: 250px;font-size: xx-large" onclick="location.href='real_estate/realestate.html';"">Real Estate</button>
                <button type="button" class="btn btn-primary" style="height:150px;width:250px;font-size: xx-large;" onclick="location.href='auction_house/auctionhouse.php';">Auction House</button>
              </h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <hr>
    
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p align="center">Copyright &copy; <img src="logos/michaelslogo-sm.png" height="50px" width="160px"></p>
            </div>
        </div>
        <!-- /.row -->
    </footer>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
   </body>
</html>
</cms:template>
<?php COUCH::invoke(); ?>


Thanks!

Re: using CMS:embed for navbar

avatar
KK
Moderator
Hi :)

The code that you have posted for the snippet is the exact copy of the main template - I assume this was a mistake in posting and your snippet actually contains only the code for the menu.

OK, so looking at the code for the main template, the problem seems be this -
you have enclosed your entire HTML within <cms:template></cms:template> block
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Home'>
<!DOCTYPE html>
<html lang="en">
..
..
</html>
</cms:template>
<?php COUCH::invoke(); ?>

The <cms:template></cms:template> block actually should be an independent unit like this -
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Home'>
<!-- define your editable regions here -->
</cms:template>

<!DOCTYPE html>
<html lang="en">
..
..
</html>
<?php COUCH::invoke(); ?>

or this (if you are nor defining any editable regions within the cms:template block)-
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Home' />

<!DOCTYPE html>
<html lang="en">
..
..
</html>
<?php COUCH::invoke(); ?>

The cms:template block is supposed to enclose only editable regions definitions (and a few other admin tags - but never the HTML for your template).

Please make the required change to your template and let us know if it helps.
Thanks.

Re: using CMS:embed for navbar

avatar
Cureck
Registered User
@kk thanks!! you were correct the exact copy was a mistake. However, that did fix it without a problem so thank you!!!!

Re: using CMS:embed for navbar

avatar
KK
Moderator
You are welcome :)
Post a reply
Previous Next
4 posts Page 1 of 1
Return to Bug Reporting and Troubleshooting