Added support for multiple profiles in about page (#1243)

Addresses #963.

Supports two setups: getting profile text from page content.

```markdown
---
layout: about
title: about
permalink: /
subtitle: <a href='#'>Affiliations</a>. Address. Contacts. Moto. Etc.

profiles:
  # if you want to include more than one profile, just replicate the following block
  # and create one content file for each profile inside _pages/
  - align: right
    image: prof_pic.jpg
    # content: about_einstein.md
    image_circular: false # crops the image to make it circular
    more_info: >
      <p>555 your office number</p>
      <p>123 your address street</p>
      <p>Your City, State 12345</p>

news: true  # includes a list of news items
selected_papers: true # includes a list of papers marked as "selected={true}"
social: true  # includes social icons at the bottom of the page
---

Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com). You can put a picture in, too. The code is already in, just name your picture `prof_pic.jpg` and put it in the `img/` folder.

Put your address / P.O. box / other info right below your picture. You can also disable any these elements by editing `profile` property of the YAML header of your `_pages/about.md`. Edit `_bibliography/papers.bib` and Jekyll will render your [publications page](/al-folio/publications/) automatically.

Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) and [Academicons](https://jpswalsh.github.io/academicons/), like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.
```

Or getting profile text from `content` (useful when having multiple
profiles).

```markdown
---
layout: about
title: about
permalink: /
subtitle: <a href='#'>Affiliations</a>. Address. Contacts. Moto. Etc.

profiles:
  # if you want to include more than one profile, just replicate the following block
  # and create one content file for each profile inside _pages/
  - align: right
    image: prof_pic.jpg
    content: about_einstein.md
    image_circular: false # crops the image to make it circular
    more_info: >
      <p>555 your office number</p>
      <p>123 your address street</p>
      <p>Your City, State 12345</p>
  - align: left
    image: prof_pic.jpg
    content: about_einstein.md
    image_circular: false # crops the image to make it circular
    more_info: >
      <p>555 your office number</p>
      <p>123 your address street</p>
      <p>Your City, State 12345</p>

news: true  # includes a list of news items
selected_papers: true # includes a list of papers marked as "selected={true}"
social: true  # includes social icons at the bottom of the page
---
```

Which looks like this:


![image](https://user-images.githubusercontent.com/31376482/223251956-aec09f92-55c4-4a17-8ab6-0b30da0970cc.png)

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
Signed-off-by: George Araujo <george.gcac@gmail.com>
This commit is contained in:
George 2023-09-28 15:01:24 -03:00 committed by GitHub
parent 64cf57fab3
commit 45d349fc8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 90 additions and 8 deletions

View File

@ -29,9 +29,9 @@ layout: default
alt=page.profile.image
cache_bust=true -%}
{% endif -%}
{%- if page.profile.address %}
<div class="address">
{{ page.profile.address }}
{%- if page.profile.more_info %}
<div class="more-info">
{{ page.profile.more_info }}
</div>
{%- endif %}
</div>

49
_layouts/profiles.html Normal file
View File

@ -0,0 +1,49 @@
---
layout: default
---
<!-- about.html -->
<div class="post">
<article>
{% if page.profiles -%}
{% for profile in page.profiles %}
{% unless forloop.first %}
<hr>
{% endunless %}
<div class="profile float-{%- if profile.align == 'left' -%}left{%- else -%}right{%- endif -%}">
{%- if profile.image %}
{%- assign profile_image_path = profile.image | prepend: 'assets/img/' -%}
{% if profile.image_circular %}
{%- assign profile_image_class = "img-fluid z-depth-1 rounded-circle" -%}
{% else %}
{%- assign profile_image_class = "img-fluid z-depth-1 rounded" -%}
{% endif %}
{% include figure.html
path=profile_image_path
class=profile_image_class
alt=profile.image -%}
{% endif -%}
{%- if profile.more_info %}
<div class="more-info">
{{ profile.more_info }}
</div>
{%- endif %}
</div>
<div class="clearfix">
{% if profile.content -%}
{% capture profile_content %}{%- include_relative {{ profile.content }} %}{% endcapture %}
{{ profile_content | markdownify }}
{%- else -%}
{{ content }}
{%- endif %}
</div>
{% endfor %}
{%- endif %}
</article>
</div>

View File

@ -8,7 +8,7 @@ profile:
align: right
image: prof_pic.jpg
image_circular: false # crops the image to make it circular
address: >
more_info: >
<p>555 your office number</p>
<p>123 your address street</p>
<p>Your City, State 12345</p>
@ -23,4 +23,4 @@ Write your biography here. Tell the world about yourself. Link to your favorite
Put your address / P.O. box / other info right below your picture. You can also disable any of these elements by editing `profile` property of the YAML header of your `_pages/about.md`. Edit `_bibliography/papers.bib` and Jekyll will render your [publications page](/al-folio/publications/) automatically.
Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) and [Academicons](https://jpswalsh.github.io/academicons/), like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.
Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) and [Academicons](https://jpswalsh.github.io/academicons/), like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.

5
_pages/about_einstein.md Normal file
View File

@ -0,0 +1,5 @@
Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com). You can put a picture in, too. The code is already in, just name your picture `prof_pic.jpg` and put it in the `img/` folder.
Put your address / P.O. box / other info right below your picture. You can also disable any these elements by editing `profile` property of the YAML header of your `_pages/about.md`. Edit `_bibliography/papers.bib` and Jekyll will render your [publications page](/al-folio/publications/) automatically.
Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) and [Academicons](https://jpswalsh.github.io/academicons/), like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.

View File

@ -2,9 +2,9 @@
layout: page
title: submenus
nav: true
nav_order: 6
nav_order: 7
dropdown: true
children:
children:
- title: publications
permalink: /publications/
- title: divider

28
_pages/profiles.md Normal file
View File

@ -0,0 +1,28 @@
---
layout: profiles
title: people
permalink: /people/
subtitle: <a href='#'>Affiliations</a>. Address. Contacts. Moto. Etc.
nav: true
nav_order: 6
profiles:
# if you want to include more than one profile, just replicate the following block
# and create one content file for each profile inside _pages/
- align: right
image: prof_pic.jpg
content: about_einstein.md
image_circular: false # crops the image to make it circular
more_info: >
<p>555 your office number</p>
<p>123 your address street</p>
<p>Your City, State 12345</p>
- align: left
image: prof_pic.jpg
content: about_einstein.md
image_circular: false # crops the image to make it circular
more_info: >
<p>555 your office number</p>
<p>123 your address street</p>
<p>Your City, State 12345</p>
---

View File

@ -120,7 +120,7 @@ blockquote {
.profile {
width: 100%;
.address {
.more-info {
margin-bottom: 5px;
margin-top: 5px;
font-family: monospace;