Show Menu
TOPICS×

Chapter 8 - Landing Page

Covers the implementation of the Teaser and Carousel components to populate a dynamic and exciting Home page.

Prerequisites

This is Chapter 8 of a multi-part tutorial. Chapter 7 can be found here and an overview can be found here .
View the finished code on GitHub or download the finished package for the previous part of the tutorial: WKND Chapter Solutions .

Objective

  1. Understand advanced Core Components of the Carousel and Teaser.
  2. Advanced usage of AEM's Style System and Editable Templates.
  3. Learn to use only a couple of components to create a dynamic landing page.

Add Teaser Component

The Teaser component has already been proxied in to the WKND project as part of the Maven archetype creation. We will update the template policy to allow the Teaser component to be added to the Homepage.
  1. In the ui.apps module beneath /apps/wknd/components you can find the proxied teaser component. Inspect the sling:resourceSuperType property to see that it points to core/wcm/components/teaser/v1/teaser . Also, notice the imageDelegate property. This points to wknd/components/content/image . The Teaser component will use the Image delegate to populate the image as part of the Teaser .
  2. Open a new browser tab. Navigate to AEM > Tools > General > Templates > WKND Site > Landing Page Template and edit the template.
  3. While in Structure mode, select the main Layout Container and tap the policy icon to edit its Policy.
  4. Update the WKND Content policy. In the WKND.Content component group, check the Teaser component to allow it to be added to this layout container, and tap the Check in the top right to save the change.
  5. Update the policy of the Layout Container component, within the main Layout Container:
    Set the policy to the WKND Content policy to apply to the Layout Container. This will allow us to use the Fixed Width style when creating new Layout Containers on the Landing Page Template.

Author Teaser

Next, we will author a few Teaser components to have some sample content to develop against.
  1. Author a few articles using the Article page template. The Teaser component will dynamically pull the Title and Description for linked pages as part of the Teaser content. This ensures consistency throughout the site.
    You can also install the below package using CRX Package Manager , which includes a several sample articles already created.
    The Style System assigns a cq:styleId, a number based on a timestamp, to represent each style. The cq:styleId is then used on the content node to reference the Style from the template. Due to this, most likely installing the above content package will result in un-styled components. This can be easily rectified by re-enabling the styles in the author environment. However it is something to keep in mind when moving content packages between environments that potentially have different policies.
  2. Navigate to the home page at AEM > Sites > WKND Site > Home and edit to open.
  3. Add another Layout Container to the page. Apply the Fixed Width style to the new Layout Container.
  4. Add a new Teaser Component to the page and author some sample content.
    Point to an Article page and enable Call-To-Actions.
    The text for the Title and Description are dynamically pulled from the referenced page in the Link & Actions.
    Choose an image to populate the Teaser.
  5. Add two more Teaser components and populate. Use the Layout mode to re-size the Teasers to align horizontally in the Desktop width.
    Three Teaser components, re-sized to allow each Teaser components to align horizontally.
Next, we will implement a new style for the Teaser component.

Implement Teaser Style - Card

The first style we will implement for the Teaser component is a Card style, intended to be used on the Home page. The Call To Action button will be highlighted in yellow on hover and the image will be styled to cover the contents of the component. The description, if set, will be hidden with this style.
Byline component design as defined by the WKND creative team

Teaser BEM notation

BLOCK cmp-teaser
    ELEMENT cmp-teaser__image
    ELEMENT cmp-teaser__title
    ELEMENT cmp-teaser__title-link
    ELEMENT cmp-teaser__description
    ELEMENT cmp-teaser__action-container
    ELEMENT cmp-teaser__action-link


