Configure the News Detail Page - Enterprise Java Content management system - Hippo CMS

Configure the News Detail Page

Previous Step

Configure the News Overview Page

After applying the HTML from the web design to the out-of-the-box News Overview, you are going to do the same to the News Detail page.

Take a Look at the Web Design

Load the web site in your browser:  http://localhost:8080/site/.

Browse to a news overview page and click on the first news article. Like the news overview before you applied the design, it doesn't look very good yet.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/news-detail/news-detail-unstyled.png

Now load the web design in your browser and browse to the news overview and click on the first news article. This is what the news detail page in your site should look like.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/news-detail/news-detail-web-design.png

Apply the Web Design to the News Detail Template

Open the file news-detail.html found in the web design. Here you'll find the HTML markup for news articles.

Locate the element   <div class="body-wrapper"> in  news-detail.html. This element contains the news article.

Open the file repository-data/webfiles/src/main/resoucrs/site/freemarker/hstdefault/newspage-main.ftl found in your project. This is the template that renders the news article.

Apply the HTML markup for the News article found in news-detail.html to the Freemarker code in newspage-main.ftl. For now ignore any markup for the related news links, you will get to that later in this sprint. The 'large' image variant is available through an image's large property, i.e.  document.image.large.

Make sure the keep the <@hst.manageContent> tag which renders an edit button in the channel preview.

You will end up with something similar to the following:

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9">
          <div class="blog-post has-edit-button">
            <@hst.manageContent hippobean=document/>
            <div class="blog-post-type">
              <i class="icon-news"> </i>
            </div>
            <div class="blog-span">
              <#if document.image?? && document.image.large??>
                <@hst.link var="img" hippobean=document.image.large/>
                <div class="blog-post-featured-img">
                  <img src="${img}" alt="${document.title?html}" />
                </div>
              </#if>
              <h2>${document.title?html}</h2>
              <div class="blog-post-body">
                <p>${document.introduction?html}</p>
                <@hst.html hippohtml=document.content/>
              </div>
              <div class="blog-post-details">
                <div class="blog-post-details-item blog-post-details-item-left icon-calendar">
                  <#if document.date??>
                    <span class="date">
                      <@fmt.formatDate value=document.date.time type="both" dateStyle="medium" timeStyle="short"/>
                    </span>
                  </#if>
                </div>
              </div>
            </div>
          </div>
        </div>
      </#if>
    </div>
  </div>
</div>

Browse to the news overview in the web site again and click on the first news article. It should now conform to the web design.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/news-detail/news-detail-styled.png

Next Step

Configure the About Page

Full Source Code

newspage-main.ftl

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9">
          <div class="blog-post has-edit-button">
            <@hst.manageContent hippobean=document/>
            <div class="blog-post-type">
              <i class="icon-news"> </i>
            </div>
            <div class="blog-span">
              <#if document.image?? && document.image.large??>
                <@hst.link var="img" hippobean=document.image.large/>
                <div class="blog-post-featured-img">
                  <img src="${img}" alt="${document.title?html}" />
                </div>
              </#if>
              <h2>${document.title?html}</h2>
              <div class="blog-post-body">
                <p>${document.introduction?html}</p>
                <@hst.html hippohtml=document.content/>
              </div>
              <div class="blog-post-details">
                <div class="blog-post-details-item blog-post-details-item-left icon-calendar">
                  <#if document.date??>
                    <span class="date">
                      <@fmt.formatDate value=document.date.time type="both" dateStyle="medium" timeStyle="short"/>
                    </span>
                  </#if>
                </div>
              </div>
            </div>
          </div>
        </div>
      </#if>
    </div>
  </div>
</div>

See also...

Configure the News Detail Page

Previous Step

Configure the News Overview Page

After applying the HTML from the web design to the out-of-the-box News Overview, you are going to do the same to the News Detail page.

Take a Look at the Web Design

Load the web site in your browser:  http://localhost:8080/site/.

Browse to a news overview page and click on the first news article. Like the news overview before you applied the design, it doesn't look very good yet.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/news-detail/news-detail-unstyled.png

Now load the web design in your browser and browse to the news overview and click on the first news article. This is what the news detail page in your site should look like.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/news-detail/news-detail-web-design.png

Apply the Web Design to the News Detail Template

Open the file news-detail.html found in the web design. Here you'll find the HTML markup for news articles.

Locate the element   <div class="body-wrapper"> in  news-detail.html. This element contains the news article.

Open the file repository-data/webfiles/src/main/resoucrs/site/freemarker/hstdefault/newspage-main.ftl found in your project. This is the template that renders the news article.

Apply the HTML markup for the News article found in news-detail.html to the Freemarker code in newspage-main.ftl. For now ignore any markup for the related news links, you will get to that later in this sprint. The 'large' image variant is available through an image's large property, i.e.  document.image.large.

Make sure the keep the <@hst.manageContent> tag which renders an edit button in the channel preview.

You will end up with something similar to the following:

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9">
          <div class="blog-post has-edit-button">
            <@hst.manageContent hippobean=document/>
            <div class="blog-post-type">
              <i class="icon-news"> </i>
            </div>
            <div class="blog-span">
              <#if document.image?? && document.image.large??>
                <@hst.link var="img" hippobean=document.image.large/>
                <div class="blog-post-featured-img">
                  <img src="${img}" alt="${document.title?html}" />
                </div>
              </#if>
              <h2>${document.title?html}</h2>
              <div class="blog-post-body">
                <p>${document.introduction?html}</p>
                <@hst.html hippohtml=document.content/>
              </div>
              <div class="blog-post-details">
                <div class="blog-post-details-item blog-post-details-item-left icon-calendar">
                  <#if document.date??>
                    <span class="date">
                      <@fmt.formatDate value=document.date.time type="both" dateStyle="medium" timeStyle="short"/>
                    </span>
                  </#if>
                </div>
              </div>
            </div>
          </div>
        </div>
      </#if>
    </div>
  </div>
</div>

Browse to the news overview in the web site again and click on the first news article. It should now conform to the web design.

//onehippo-prod.global.ssl.fastly.net/binaries/ninecolumn/content/gallery/connect/trails/build-a-website/developer-trail-10.0/sprint-1/news-detail/news-detail-styled.png

Next Step

Configure the About Page

Full Source Code

newspage-main.ftl

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9">
          <div class="blog-post has-edit-button">
            <@hst.manageContent hippobean=document/>
            <div class="blog-post-type">
              <i class="icon-news"> </i>
            </div>
            <div class="blog-span">
              <#if document.image?? && document.image.large??>
                <@hst.link var="img" hippobean=document.image.large/>
                <div class="blog-post-featured-img">
                  <img src="${img}" alt="${document.title?html}" />
                </div>
              </#if>
              <h2>${document.title?html}</h2>
              <div class="blog-post-body">
                <p>${document.introduction?html}</p>
                <@hst.html hippohtml=document.content/>
              </div>
              <div class="blog-post-details">
                <div class="blog-post-details-item blog-post-details-item-left icon-calendar">
                  <#if document.date??>
                    <span class="date">
                      <@fmt.formatDate value=document.date.time type="both" dateStyle="medium" timeStyle="short"/>
                    </span>
                  </#if>
                </div>
              </div>
            </div>
          </div>
        </div>
      </#if>
    </div>
  </div>
</div>

See also...