We recently updated our website and combined four sites into one. Yikes! The page on our old site with the most visits was always the staff directory page. We naturally wanted to carry that over to the new site but there was one problem: The old page wasn't dynamic. At all. Enter Rock and Lava. 

It was definitely a challenge to complete but here is how I did it.

First, here is a link to our page: https://eclife.org/staff

I have a separate lava file for each group and campus. I did that because one file would be huge. I named each one "Staffgroup_or_campus_name".lava.

First, I'm going to use the lava file for one of our campus teams. Visually, it's a pretty simple look. Just two columns. One for the name and title and one for the email link.

#1. Create a data view for each team/campus/department/etc 

Annotation 2019-10-24 164620.png

#2. Add your filters: 

Annotation 2019-10-24 164819.png

#3. Create a new lava file and add the following code 
You will need to format your page with standard Bootstrap columns but the following code can go outside the first column. Write down the Data View ID. In this case it is 1590. 

{% person dataview:'1590' sort:'NickName,LastName' %}{% for person in personItems %}

The next four lines pull the person's position or positions from their profile. We have two positions because some staff perform different roles at different campuses. You can add as many person attributes as you like and then display them under Extended Attributes. 
Annotation 2019-10-24 170524.png

{% assign position = person | Attribute:'Position1' %}
{% assign area = person | Attribute:'Area' %}
{% assign position2 = person | Attribute:'Position2' %}
{% assign area2 = person | Attribute:'Area2' %}

#4. Create two columns and place the following code in column #1 

{% if area == 'Banta' %}
<p>{{ person.FullName }},
<span>{{ position }}</span></p>
{% endif %}
{% if area2 == 'Banta' %}
<p>{{ person.FullName }},
<span>{{ position2 }}</span></p>
{% endif %}

#5. Place the email link in the second column

<p><a href="mailto:{{ person.Email }}">EMAIL</a></p>

#6. Don't forget to close the For loop and add the endperson tag.
Make sure you place it OUTSIDE of the second column, but INSIDE the row.

{% endfor %}{% endperson %}

So, I know what you are thinking, "Well, what about that first section? The Senior Leadship Team section? How did you get the modal windows to work?". That lava file is very similar with just a few extra lines.

Here is the first section or column where the "assigns" are. Only, there is an anchor tag which holds the styling of the modal window. You will just need to change your styling to match which framework you are using, like bootstrap.

{% person dataview:'1449' sort:'NickName,LastName' %}{% for person in personItems %}
 {% assign position = person | Attribute:'Position1' %}
 <a href="#" data-izimodal-open="#{{ person.LastName }}" data-izimodal-transitionin="fadeInDown" class="flush">
 <div class="grid__item flush hard left four-fifths handheld-one-whole">
  <p>{{ person.FullName }},
  {% if position and position != '' %}
  <span>{{ position }}</span></p>
  {% endif %}
 </div></a>

The second columm is the same as above (Banta Campus). At the bottom of the file, I have the Javascript parameters that style the modal windows. I use izimodal.js but am hoping to create our own modals soon. You can use any modal script you want or use your own.

All you really need to worry about is that whatever you end up using for your modal script, it will have to loop so each modal window has the correct info for each person.

{% person dataview:'1449' sort:'NickName,LastName' %}{% for person in personItems %}
{% assign position = person | Attribute:'Position1' %}
<script>
$("#{{ person.LastName }}").iziModal({
title: '{{ person.FullName }}',
subtitle: '{{ position }}',
headerColor: '#4D7EAC',
background: null,
theme: '', // light
icon: 'emmanuel-e',
iconText: null,
iconColor: '#fff',
rtl: false,
width: 800,
top: null,
bottom: null,
borderBottom: true,
padding: 20,
radius: 3,
zindex: 2000,
iframe: false,
iframeHeight: 400,
iframeURL: null,
focusInput: true,
group: 'bios',
loop: true,
arrowKeys: true,
navigateCaption: true,
navigateArrows: true, // Boolean, 'closeToModal', 'closeScreenEdge'
history: false,
restoreDefaultContent: false,
autoOpen: 0, // Boolean, Number
bodyOverflow: false,
fullscreen: false,
openFullscreen: false,
closeOnEscape: true,
closeButton: true,
appendTo: 'body', // or false
appendToOverlay: 'body', // or false
overlay: true,
overlayClose: true,
overlayColor: 'rgba(0, 0, 0, 0.4)',
timeout: false,
timeoutProgressbar: false,
pauseOnHover: false,
timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
transitionIn: 'comingIn',
transitionOut: 'comingOut',
transitionInOverlay: 'fadeIn',
transitionOutOverlay: 'fadeOut',
onFullscreen: function(){},
onResize: function(){},
onOpening: function(){},
onOpened: function(){},
onClosing: function(){},
onClosed: function(){},
afterRender: function(){}
});
</script>
{% endfor %}{% endperson %}