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

Prerequisites

This is Chapter 7 of a multi-part tutorial. Chapter 6 can be found here and an overview can be found here.

You can check out the finished code on GitHub or you can download the solution package:

Изтегляне


At this point in the WKND tutorial, considerable time has been spent implementing a well-structured Article page template. We can create great articles. However, the Homepage has been neglected. In this part, we will extend two components of AEM Core Components:

  • Teaser Component - Includes an image, title, description and call to action button(s)
  • Carousel Component - A modified container component, that allows authors to use existing components to populate multiple "slides" of a carousel. 

Below are some examples of the finished Teaser and Carousel components, after the various styles and configurations have been applied to the WKND project:

WKND Teaser Sample
Teaser component with a Card style applied
WKND Hero Carousel
Carousel component with a Hero-style applied. The Carousel component actually embeds a Teaser component that in turn has it's own style.

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
     

    2018-11-20_at_5_43am
  2. 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.

    2018-11-20_at_5_55am
  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.

    2018-11-20_at_5_56am
  5. Update the policy of the Layout Container component, within the main Layout Container:

    2018-11-20_at_6_04am

    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. 

    nov-20-2018_06-06-38

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 easyily 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. 

    nov-20-2018_06-11-35
  4. Add a new Teaser Component to the page and author some sample content.

    link and actions
    Point to an Article page and enable Call-To-Actions.
    2018-11-20_at_6_50am
    The text for the Title and Description are dynamically pulled from the referenced page in the Link & Actions.
    2018-11-20_at_6_51am
    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.

    2018-11-20_at_6_58am
    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.

2018-11-20_at_7_30am
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
    2018-11-20_at_7_49am
  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:

    .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

    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 AEM, navigate to the Landing Page Template:

    AEM Start > Tools > General > Templates > WKND Site > Landing Page Template

  2. In structure mode, click the Teaser's policy icon to configure the policy.

    2018-11-20_at_8_30am
  3. 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
    Add a Card style to the Teaser's policy
  4. Navigate to the Home page, where the teaser components were authored. The Default style defined in clientlib-site should now be visible.

    Teaser with default style
    Teaser with default style
  5. Apply the Card style to the Teaser components. The components should now all have a uniform height.

    Teaser with card style
    Teaser with card style
  6. Switch into Preview mode and view the hover CSS transistion effects.

Like the Teaser, the Carousel 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 Carousel component to be added to the Homepage.

  1. In the ui.apps module beneath /apps/wknd/components you can find the proxied carousel component. Inspect the sling:resourceSuperType property to see that it points to core/wcm/components/carousel/v1/carousel. Notice the cq:editConfig node. The cq:editConfig allows developers to specificy advanced edit behavior when a component is authored. In this case, following an edit, a full page refresh is triggered. This is a common design pattern when working with components that rely heavily on javascript. 
     

    2018-11-20_at_9_14am
  2. 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.

    2018-11-20_at_5_55am
  4. Update the WKND Content policy. In the WKND.Content component group, check the Carousel component to allow it to be added to this layout container, and tap the Check in the top right to save the change.

    2018-11-20_at_9_20am
  5. Update the Carousel's policy by clicking its policy icon.

    2018-11-20_at_1020am
  6. Create a new policy named WKND Carousel.

    Unlike other components, the Carousel is considered a container component, in that it embeds sub-components, similar to the Layout Container. Update the Allowed Components to include just the WKND.ContentTeaser component. 

    2018-11-20_at_1022am

Next we will author an un-styled Carousel on the Home page. This Carousel will act as a hero carousel, and contain several teaser components as the slides.

  1. Navigate to the home page at AEM > Sites > WKND Site > Home and edit to open.

  2. Add a Carousel component to the page, above the fixed Layout Container, directly beneath the Header. We want the Carousel Component to span the full width of the page.

    2018-11-20_at_1043am
  3. Add a new Teaser Component to the Carousel Component. Note that the only component available to be added to the Carousel is the Teaser component. This is based on the policy configured in the previous section.

  4. Edit the Teaser component by clicking the wrench icon. Be sure to edit the Teaser component and not the outer Carousel.

    2018-11-20_at_1046am
  5. Author the Teaser Component with a skateboarding hero image. Leave the Title and Description fields checked to pull from the Page's title and description. Link the Teaser to point to the Ultimate guide to LA Skateparks article and enable the Call-To-Actions. Update the CTA label to be Read More.

    hero-teaser
  6. Edit the Carousel component to add two more additional Teasers beneath the LA Skatepark teaser.

    carousel-addteasers
  7. After more than one item has been added to the Carousel, a new icon will appear in the Carousel's edit menu. Click the select panel icon to navigate to other panels within the Carousel.

    2018-11-20_at_1104am

    You can now edit the other Teaser components. Author the other Teaser components so that you end up with three Teasers inside the carousel that look something like the following:

    2018-11-20_at_1113am

    In the next sections, we will implement an additional style, Slide, to the Teaser component that is optimized for the Carousel. We will also implement a style, Hero, for the Carousel.

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. Unfortunately the out of the box markup for the Teaser Core Component does not wrap the Title, Description, and CTA button(s). We could probably accomplish this with CSS alone, however we will take this opportunity to extend the markup of the Teaser component.

