01 Project – Node.js / Express / MongoDB – Part 07 – Creating the second view: image.handlebars file

Let’s create the second view file. Under the views folder, create a new file and name it image.handlebars. Copy the following code into the image.handlebars file.

<div class="panel panel-primary">
  <div class="panel-heading">
    <h2 class="panel-title">{{ image.title }}</h2>
  </div>
  <div class="panel-body">
    <p>{{ image.description }}</p>

    

<div class="col-md-12 text-center">
      <img src="/public/upload/{{image.filename}}" class="img-thumbnail">
    </div>
  </div>
  <div class="panel-footer">
    <div class="row">
      <div class="col-md-8">
        <button class="btn btn-success" id="btn-like" data-id="{{ image.uniqueId }}"><i class="fa fa-heart">Like</i></button>
        <strong class="likes-count">{{ image.likes }}</strong> &nbsp; - &nbsp; <i class="fa fa-eye"></i>
        <strong>{{ image.views }}</strong>&nbsp; - &nbsp; Posted: <em class="text-muted">{{ timeago image.timestamp }}</em>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="row">
        <div class="col-md-8">
          <strong class="panel-title">Comments</strong>
        </div>
        <div class="col-md-4 text-right">
          <button class="btn btn-default btn-sm" id="btn-comment" data-id="{{ image.uniqueId }}">
          <i class="fa fa-comments-o"> Post Comment...</i>
        </button>
      </div>
    </div>
  </div>
      <div class="panel-body">
        <blockquote id="post-comment">
          <div class="row">
            <form method="post" action="/images/{{ image.uniqueId }}/comment">
              <div class="form-group col-sm-12">
                <label class="col-sm-2 control-label" for="name">Name:</label>
                <div class="col-sm-10">
                  <input class="form-control" type="text" name="name">
                </div>
              </div>
              <div class="form-group col-sm-12">
                <label class="col-sm-2 control-label" for="email">Email:</label>
                <div class="col-sm-10">
                  <input class="form-control" type="text" name="email">
                </div>
              </div>
              <div class="form-group col-sm-12">
                <label class="col-sm-2 control-label" for="comment">Comment:</label>
                <div class="col-sm-10">
                  <textarea class="form-control" name="comment" rows="2"></textarea>
                </div>
              </div>
              <div class="form-group col-sm-12">
                <div class="col-sm-12 text-right">
                  <button type="submit" id="comment-btn" class="btn btn-success" type="button"><i class="fa fa-comment"></i>Post
                  </button>
                </div>
              </div>
            </form>
          </div>
        </blockquote>
        <ul class="media-list">
          {{#each comments}}
          <li class="media">
            <a class="pull-left" href="#">
              <img class="media-object img-circle" src="http://www.gravatar.com/avatar/{{gravatar}}?d=monsterid&s=45">
            </a>
            <div class="media-body">
              {{ comment }}
              <br/><strong class="media-heading">{{ name }}</strong> <small class="text-muted">{{ timeago timestamp }}</small>
            </div>
          </li>
            {{/each}}
        </ul>
      </div>
    </div>

Again, it is HTML code but this time with some more functionality. An image object will be displayed on this page. The image object has properties (title, description, filename, likes, views, and a timestamp).

The {{ timestamp }} is a Handlebars helper, a custom function (will be written).

It also contains forms that allows users to post comments to images, enter their names, emails, and comments.

The form action for comments is set to /images/{{ image.uniqueid }}/comment.
We already defined a route to handle this.
It also includes a collection of comments in addition to the image details, so we can simply iterate over that collection by using the Handlebars #each block helper.

We also use Gravatar to display universal avatar images for users who have commented (if they have provided their e-mail addresses). You can learn more about Gravatar at http://gravatar.com.

Leave a Reply