The above is the BEM notation of the Teaser component. We will target these classes as we style the component.
In the ui.apps project under /apps/wknd/clientlibs/clientlib-site/components .
  1. In the ui.apps project under /apps/wknd/clientlibs/clientlib-site/components :
    1. Create a new folder named teaser
    2. Beneath the teaser folder, create a new file named teaser.less
    3. Beneath the teaser folder, create a new folder named styles
    4. Beneath the styles folder, create a new file named default.less
    5. Beneath the styles folder, create a new file named card.less
  2. Populate teaser.less with the following:
    /* WKND Teaser Styles */
    
    @teaser-light-color: #fff;
    @teaser-dark-color: @text-color;
    
    @import (once) "styles/default.less";
    @import (once) "styles/card.less";
    
    
    
    This will include the default.less and card.less styles. It also creates two teaser-specific colors that will be used throughout the teaser styles.
  3. Populate default.less with the following default styles of the teaser:
     /* WKND teaser - default.less */
    
    .cmp-teaser {
    
        .cmp-teaser__title {
            font-family: @font-family-serif;
            margin-top: 0;
        }
    
        .cmp-teaser__title-link {
         color: @teaser-dark-color;
        }
    
        .cmp-teaser__description {
         color: @gray;
         font-size: @font-size-small;
         margin: 1em 0;
        }
    
        .cmp-teaser__action-link {
         background-color: @brand-primary;
         text-transform: uppercase;
         font-size: @font-size-small;
         padding: 0.75em 3.5em;
         margin-top: .5em;
         font-weight: @font-weight-bold;
         color: @teaser-dark-color;
     }
    }
    
    
    
  4. The card style will be defined in card.less. The class that will be used to define the card style will be named cmp-teaser--card . To create a uniform look, we will set the a fixed height of 350px for the teaser when the card style is applied. We will also make use of CSS transitions to add some subtle animation when the user hovers over the card.
    Populate card.less with the following styles:
    /* WKND teaser - card.less*/
    
    @teaser-height: 350px;
    @teaser-img-height:  @teaser-height;
    
    .cmp-teaser--card {
    
        .cmp-teaser {
            position: relative;
            height:  @teaser-height;
            max-height:  @teaser-height;
            overflow: hidden;
            background-color: #ededed;
            margin-bottom: @gutter-padding;
    
            @media (max-width: @screen-small) {
                width:  @teaser-height;
                margin-left: auto !important;
                margin-right: auto !important;
            }
    
            .cmp-teaser__image {
                width: 100%;
                overflow: hidden;
                padding-top: 0px;
    
                .cmp-image__image {
                    margin-top: 0px;
                    object-fit: cover;
                    object-position: top;
                    height: @teaser-img-height;
                    width: 100%;
                    -webkit-transition: all .2s;
                    -moz-transition: all .2s; 
                    -o-transition: all .2s;
                    transition: all .25s;
                }
            }
    
            .cmp-teaser__title {
                font-family: @font-family-serif;
                width: 100%;
                text-align: left;
                font-size: @font-size-h3;
                margin-top: 0;
                position: absolute;
                top: @gutter-padding;
                padding-left: @gutter-padding;
            }
    
            .cmp-teaser__title-link {
                color: @teaser-light-color;
            }
    
            .cmp-teaser__description {
                display: none;
            }
    
            .cmp-teaser__action-container {
                position: absolute;
                bottom: @gutter-padding * 2;
                left: @gutter-padding;
            }
    
            .cmp-teaser__action-link {
                border: 1px solid @teaser-light-color;
                color: @teaser-light-color;
                background-color: transparent;
                -webkit-transition: all .25s ease-out;
                -moz-transition: all .25s ease-out;
                -o-transition: all .25s ease-out;
                transition: all .25s ease-out;
            }
    
            &:hover {
                .cmp-teaser__action-link {
                    color: @teaser-dark-color;
                    background-color: @brand-primary;
                    border-color: @brand-primary;
                }
    
                .cmp-image__image {
                    -moz-transform: scale(1.05);
                    -webkit-transform: scale(1.05);
                    transform: scale(1.05);
                }
            }
        }
    }
    
    
    
  5. Update /apps/wknd/clientlibs/clientlib-site/main.less to include teaser.less .
    Add an import statement to include teaser.less beneath the other imports of component styles.
    /* main.less */
    
    ...
    
    /* Component Styles */
    @import "components/breadcrumb/breadcrumb.less";
    @import "components/byline/byline.less";
    @import "components/contentfragment/contentfragment.less";
    @import "components/header/header.less";
    @import "components/image/image.less";
    @import "components/layout-container/layout-container.less";
    @import "components/list/list.less";
    @import "components/navigation/navigation.less";
    @import "components/search/search.less";
    @import "components/text/text.less";
    /* import teaser.less */
    @import "components/teaser/teaser.less";
    @import "components/title/title.less";
    
    
  6. Deploy the code to AEM, clear the browser cache to ensure stale CSS is not being served, and refresh the page with the Teaser component(s) to get the full styled.

