Skip to content

Commit 45d349f

Browse files
george-gcageorge-gca
authored
Added support for multiple profiles in about page (alshedivat#1243)
Addresses alshedivat#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>
1 parent 64cf57f commit 45d349f

File tree

7 files changed

+90
-8
lines changed

7 files changed

+90
-8
lines changed

‎_layouts/about.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ <h1 class="post-title">
2929
alt=page.profile.image
3030
cache_bust=true -%}
3131
{% endif -%}
32-
{%- if page.profile.address %}
33-
<div class="address">
34-
{{ page.profile.address }}
32+
{%- if page.profile.more_info %}
33+
<div class="more-info">
34+
{{ page.profile.more_info }}
3535
</div>
3636
{%- endif %}
3737
</div>

‎_layouts/profiles.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
layout: default
3+
---
4+
5+
<!-- about.html -->
6+
<div class="post">
7+
8+
<article>
9+
{% if page.profiles -%}
10+
{% for profile in page.profiles %}
11+
{% unless forloop.first %}
12+
<hr>
13+
{% endunless %}
14+
<div class="profile float-{%- if profile.align == 'left' -%}left{%- else -%}right{%- endif -%}">
15+
{%- if profile.image %}
16+
{%- assign profile_image_path = profile.image | prepend: 'assets/img/' -%}
17+
18+
{% if profile.image_circular %}
19+
{%- assign profile_image_class = "img-fluid z-depth-1 rounded-circle" -%}
20+
{% else %}
21+
{%- assign profile_image_class = "img-fluid z-depth-1 rounded" -%}
22+
{% endif %}
23+
24+
{% include figure.html
25+
path=profile_image_path
26+
class=profile_image_class
27+
alt=profile.image -%}
28+
{% endif -%}
29+
{%- if profile.more_info %}
30+
<div class="more-info">
31+
{{ profile.more_info }}
32+
</div>
33+
{%- endif %}
34+
</div>
35+
36+
<div class="clearfix">
37+
{% if profile.content -%}
38+
{% capture profile_content %}{%- include_relative {{ profile.content }} %}{% endcapture %}
39+
{{ profile_content | markdownify }}
40+
{%- else -%}
41+
{{ content }}
42+
{%- endif %}
43+
</div>
44+
45+
{% endfor %}
46+
{%- endif %}
47+
</article>
48+
49+
</div>

‎_pages/about.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ profile:
88
align: right
99
image: prof_pic.jpg
1010
image_circular: false # crops the image to make it circular
11-
address: >
11+
more_info: >
1212
<p>555 your office number</p>
1313
<p>123 your address street</p>
1414
<p>Your City, State 12345</p>
@@ -23,4 +23,4 @@ Write your biography here. Tell the world about yourself. Link to your favorite
2323

2424
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.
2525

26-
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.
26+
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.

‎_pages/about_einstein.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
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.
2+
3+
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.
4+
5+
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.

‎_pages/dropdown.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
layout: page
33
title: submenus
44
nav: true
5-
nav_order: 6
5+
nav_order: 7
66
dropdown: true
7-
children:
7+
children:
88
- title: publications
99
permalink: /publications/
1010
- title: divider

‎_pages/profiles.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
layout: profiles
3+
title: people
4+
permalink: /people/
5+
subtitle: <a href='#'>Affiliations</a>. Address. Contacts. Moto. Etc.
6+
nav: true
7+
nav_order: 6
8+
9+
profiles:
10+
# if you want to include more than one profile, just replicate the following block
11+
# and create one content file for each profile inside _pages/
12+
- align: right
13+
image: prof_pic.jpg
14+
content: about_einstein.md
15+
image_circular: false # crops the image to make it circular
16+
more_info: >
17+
<p>555 your office number</p>
18+
<p>123 your address street</p>
19+
<p>Your City, State 12345</p>
20+
- align: left
21+
image: prof_pic.jpg
22+
content: about_einstein.md
23+
image_circular: false # crops the image to make it circular
24+
more_info: >
25+
<p>555 your office number</p>
26+
<p>123 your address street</p>
27+
<p>Your City, State 12345</p>
28+
---

‎_sass/_base.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ blockquote {
120120
.profile {
121121
width: 100%;
122122

123-
.address {
123+
.more-info {
124124
margin-bottom: 5px;
125125
margin-top: 5px;
126126
font-family: monospace;

0 commit comments

Comments
 (0)