Author component

As we just saw, the Card wide variant uses some information from the article author. We don't have a component for users or authors so we need to quickly build one.

1. Inside src/patterns/components create a new folder called author

2. Inside the author folder create author.json, author.twig, author.scss

3. Add the code below to each of the respective files

author.json

{
  "author": {
    "photo": "<img src='https://source.unsplash.com/_cvwXhGqG-o/100x100' alt='Author's headshot' />",
    "name": "Valentina De Leon",
    "title": "Digital Strategist"
  }
}

author.twig

{{ attach_library('training_theme/author') }}

<div class="author{{ modifier ? ' ' ~ modifier }}
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>
  <div class="author__meta">
    <div class="author__name">{{ author.name }}</div>
    <div class="author__title">{{ author.title }}</div>
  </div>
  <div class="author__photo">{{ author.photo }}</div>
</div>

author.scss

// Import site utilities
@import '../../global/utils/init';

.author {
  align-items: center;
  color: $color-gray-dark;
  display: flex;
  flex-direction: row;
  font-size: 1.3rem;
  height: 70px;
}

.author__photo {
  height: 70px;
  width: 70px;

  img {
    border-radius: 50%;
  }
}

.author__meta {
  text-align: right;
  padding-right: 10px;
}

.author__name {
  text-align: right;
  text-transform: uppercase;
}

.author__title {
  font-style: italic;
}

• Create the author library in training_theme.libraries.yml.

Update the Card component with new Author component

Let's update the card component so we make use of the newly built Author component.

1. Edit card.twig by replacing the current code for author information with the code below:

card.twig

<div data-gb-custom-block data-tag="block">

  

<div data-gb-custom-block data-tag="if">

    {%
      include '@training_theme/author/author.twig' with {
        "author": author
      } only
    %}
  

</div>

</div>

1. Rebuild your theme by running

npm run build && npm run watch

Windows users may need to run the two commands above separately (npm run build then npm run watch

Full Card code

card.twig

{{ attach_library('training_theme/card') }}

<article class="card{{ modifier ? ' ' ~ modifier }}
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>

  {# Date for featured content cards. #}
  

<div data-gb-custom-block data-tag="if" data-0='card--wide'>

    <div class="card__featured--date">
      

<div data-gb-custom-block data-tag="block">

        {{ date }}
      

</div>

    </div>
  

</div>

  

<div data-gb-custom-block data-tag="if">

    <div class="card__media">
      {{ image }}
    </div>
  

</div>

  <div class="card__content">
    

<div data-gb-custom-block data-tag="if">

      {{ title_prefix }}
      {%
        include '@training_theme/heading/heading.twig' with {
          heading: heading
        } only
      %}
      {{ title_suffix }}
    

</div>

    {# Date for regular content cards. #}
    

<div data-gb-custom-block data-tag="if" data-0='card--wide'>

      <div class="eyebrow card__date">
        

<div data-gb-custom-block data-tag="block">

          {{ date }}
        

</div>

      </div>
    

</div>

    

<div data-gb-custom-block data-tag="if">

      <div class="eyebrow card__category">
        {{ category }}
      </div>
    

</div>

    

<div data-gb-custom-block data-tag="if">

      <div class="card__body">
        {{ body_text }}
      </div>
    

</div>

    

<div data-gb-custom-block data-tag="block">

      

<div data-gb-custom-block data-tag="if">

        <ul class="tags">
          

<div data-gb-custom-block data-tag="for">

            <li class="tag__item">
              <a href="{{ item.url }}" class="tag__link">
                {{ item.name }}
              </a>
            </li>
          

</div>

        </ul>
      

</div>

    

</div>

    

<div data-gb-custom-block data-tag="block">

      

<div data-gb-custom-block data-tag="if">

        {%
          include '@training_theme/author/author.twig' with {
            "author": author
          } only
        %}
      

</div>

    

</div>

  </div>
</article>