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