2018-11-20_at_1123am
  1. In the ui.apps project under /apps/wknd/components/content/teaser

    1. Create a new file named teaser.html
    2. Populate teaser.html with the following:
    <!--/* WKND Teaser Component
           Overrides /apps/core/wcm/components/teaser/v1/teaser/teaser.html
        */-->
    
      <div data-sly-use.teaser="com.adobe.cq.wcm.core.components.models.Teaser"
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      data-sly-use.imageTemplate="image.html"
      data-sly-use.titleTemplate="title.html"
      data-sly-use.descriptionTemplate="description.html"
      data-sly-use.actionsTemplate="actions.html"
      data-sly-test.hasContent="${teaser.imageResource || teaser.title || teaser.description || teaser.actions.size > 0}"
      class="cmp-teaser${!wcmmode.disabled && teaser.imageResource ? ' cq-dd-image' : ''}">
     <sly data-sly-call="${imageTemplate.image @ teaser=teaser}"></sly>
     
    <!--/* Add content wrapper div to surround text elements */-->
     <div class="cmp-teaser__content-wrapper">
        <sly data-sly-call="${titleTemplate.title @ teaser=teaser}"></sly>
        <sly data-sly-call="${descriptionTemplate.description @ teaser=teaser}"></sly>
        <sly data-sly-call="${actionsTemplate.actions @ teaser=teaser}"></sly>
     </div>
    
    </div>
    <sly data-sly-call="${templates.placeholder @ isEmpty=!hasContent, classAppend='cmp-teaser'}"></sly>
     

    By adding the above teaser.html file, we are effectively overriding the HTL script from the v1 Teaser component located at /apps/core/wcm/components/teaser/v1/teaser/teaser.html. This is an effective way to override the markup of the proxied component. As a best practice, you should only override the files that you intend to extend.

    In this case, we have added a wrapper div with a class name of cmp-teaser__content-wrapper. This div surrounds the Title, Description, and CTA markup. 

    Внимание:

    By including the teaser.html file beneath /apps/wknd/components/content/teaser we are extending the markup for ALL teaser components used on the WKND site, not just the Teasers meant to be used in the Carousel. This is an important consideration when making HTL changes to a component.

  2. 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-wrapper {
                .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: @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;
            }
        }
    }
    
  3. 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";
  4. Deploy the code to AEM

    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 - Slide

  1. In AEM, navigate to the Landing Page Template:

    AEM Start > Tools > General > Templates > WKND Site > Landing Page Template

  2. In structure mode, click the Teaser's policy icon to configure the policy.

    2018-11-20_at_8_30am
  3. Update the WKND Teaser policy

    1. Beneath the Style Tab add a style named Slide with a value of cmp-teaser--slide
    Add a Card style to the Teaser's policy
    Add a Card style to the Teaser's policy
  4. Navigate to the Home page, where the Carousle and Teaser components were authored. Update each of the Teasers within the Carousel and apply the Slide style.

    Teaser within the Carousel with the Slide style applied.
    Teaser within the Carousel with the Slide style applied.

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]
    2018-11-20_at_2_10pm
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root 
        xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
        xmlns:jcr="http://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
    2018-11-20_at_2_13pm
  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 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 clientlibrary 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.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;
    }
BLOCK cmp-carousel
    ELEMENT cmp-carousel__content
    ELEMENT cmp-carousel__item
    ELEMENT cmp-carousel__action
        MOD cmp-carousel__action--previous
        MOD cmp-carousel__action--next
    ELEMENT cmp-carousel__action-icon
    ELEMENT cmp-carousel__action-text
    ELEMENT cmp-carousel__indicators
    ELEMENT cmp-carousel__indicator