Apply Teaser Style - Card

  1. In structure mode, click the Teaser's policy icon to configure the policy.
  2. Create a new policy named WKND Teaser
    1. Beneath the Style Tab, create a new style group.
    2. Add a style named Card with a value of cmp-teaser--card
      Add a Card style to the Teaser's policy
  3. Navigate to the Home page, where the teaser components were authored. The Default style defined in clientlib-site should be visible.
    Teaser with default style
  4. Apply the Card style to all of the Teaser components. The components should now all have a uniform height.
    Teaser with card style applied
  5. Switch into Preview mode and view the hover CSS transition effects.

Implement Teaser Style - Slide

Next, a Slide style will be implemented for the Teaser component. This style is intended to be used in conjunction with a full width Carousel component. Based on our mockups, we want the Title, Description and CTA button of the Teaser to grouped together and overlay the Image. We want the image to fill the full width/height of the Carousel container.
  1. In the ui.apps project beneath /apps/wknd/clientlibs/clientlib-site/components/teaser/styles :
    1. Create a new file named slide.less .
    2. Populate slide.less with the following:
      /* WKND teaser - default.less*/
      
      @slide-height: 700px;
      @slide-mobile-height: 400px;
      @slide-content-width: 450px;
      
      .cmp-teaser--slide {
      
      .cmp-teaser {
          min-height: @slide-height;
          position: relative;
          overflow: hidden;
      
          @media (max-width: @screen-small) {
              min-height: @slide-mobile-height;
          }
      
          .cmp-image__image {
              height: @slide-height;
              object-fit: cover;
              object-position: top;
              width: 100%;
              padding: 0;
              margin:0;
      
              @media (max-width: @screen-small) { 
                  opacity: .75;
              }
          }
      
          .cmp-teaser__content {
              .container-content();
              left: 0;
              right: 0;
              position: absolute;
              left: @gutter-padding * 2;
              bottom: 8em;
      
              @media (max-width: @screen-medium) {
                  top: 8em;
              }
      
              @media (max-width: @screen-small) {
                  top: 8em;
                  left:0;
                  text-align: center;
              }
      
          }
      
          .cmp-teaser__title {
              font-family: @font-family-serif;
              width: 100%;
              color: @teaser-dark-color;
              bottom: 20px;
              font-size: @font-size-h1;
              max-width: @slide-content-width - 100;
              @media (max-width: @screen-small) {
                  max-width: 100%;
              }
          }
      
          .cmp-teaser__description {
              color: @gray;
              font-size: @font-size-small;
              margin-bottom: 2em;
              max-width: @slide-content-width;
      
              @media (max-width: @screen-small) {
                  max-width: 100%;
              }
          }
      
          .cmp-teaser__action-link {
              background-color: @brand-primary;
              text-transform: uppercase;
              font-size: @font-size-small;
              padding: 0.75em 3.5em;
              margin-top: .5em;
              font-weight: @font-weight-bold;
          }
        }
      }
      
      
      
  2. Update /apps/wknd/clientlibs/clientlib-site/components/teaser/teaser.less to include slide.less .
    /* WKND Teaser Styles */
    
    @teaser-light-color: #fff;
    @teaser-dark-color: @text-color;
    
    @import (once) "styles/default.less";
    @import (once) "styles/card.less";
    @import (once) "styles/slide.less";
    
    
    
  3. Deploy the code to AEM, clear the browser cache to ensure stale CSS is not being served, and refresh the page with the Teaser component(s) to get the full styles.

Apply Teaser Style - Slide

  1. In structure mode, click the Teaser's policy icon to configure the policy.
  2. Update the WKND Teaser policy:
    Beneath the Style Tab add a style named Slide with a value of cmp-teaser--slide .
  3. Navigate to the Home page, where the Carousel and Teaser components were authored. Update each of the Teasers within the Carousel and apply the Slide style.

Add Animate.css library

