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>
wangmagg · May 14, 2024 · c959953 · c959953
1 parent 70de5a9
commit c959953
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 8 deletions.
diff --git a/_layouts/about.html b/_layouts/about.html
@@ -29,9 +29,9 @@ <h1 class="post-title">
               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>

diff --git a/_layouts/profiles.html b/_layouts/profiles.html
@@ -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>
diff --git a/_pages/about.md b/_pages/about.md
@@ -8,7 +8,14 @@ profile:
   align: right
   image: prof_pic.jpg
   image_circular: false # crops the image to make it circular
+<<<<<<< HEAD
   address: 
+=======
+  more_info: >
+    <p>555 your office number</p>
+    <p>123 your address street</p>
+    <p>Your City, State 12345</p>
+>>>>>>> 45d349f (Added support for multiple profiles in about page (#1243))
 
 <<<<<<< HEAD
 news: false  # includes a list of news items
@@ -30,4 +37,8 @@ I work on experimental design methodology for evaluating the causal effects of i
 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.
 >>>>>>> 2b725c1 (Fix typo (#1356))
 
+<<<<<<< HEAD
 Previously, I received a B.S. in Biomedical Engineering and in Computer Science from Johns Hopkins University. I am grateful for several research mentors I had the privilege of working with prior to coming to Stanford: [Michael Miller](https://www.bme.jhu.edu/people/faculty/michael-i-miller/) at the [Johns Hopkins Center for Imaging Science](https://www.cis.jhu.edu/), [Sharon Hori](https://profiles.stanford.edu/sharon-hori?tab=bio) at the [Stanford Canary Center for Early Cancer Detection](https://canarycenter.stanford.edu/), and [Alain Trouvé](https://atrouve.perso.math.cnrs.fr/) at the [ENS Paris-Saclay Centre Borelli](https://centreborelli.ens-paris-saclay.fr/en).
+=======
+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.
+>>>>>>> 45d349f (Added support for multiple profiles in about page (#1243))
diff --git a/_pages/about_einstein.md b/_pages/about_einstein.md
@@ -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.
diff --git a/_pages/dropdown.md b/_pages/dropdown.md
@@ -2,11 +2,11 @@
 layout: page
 title: submenus
 nav: true
-nav_order: 6
+nav_order: 7
 dropdown: true
-children: 
-    - title: research
-      permalink: /research/
+children:
+    - title: publications
+      permalink: /publications/
     - title: divider
     - title: projects
       permalink: /projects/

diff --git a/_pages/profiles.md b/_pages/profiles.md
@@ -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>
+---
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -120,7 +120,7 @@ blockquote {
 .profile {
   width: 100%;
 
-  .address {
+  .more-info {
     margin-bottom: 5px;
     margin-top: 5px;
     font-family: monospace;