Highlighted

using includes in a multi level directory structure

New Here ,
Oct 02, 2015

Copy link to clipboard

Copied

I am new to web development, learning everything on my own.  I created a simple cf web site with 10 pages all located in the root directory.  I have a directory called assets, and within that directory I have several other directories such as css, images, logos, js, php etc.  This is where I am storing these files.  Web site works fine.

Now I am starting to simplify things by placing all of my header and footer information in separate files (in a directory called cf_includes and using <cfinclude template="cfm_includes/header.cfm"> in all my pages.  Everything still works correctly.

Now taking it a step further, I moved 5 of 10 of my pages in a new directory called pages, and this is where everything falls apart.  When I navigate to pages inside and outside of the pages directory the links break, either I get a cf error include file cannot be found or some of my graphics, logos, cannot be found because the link pointers are the same in the header include for both inside and outside the pages directory.  Does anyone know how to remedy this?

Directory Structure/cf_includes/header.cfmindex.cfmfrom inside pages

/root directory

  /assets

     /images

     /css

     /js

  /cf_includes

       header.cfm

       footer.cfm

  /pages

       main.cfm

       page1.cfm

       page2.cfm

       page3.cfm

  index.cfm

  page5.cfm

<!-- MAIN NAVIGATION -->

  <div id="main-nav" class="navbar-collapse collapse navbar-mega-menu">

  <ul class="nav navbar-nav navbar-right">

  <li class="dropdown active">

  <a href="index.cfm">HOME</a>

  </li>

<!--page Navigation-->

          <li class="dropdown ">

               <a href="#">../pages/main </a>

               <ul class="dropdown-menu" role="menu">

                    <li><a href="../pages/page1">Page 1</a></li>

                    <li><a href="../pages/page2">Page 1</a></li>

                    <li><a href="../pages/page2">Page 1</a></li>

               </ul>

the path i am using at this level to go to

the header include

<cfinclude template="cfm_includes/header.cfm">


the images

<img src="assets/images/logos.png">

the css

<link href="assets/css/styles.css" rel="stylesheet" type="text/css">

the path i am using at this level to go to

the header include

<cfinclude template="../cfm_includes/header.cfm">


the images

<img src="../assets/images/logos.png">

the css

<link href="../assets/css/styles.css" rel="stylesheet" type="text/css">

Views

154

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

using includes in a multi level directory structure

New Here ,
Oct 02, 2015

Copy link to clipboard

Copied

I am new to web development, learning everything on my own.  I created a simple cf web site with 10 pages all located in the root directory.  I have a directory called assets, and within that directory I have several other directories such as css, images, logos, js, php etc.  This is where I am storing these files.  Web site works fine.

Now I am starting to simplify things by placing all of my header and footer information in separate files (in a directory called cf_includes and using <cfinclude template="cfm_includes/header.cfm"> in all my pages.  Everything still works correctly.

Now taking it a step further, I moved 5 of 10 of my pages in a new directory called pages, and this is where everything falls apart.  When I navigate to pages inside and outside of the pages directory the links break, either I get a cf error include file cannot be found or some of my graphics, logos, cannot be found because the link pointers are the same in the header include for both inside and outside the pages directory.  Does anyone know how to remedy this?

Directory Structure/cf_includes/header.cfmindex.cfmfrom inside pages

/root directory

  /assets

     /images

     /css

     /js

  /cf_includes

       header.cfm

       footer.cfm

  /pages

       main.cfm

       page1.cfm

       page2.cfm

       page3.cfm

  index.cfm

  page5.cfm

<!-- MAIN NAVIGATION -->

  <div id="main-nav" class="navbar-collapse collapse navbar-mega-menu">

  <ul class="nav navbar-nav navbar-right">

  <li class="dropdown active">

  <a href="index.cfm">HOME</a>

  </li>

<!--page Navigation-->

          <li class="dropdown ">

               <a href="#">../pages/main </a>

               <ul class="dropdown-menu" role="menu">

                    <li><a href="../pages/page1">Page 1</a></li>

                    <li><a href="../pages/page2">Page 1</a></li>

                    <li><a href="../pages/page2">Page 1</a></li>

               </ul>

the path i am using at this level to go to

the header include

<cfinclude template="cfm_includes/header.cfm">


the images

<img src="assets/images/logos.png">

the css

<link href="assets/css/styles.css" rel="stylesheet" type="text/css">

the path i am using at this level to go to

the header include

<cfinclude template="../cfm_includes/header.cfm">


the images

<img src="../assets/images/logos.png">

the css

<link href="../assets/css/styles.css" rel="stylesheet" type="text/css">

Views

155

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 02, 2015 0

Have something to add?

Join the conversation