datamad2017/_includes/speakers-modals.html

<!-- Begin Speakers Modals -->
<div class="modals" class="modals">
	{% for speaker in site.data.speakers %}
		{% if page.modal == "all" or (page.modal == 'team' and (speaker.team != null or speaker.subTeam != null)) %}
		<div class="modal fade text-left people-modal" id="speakerDetail-{{ speaker.id }}" tabindex="-1" role="dialog" aria-labelledby="speakerDetailLabel-{{ speaker.id }}" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<div class="close">
							<svg class="icon icon-cross" viewBox="0 0 32 32">
								<use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-cross"></use>
							</svg>
							<div class="close-mask" data-dismiss="modal"></div>
						</div>
						{% if site.showSessions %}
							{% for session in site.data.sessions %}
								{% for session_speaker in session.speakers %}
									{% if session_speaker == speaker.id %}
										<h4>{{ session.title }}</h4>
										<span class="theme-metadata"><span class="caption">Language: </span>{{ session.language }}</span>
										<span class="theme-metadata"><span class="caption">Complexity: </span>{{ session.complexity }}</span>
										<p class="theme-description">{{ session.description }}</p>
									{% endif %}
								{% endfor %}		
							{% endfor %}
							<hr>
						{% endif %}
						<div class="people-details">
							<div class="row">
								<div class="col-md-2 col-sm-2">
									<div class="flow-img img-circle people-img" style="background-image: url({{ site.baseurl | append: site.thumbnailsFolder | append: speaker.thumbnailUrl }})"></div>
								</div>
								<div class="col-md-10 col-sm-10 details">
									<p class="name">{{ speaker.name }} {{ speaker.surname }}
										<span class="position">{{ speaker.title }}, {{ speaker.company }}</span>
									</p>
									{% if speaker.ribbon != null %}
									<div class="modal-ribbon-wrapper">
			                            {% for ribbon in speaker.ribbon %}
			                               <a class="modal-ribbon" href="ribbon["url"]" target="_blank">{{ ribbon["title"] }}</a>   
			                            {% endfor %}
			                        </div>
			                        {% endif %}
									<p class="about">{{ speaker.bio }}</p>
									<ul class="social">
										{% for social in speaker.social %}
											<li>
												<a href="{{ social["link"] }}" target="_blank">
													<svg class="icon icon-{{ social["name"] }}" viewBox="0 0 30 32">
														<use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-{{ social["name"] }}"></use>
													</svg>
												</a>
											</li>
										{% endfor %}
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		{% endif %}
	{% endfor %}
</div>
<!-- End Speakers Modals -->