CERN Accelerating science

Close menu

Author info

Components - CONTENT

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

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