Author info

Download files82.15 KB

A person’s profile is used when a profile of a person needs to be presented, for example to show the writer of an opinion. It consists a profile picture, the name of the user with a link that redirects to a list of all content related to this user, and the description of the user related to the context.

Usage

CERN provided Drupal 8 sites:

Install and enable the Author info module and all its dependencies under Extend
After installing you can add the author info paragraph on all content types which use Paragraph components like the Landing Page
To create such a paragraph just choose Author info from the Paragraph chooser (if there is one) and define your author(s)
Then just click save and your info is done

Other:

Just include one of the variant's HTML snippets
If you're experienced with HTML and CSS you even can customise it further!

Peoples profile COMPONENT

<div id="component-profile">

  <div class="profile-image">

    <a href="#">

      <img src="images/Albert_Einstein_Head.jpg?itok=r0OEkkLS" width="600" height="800" alt="Albert" typeof="foaf:Image" class="img-responsive">

    </a>

  </div>

  <div class="profile-author">By

    <a href="/authors/albert-einstein" hreflang="en">Albert Einstein</a>

  </div>

  <span>

    <p><strong>Albert Einstein</strong> was a German-born theoretical physicis who developed the <a href="https://en.wikipedia.org/wiki/Theory_of_relativity">theory of relativity</a>, one of the two pillars of modern physics.</p>

  </span>

</div>

Show more code

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");

/* ****************************************** component profile */

#component-profile .profile-image img {

  width: 250px;

  height: 250px;

  background-size: cover; }


#component-profile .profile-author {

  font-family: 'Source Sans Pro', sans-serif;

  font-size: 20px; }

  #component-profile .profile-author h2 {

    font-size: 20px;

    display: inline-block;

    text-decoration: underline;

    font-weight: 700; }


#component-profile span {

  display: block;

  font-family: 'Source Sans Pro', sans-serif;

  font-size: 14px; }

Show more code

The zip file contains the orginal SCSS files

Show more code

Just copy/paste the HTML code and add your author information

CERN Accelerating science