{%- assign sorted_contacts = site.contacts | sort: “display_order” -%} <section>
<div class="container"> <div class="row"> <div class="col mt-1 home__col--heading-underline{% if page.contacts_background_tan == true %} home__col--heading-underline-tan{% endif %}"> <h3 id="contact" class="typography__section--heading margins__heading--btm links__offset">Contacts</h3> </div> </div> {% if page.contacts_background_tan == true %}</div>
<div class=“container contacts__padding-top background__color–tan”>{% endif %}
<div class="row editor-link"> <div class="col editor-link mb-3"> <a href="cloudcannon:collections/_contacts/" class="btn btn-success editor-button">Edit Contacts</a> </div> </div> <div class="row"> {%- for contact in sorted_contacts -%} {%- assign contact_name = contact.name | split: " " -%} {%- assign first = contact_name[0] -%} {%- assign last = contact_name[1] -%} {% if contact.portrait_image != "For departments with no contact photos, do not change this field." %} <div class="col-md-6 contacts__col-bottom-margin"> <div class="row"> <div class="col-4 contacts__col--img"> {% if contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" width="150px" height="150px" alt="Photo of {{ contact.name }}" class="img-fluid contacts__portrait" />{% endif %} </div> <div class="col-8 float-right"> <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5> {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %} <p class="notranslate"> {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %} {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&to[last]={{ last }}&submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %} {%- if contact.fax -%}Fax: {{ contact.fax }}{% endif %} {%- if contact.bio == true -%}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %} </p> </div> </div> </div> {% else %} <div class="col-sm-6 col-md-4 mb-3"> <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5> {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %} <p class="notranslate"> {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %} {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&to[last]={{ last }}&submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %} {% if contact.fax %}Fax: {{ contact.fax }}{% endif %} {% if contact.bio == true %}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %} </p> </div> {%- endif -%} {%- endfor -%} </div> </div>
</section> {% for contact in sorted_contacts %} {%- if contact.bio == true -%} <!– Modal –> <div class=“modal fade” id=“{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: ”'“ | remove: '’' }}” tabindex=“-1” aria-labelledby=“{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: ”'“ | remove: '’' }}-label” aria-hidden=“true”>
<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="typography__h6" id="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}-label">{{ contact.name }} Bio</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> {% if contact.portrait_image != 'For departments with no contact photos, do not change this field.' and contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" class="img-fluid float-left mr-2 mb-2" width="150px" height="150px" alt="Photo of {{ contact.name }} KCC's {{ contact.contacts_title }}">{% endif %} <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5> {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %} {{ contact.content }} </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div>
</div> {%- endif -%} {% endfor %}