0

I created a single page called About, (http://sandbox.fusepointe.com/hcnew/about).

My template directory file structure looks like this:

craft
 | templates
     | about
         | _layout-about.html
         | index.html

I setup the single page in Craft, and set it to use the /about/_layout-about template - but I can't seem to get it to connect with the actual index.html page for the about single. If you visit the URL above, it says I haven't set my {% block content %} yet, but I have...

Template code for _layout-about.html:

<!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">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{{ siteUrl }}/assets/img/favicon.ico">

    <title>{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ siteUrl }}/assets/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{ siteUrl }}/assets/css/ionicons.min.css" rel="stylesheet">
    <link href="{{ siteUrl }}/assets/css/style.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{{ siteUrl }}/assets/js/ie10-viewport-bug-workaround.js"></script>

    <!-- TypeKit Fonts -->
    <script src="//use.typekit.net/bke8zyg.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[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 id="h2">
      <div class="logo">
        <a href="{{ siteUrl }}"><h2 style="text-transform:uppercase;">{{ siteName }}</h2></a>
        <div class="horizontal-nav" style="display: inline;">
          <a href="blog"><h4>Blog</h4></a>
        <a href="work"><h4>Portfolio</h4></a>
         <a href="about"><h4>About</h4></a>
      </div>
    </div><!--/logo-->
  </div> <!--/H-->
      <main id="content" role="main">
      {% block content %}
        <p>This is the _layout-about.html page... If you see me, you haven’t set your <code>{% verbatim %}{% block content %}…{% endblock %}{% endverbatim %}</code> yet.</p>
        <p>See Twig’s <a href="http://twig.sensiolabs.org/doc/templates.html#template-inheritance">Template Inheritance</a> documentation for an explanation.</p>
      {% endblock %}
    </main>

    <div id="f">
      <div class="container">
        <div class="row centered">
          <div class="col-md-8 col-md-offset-2">
            <a href="http://twitter.com/harriscauler"><i class="ion-social-twitter"></i></a>
            <a href="http://instagram.com/harrisedmunds"><i class="ion-social-instagram"></i></a>
            <a href="http://facebook.com/harriscaulerphotography"><i class="ion-social-facebook"></i></a>
          </div><!--/col-md-8-->
        </div>
      </div><!--/container-->
    </div><!--/.F-->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{ siteUrl }}/assets/js/jquery.min.js"></script>
    <script src="{{ siteUrl }}/assets/js/bootstrap.min.js"></script>
    <script src="{{ siteUrl }}/assets/js/retina-1.1.0.js"></script>
    <script src="{{ siteUrl }}/assets/js/custom.js"></script>

  </body>
</html>

Template code for index.html:

{% extends "about/_layout-about" %}
{% block content %}

      <div id="meta" style="padding-top: 40px; padding-bottom: 40px;">
      <div class="container">
        <div class="row centered">
          <h1>AT A GLANCE</h1>
          <div class="row">
            <div class="col-md-4">
              <h3>FULL NAME</h3>
              <p>Harris Edmunds Cauler</p>
            </div>
            <div class="col-md-4">
              <h3>RESIDENCE</h3>
              <p>Moorestown, NJ</p>
            </div>
            <div class="col-md-4">
              <h3>HOBBIES</h3>
              <p>Singing, Photography, Web Development, Community Service</p>
            </div>
          </div>
        </div><!--/row-->
      </div><!--/.container-->
    </div><!--/.meta-->

    <div class="container ptb">
      <div class="row">
        <div class="col-md-10 col-md-offset-1 post-list">
          <div class="row centered">
            <h1>ABOUT ME</h1>
            <p>I'm a senior graduating in May currently interning at the U.S. Department of Education in Washington, D.C. I'm looking to connect with organizations and individuals in the D.C. Metro Area and hope to return post-graduation in May to work in D.C. full-time in a technology-related or project management position.</p>
            <a class="btn btn-default" href="about" role="button">Learn More</a>
          </div>
        </div><!--/col-md-4-->
      </div><!--/row-->
    </div><!-- /.container -->

    <div id="meta" style="padding-top: 40px; padding-bottom: 40px;">
      <div class="container">
        <div class="row centered">
          <div class="col-md-6">
          <h2>FROM THE BLOG</h2>
            {% for post in entry.featuredBlogPost %}
              <a href="{{ post.url }}">
                {% for image in post.featuredImage %}
                <img src="{{ image.getUrl('postGridThumb') }}" style="margin-left: auto; margin-right: auto;" class="img-responsive"></a>
                {% endfor %}
              <a href="{{ post.url }}"><h3>{{ post.title }}</h3></a>
            {% endfor %}
            <a class="btn btn-default" href="blog" role="button">All Posts</a>
            </div><!--/col-md-6-->
          <div class="col-md-6">
          <h2>RECENT WORK</h2>
            {% for post in entry.featuredPortfolioWork %}
              <a href="{{ post.url }}">
                {% for image in post.featuredImage %}
                <img src="{{ image.getUrl('postGridThumb') }}" class="img-responsive" style="margin-left: auto; margin-right: auto;"></a>
                {% endfor %}
              <a href="{{ post.url }}"><h3>{{ post.title }}</h3></a>
            {% endfor %}
            <a class="btn btn-default" href="work" role="button">All Work</a>
            </div><!--/col-md-6-->
          </div>
        </div><!--/col-md-4-->
        </div><!--/meta-->

{% endblock %}
5

If I've deciphered what you're asking correctly, I think the solution you need is to set the single to use your about/index template, not the about/_layout-about template.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.