Update members (#67)

* Update members template

* Allow entering socials and websites as string and as list

* Rename images, try socials as single string

* Chloe no longer current

* Update no_image.png to less serious svg

* Update readme

* Add Roberta, Eva, Gabriel and So

* Only show past member image if present

* Update css, package-lock.json

Also add HOWTO.md. The idea is to list typical tasks so people know how to do them (add member, remove member, etc)

* Replace portrait image with correct one

HOWTO.md

@@ -0,0 +1,22 @@
+This document lists common tasks.
+
+# Add a new member
+
+- Create a new folder under `assets/img/members/` with the name of the
+  person. If the name is taken you can add the last name or use a nickname
+  instead.
+- Take a look at `assets/img/members/abe/` as an example for how to name the
+  images. We use WEBP because the file size is smaller and the quality better
+  than JPG. Use:
+    - NAME-thumb.webp (400x400 portrait)
+    - NAME-portrait.webp (larger portrait, longer side 1000 ~ 2000 pixels)
+    - NAME-ARTWORK1.webp (artworks, longer side 1000 ~ 2000 pixels)
+    - NAME-ARTWORK2.webp
+- Duplicate one of the files under `_members/` and rename it matching the folder name you used above.
+- Make sure `current` is `true` for current members, make it `false` for past
+  members.
+- Make sure `thumb`, `portrait` and `portfolio_image_locations` point at the right images.
+- Make sure `website` and `socials` start with `https://`. Use `-` if none.
+- Paste the full description on the line following `---` at the bottom.
+
+

README.md

@@ -90,6 +90,7 @@ The people page, which is found at `people.html`, is automatically built from te
 If a member hasn't submitted member page text or images, you can force that a link not be created to a member page from the people page. This is done by making sure there is nothing past the front matter, meaning, if the last line in the member markdown file is the second `---`.
 
 #### member pages
+
 Each member has their own markdown (`*.md`) file. The stuff at the top ("front matter") is data that can be accessed by the script that builds the people page, and each member's page. It defines text, and where relevant files are.
 
 ```
@@ -110,18 +111,20 @@ socials:
 
 This is the text of your personal page. (10)
 ```
+
 - (1) delineates the front matter, is required
 - (2) required configuration for the framework (Jekyll)
 - (3) shown in list view, and personal page
 - (4) shown in list view, text the describes the page for search engines
 - (5) location of image in list view
 - (6) location of portrait in personal page
 - (7) file location of portfolio image shown in personal page
-- (8) website url
-- (9) list the links to your socials
+- (8) website url. If more than one, use a list like in socials.
+- (9) list the links to your socials.
 - (10) the text you want shown on your personal page
 
 
+
 #### communities section
 
 The information for the communities section is stored as a data file in `_data/communities.yml`. It is in YAML format. Please see the desired format below.

_layouts/member.html

@@ -18,22 +18,35 @@ <h1 class="text-left">{{ page.full_name }}</h1>
                     {{ content | markdownify }}
 
                     {% if page.website %}
-                    <br>
-                    <span class="font-bold">website:</span> 
-                    <a href="{{ page.website | relative_url }}">{{ page.website }}</a>
+                    {% if page.website.first %}
+                      <br><span class="font-bold">websites:</span> 
+                      <ul>
+                      {% for www in page.website %}
+                        <li><a href="{{ www | relative_url }}">{{ www }}</a></li>
+                      {% endfor %}
+                      </ul>
+                    {% else %}
+                      <br><span class="font-bold">website:</span> 
+                      <a href="{{ page.website | relative_url }}">{{ page.website }}</a>
                     {% endif %}
+                    {% endif %}
+
                     {% if page.socials %}
-                    <br>
-                    <span class="font-bold">socials:</span><br>
+                    {% if page.socials.first %}
+                    <br><span class="font-bold">socials:</span><br>
                     <ul>
                         {% for link in page.socials %}
                         <li><a href="{{ link | relative_url }}">{{ link }}</a></li>
                         {% endfor %}    
                     </ul>
+                    {% else %}
+                      <br><span class="font-bold">social:</span> 
+                      <a href="{{ page.socials | relative_url }}">{{ page.socials }}</a>
+                    {% endif %}
                     {% endif %}
                 </div>
-                {% if page.portfolio_image_locations %}
 
+                {% if page.portfolio_image_locations %}
                 <br>
                 <div class="grid grid-flow-row lg:grid-col-3 gap-2">
                     {% for image in page.portfolio_image_locations %}

_members/abe.md

@@ -3,15 +3,14 @@ layout: member
 current: true
 full_name: Abe Pazos Solatie
 description: computational artist
-thumb: /assets/img/members/abe/thumb-abe.webp
-portrait: /assets/img/members/abe/portrait-abe.webp
+thumb: /assets/img/members/abe/aBe-thumb.webp
+portrait: /assets/img/members/abe/aBe-portrait.webp
 portfolio_image_locations:
   - /assets/img/members/abe/aBe-ALifeCycle.webp
   - /assets/img/members/abe/aBe-dave-screenshot-1.webp
   - /assets/img/members/abe/aBe-ratkaisu-multiplica-render3.webp
   - /assets/img/members/abe/aBe-tracing-the-line-closeup.webp
 website: https://www.hamoid.com
-socials: 
-  - https://genart.social/@hamoid
+socials: https://genart.social/@hamoid
 ---
 Abe Pazos Solatie (1975, Finland) is an artist who writes computer code to generate still, animated and interactive audiovisual works. He explores the connections between nature and algorithms by creating slow, organic, growing and decaying visuals. He has a computer science and interactive design background, is a passionate contributor to free, open-source software for the arts and performs live visuals.

_members/chloe.md

@@ -1,13 +1,13 @@
 ---
 layout: member
-current: true
+current: false
 full_name: Chloé Mari Bellangé 
 description: painter
-thumb: /assets/img/members/no_image.png
-portrait: /assets/img/members/no_image.png
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
 portfolio_image_locations:
-  - /assets/img/members/no_image.png
-  - /assets/img/members/no_image.png
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
 website: 
 socials: 
----
+---

_members/eva.md

@@ -0,0 +1,14 @@
+---
+layout: member
+current: true
+full_name: Eva Maria Resch 
+description: writer, painter
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
+portfolio_image_locations:
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
+website: 
+socials: 
+---
+

_members/gabriel.md

@@ -0,0 +1,14 @@
+---
+layout: member
+current: true
+full_name: Gabriel Jeanjean
+description: visual artist
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
+portfolio_image_locations:
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
+website: https://gabrieljeanjean.com/
+socials:
+  - https://www.instagram.com/gabriel.jeanjean/
+---

_members/julia.md

@@ -3,11 +3,11 @@ layout: member
 current: true
 full_name: Julia Thomas
 description: artist, philosopher, engineer and clinician
-thumb: /assets/img/members/no_image.png
-portrait: /assets/img/members/no_image.png
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
 portfolio_image_locations:
-  - /assets/img/members/no_image.png
-  - /assets/img/members/no_image.png
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
 website: 
 socials: 
 ---

_members/marta.md

@@ -3,11 +3,11 @@ layout: member
 current: true
 full_name: Marta Muschietti
 description: illustrator / graphic designer
-thumb: /assets/img/members/no_image.png
-portrait: /assets/img/members/no_image.png
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
 portfolio_image_locations:
-  - /assets/img/members/no_image.png
-  - /assets/img/members/no_image.png
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
 website: 
 socials: 
 ---

_members/michelle.md

@@ -3,11 +3,11 @@ layout: member
 current: true
 full_name: Michelle Meissner 
 description: painter
-thumb: /assets/img/members/no_image.png
-portrait: /assets/img/members/no_image.png
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
 portfolio_image_locations:
-  - /assets/img/members/no_image.png
-  - /assets/img/members/no_image.png
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
 website: 
 socials: 
 ---

_members/roberta.md

@@ -0,0 +1,30 @@
+---
+layout: member
+current: true
+full_name: Roberta Maddalena (Bireau) 
+description: painter / filmmaker
+thumb: /assets/img/members/roberta/Roberta-thumb.webp
+portrait: /assets/img/members/roberta/Roberta-portrait.webp
+portfolio_image_locations:
+  - /assets/img/members/roberta/Roberta_01.webp
+  - /assets/img/members/roberta/Roberta_02.webp
+  - /assets/img/members/roberta/Roberta_03.webp
+  - /assets/img/members/roberta/Roberta_04.webp
+  - /assets/img/members/roberta/Roberta_05.webp
+website:
+  - https://www.robertamaddalena.com
+  - https://www.bireau.com
+socials:
+  - https://www.instagram.com/robertamaddalenabireau/
+---
+
+I am a Berlin-based visual artist and filmmaker with a holistic approach to creativity.
+My artistic vision is all about crafting vibrant images that blur the line between reality and
+dreams, blending surrealism with humour or sometimes nostalgia.
+
+I weave narratives that explore themes of diversity, feminism and human connections, and
+find my sense of belonging in a constantly evolving space where change feels like home.
+
+I resonate with the idea of surpassing dualities, boundaries, or classifications, embracing an
+expanded work practice which involves painting, filmmaking, photography, and music.
+

_members/so.md

@@ -0,0 +1,13 @@
+---
+layout: member
+current: false
+full_name: So Kanno
+description: roboticist
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
+portfolio_image_locations:
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
+website: 
+socials: 
+---

_members/valerio.md

@@ -3,11 +3,11 @@ layout: member
 current: false
 full_name: Valerio Sangiacomo
 description: painter / graphic designer
-thumb: /assets/img/members/no_image.png
-portrait: /assets/img/members/no_image.png
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
 portfolio_image_locations:
-  - /assets/img/members/no_image.png
-  - /assets/img/members/no_image.png
+  - /assets/img/members/no_image.svg
+  - /assets/img/members/no_image.svg
 website: 
 socials: 
 ---

_templates/member-template.md

@@ -3,8 +3,8 @@ layout: member
 current: true
 full_name: 
 description: 
-thumb: /assets/img/members/no_image.png
-portrait: /assets/img/members/no_image.png
+thumb: /assets/img/members/no_image.svg
+portrait: /assets/img/members/no_image.svg
 portfolio_image_locations:
   - /assets/img/members/member-name/missing.png
   - /assets/img/members/member-name/missing.png