<!-- Photo -->
{% if include.id %}
{% assign id = include.id | default: 1 %}
{% if include.horizontal %}
{% assign filtered-photos = photos | where: 'horizontal', true %}
{% else %}
{% assign filtered-photos = photos %}
{% endif %}

{% assign photo = filtered-photos[id] %}

{% if include.background %}
<div{% if include.class %} class="{{ include.class }}"{% endif %} style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"></div>
{% elsif include.ratio %}
<div class="img-responsive img-responsive-{{ include.ratio }}{% if include.class %} {{ include.class }}{% endif %}" style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"></div>
{% else %}
<img src="{{ page | relative }}/static/photos/{{ photo.file }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="{{ photo.title }}" />
{% endif %}

{% else %}
{% include "ui/svg.html" width=640 height=480 border=true class=include.class %}
{% endif %}