The above is the BEM notation of the Carousel 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 carousel
    2. Beneath the carousel folder, create a new file named carousel.less
    3. Beneath the carousel 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 hero.less
    2018-11-20_at_1_56pm
  2. Populate carousel.less with the following:

    /* WKND Carousel Styles */
    
    @import (once) "styles/default.less";
    @import (once) "styles/hero.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 carousel. This will include the .animated() and .fadeIn() mixins in order to make the carousel panels fade in when a transition occurs.

    /* WKND Carousel - default.less */
    
    .cmp-carousel {
    
        .cmp-carousel__item {
            .animated();
            .fadeIn();
    
            display: none;
            &--active {
                display: block;
            }
        }
    
    }
  4. The Hero style will be defined in hero.less. The class that will be used to define the card style will be named cmp-carousel--hero. We will update the carousel indicators to be positioned closer to the Teaser content. The carousel actions, the left and right arrows, are also updated to be a darker color.

    Populate hero.less with the following LESS: 

    /* WKND Carousel - hero.less*/
     
    @cmp-carousel-indicator-size: 10px;
    @cmp-carousel-action-icon-size: 24px;
    
    .cmp-carousel--hero {
        padding:0;
    
        .cmp-carousel__action {
            width: 8%;
            cursor: pointer;
    
            @media (max-width: @screen-medium) {
                width: 5%;
            }
            @media (max-width: @screen-small) {
                width: @gutter-padding * 2;
            }
        }
    
        .cmp-carousel__action--previous {
            left: 0;
            .cmp-carousel__action-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    
            }
        }
        
        .cmp-carousel__action--next {
            right: 0;
        
            .cmp-carousel__action-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
            }
        }
        
        .cmp-carousel__indicators {
            .container-content();
            padding: 0;
            bottom: 30px;
            padding-left: @gutter-padding * 2;
            display: flex;
            justify-content: left;
            list-style: none;
            background-color: transparent;
            height:50px;
    
            @media (max-width: @screen-medium) {
                justify-content: center;
            }
        }
        
        .cmp-carousel__indicator {
            position: relative;
            cursor: pointer;
            flex: 0 1 auto;
            width: @cmp-carousel-indicator-size;
            height: @cmp-carousel-indicator-size;
            margin: 6px 8px;
            border-radius: 50%;
        
            font-size: 0;
            text-indent: -3000px;
        
            background-color: rgba(116, 116, 116, 0.5);
        
            &--active {
                background-color: rgba(0, 0, 0, 0.9);
            }
        }
        
    }
  5. Update /apps/wknd/clientlibs/clientlib-site/main.less to include carousel.less.

    Add an import statement to include carousel.less beneath the other imports of component styles.

    /* main.less */
    
    ...
    
    /* Component Styles */
    @import "components/breadcrumb/breadcrumb.less";
    @import "components/byline/byline.less";
    /* import carousel styles */
    @import "components/carousel/carousel.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 "components/teaser/teaser.less";
    @import "components/title/title.less";
  6. Deploy the code to AEM

    Deploy the code to AEM, clear the browser cache to ensure stale CSS is not being served.

  1. In AEM, navigate to the Landing Page Template:

    AEM Start > Tools > General > Templates > WKND Site > Landing Page Template

  2. In structure mode, click the Carousel's policy icon to configure the policy.

    2018-11-20_at_2_52pm
  3. Update the WKND Carousel policy

    1. Beneath the Style Tab add a style named Hero with a value of cmp-carousel--hero
    Add a Hero style to the Carousel's policy
    Add a Hero style to the Carousel's policy
  4. Navigate to the Home page, where the Carousel was authored. Apply the Hero style to the Carousel component.

    Teaser within the Carousel with the Slide style applied.
    Teaser within the Carousel with the Slide style applied.

    You should see a repositioning of the carousel indicators and an update to the styles of the previous and next buttons. You should also see a nice fade transition between slides.

    In the next section we will complete the Hero carousel by updating the page design so that the Header component overlays the carousel.

Implement Home Page Style

2018-11-20_at_3_00pm
Header component overlaid on top of the Carousel

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.

  1. In the ui.apps project under /apps/wknd/clientlibs/clientlib-site/components/page/styles:

    1. 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 update the 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

    Deploy the code to AEM, clear the browser cache to ensure stale CSS is not being served.

Apply Homepage Style

  1. In AEM, navigate to the Landing Page Template:

    AEM Start > Tools > General > Templates > WKND Site > Landing Page Template

  2. In structure mode, click the Page editor menu > Page Policy

    2018-11-20_at_3_31pm
  3. Create a new policy named WKND Landing Page

    1. Beneath the Style Tab add a style named Homepage with a value of wknd-page--hero
    Add a Hero style to the Carousel's policy
    Add a Hero style to the Carousel's policy
  4. Navigate to the Home page, where the Carousel was authored. Apply the Homepage style to the Page.

    Page with Homepage style applied.
    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:

finalchapter7

Help!

If you get stuck or have additional questions make sure to check out the Experience League forums for AEM or view existing GitHub issues.

Didn't find what you were looking for? Think you found an error? Please file a GitHub issue for the WKND project.

Next steps

Next part in the tutorial: 

Изтегляне

Този материал е лицензиран под лиценз Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  Публикациите в Twitter™ и Facebook не попадат под клаузите на Creative Commons.

Правни бележки   |   Правила за онлайн поверителност