At this point the contents of the Carousel, the Teaser with Slide style applied, looks good. Currently, the carousel has a hard transition between panels. We will add Animate.css , a 3rd party CSS library, to our project and include some styles to create a nice fade-in transition to the next slides. We will also create a new Hero style that can be applied to the Carousel to match the mockups of the homepage carousel.
  1. In the ui.apps project beneath /apps/wknd/clientlibs :
    1. Create a new folder named vendor .
    2. Beneath the vendor folder, create a new node named animatecss with a type cq:ClientLibraryFolder .
    3. Add a String[] property to animatecss folder named categories with a value of [vendor.animatess] .
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root 
        xmlns:sling="https://sling.apache.org/jcr/sling/1.0"
        xmlns:jcr="https://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        categories="[vendor.animatecss]"/>
    
    
    
  2. Beneath /apps/wknd/clientlibs/vendor/animatecss client library folder:
    1. Create a new file named css.txt .
    2. Create a new folder named css .
    3. Beneath the css folder create a new file named animate.css .
  3. Populate css.txt with the following to include the animate.css file:
    #base=css
    
    animate.css
    
    
    
  4. Download Animate.css from https://daneden.github.io/animate.css/ and populate animate.css file in the client library.
  5. Update the embed properties of /apps/wknd/clientlibs/clientlib-base client library to embed the vendor animatecss client library.
    The XML representation of clientlib-base is below. Remember the order in which client library categories are embedded effects the order in which CSS is rendered.
    <?xml version="1.0" encoding="UTF-8"?>
     <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
         jcr:primaryType="cq:ClientLibraryFolder"
         allowProxy="{Boolean}true"
         categories="[wknd.base]"
         embed="[wknd.webfonts,vendor.animatecss,core.wcm.components.tabs.v1,core.wcm.components.carousel.v1,core.wcm.components.image.v2,core.wcm.components.breadcrumb.v2,core.wcm.components.search.v1,core.wcm.components.form.text.v2,wknd.breadcrumb,wknd.site]"/>
    
    
    
  6. Update /apps/wknd/clientlibs/clientlib-site/less/mixins.less to include re-usable mixins that leverage the Animate.css animations.
    /* mixins.less */
    
    ...
    
    .animated() {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    .fadeIn() {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }
    
    
    

Implement Home Page Style

Based on the mockups, we would like the Hero Carousel to start at the top of the page and have the Header component overlaid on top of it. We only wish to have this behavior on the Home page, when a Carousel component is configured. Currently the HTML root DIV has padding to ensure that the sticky Header does not overlay the components. In this section we will add a new style that can be applied to the entire page, allowing authors to toggle a Homepage style to remove the padding.
Header component overlaid on top of the Carousel
  1. In the ui.apps project under /apps/wknd/clientlibs/clientlib-site/components/page/styles create a new file named homepage.less
  2. Populate homepage.less with the following:
    /* WKND Page - homepage.less */
    
    body.wknd-page--home {
        .root {
            padding-top:0px;
            @media (max-width: @screen-medium) {
                padding-top:0px;
            }
        }
    }
    
    
    
    This will remove the top padding on the root div.
  3. Update /apps/wknd/clientlibs/clientlib-site/components/page/page.less to include the homepage.less styles:
    /* WKND Page styles */
    
    @import (once) "styles/default.less";
    @import (once) "styles/homepage.less";
    
    
    
  4. Update /apps/wknd/clientlibs/clientlib-author/less/header.less to include a new rule. This rule will allow override the default header style when the Homepage style is applied in the authoring environment.
    /* clientlib-author/less/header.less */
    
    ...
    
    body.wknd-page--home {
    
        .wknd-header {
            position: fixed;
        }
    }
    
    
    
  5. Deploy the code to AEM, clear the browser cache to ensure stale CSS is not being served.

Apply Homepage Style

  1. In structure mode, click the Page editor menu icon > Page Policy :
  2. Create a new policy named WKND Landing Page
  3. Beneath the Style Tab, add a new style named Homepage with a value of wknd-page--hero
    Add a Hero style to the Carousel's policy
  4. Navigate to the Home page, where the Carousel has been authored. After configuring the Page Policy Styles, a new icon should appear in the Page Editor Menu bar. Click the paintbrush and select the Homepage style.
    Page with Homepage style applied.
    You should now see the Hero carousel shift towards the top of the page. It is still possible to edit the carousel and when viewing the page in Preview or wcmmode=disabled the carousel will cover the entire top half of the page.

Putting It Together

Below is a screenshot of an authored version of the finished Homepage:

Next steps

View the finished code on GitHub or download the finished package for this part of the tutorial: WKND Chapter Solutions