blog/_layouts/gallery-photo.html

---
layout: default
---
{% assign photo=page.photo %}
{% capture photo_url %}{{ site.asset_prefix }}/gallery/{{ page.gallery }}/{{ photo.name }}{% endcapture %}
{% capture gallery_url %}/{{ site.baseurl }}/gallery/{{ page.gallery }}{% endcapture %}
<section itemscope itemtype="http://schema.org/Photograph">
    <header>
        <div class="timeline">
            {% if photo.date %}
                <time datetime="{{ photo.date | date_to_xmlschema }}" title="{{ photo.date | date_to_xmlschema }}"><strong>{{ photo.date | date:"%b %d" | upcase }}</strong><br />{{ photo.date | date:"%Y" }}</time>
            {% endif %}
            {% if photo.location %}
                <a href="https://maps.google.com/maps?hl=en&amp;ll={{ photo.location.latitude }},{{ photo.location.longitude }}&amp;t=w&amp;z=12"><img alt="map" height="49" src="https://maps.googleapis.com/maps/api/staticmap?center={{ photo.location.latitude }},{{ photo.location.longitude }}&amp;zoom=9&amp;size=98x98&amp;sensor=false" title="{{ photo.location.title }}" width="49" /></a>
            {% endif %}
        </div>
        <section class="post-content">
            <p>{{ content }}</p>
            <a href="{{ gallery_url }}/">[ gallery ]</a>
        </section>
        <ul style="margin-top: 0;">
            {% if photo.previous %}
                <li><a href="{{ gallery_url }}/{{ photo.previous }}.html" rel="prev">&nbsp;&larr;&nbsp;</a></li>
            {% else %}
                <li><span class="noanchor">&nbsp;&larr;&nbsp;</span></li>
            {% endif %}

            {% if photo.next %}
                <li><a href="{{ gallery_url }}/{{ photo.next }}.html" rel="next">&nbsp;&rarr;&nbsp;</a></li>
            {% else %}
                <li><span class="noanchor">&nbsp;&rarr;&nbsp;</span></li>
            {% endif %}
        </ul>
        <h1>
            <span itemprop="name">{{ photo.title }}</span>
        </h1>
    </header>
    <section class="post-content">
        {% if photo.width %}
            {% assign max_width=photo.width %}
        {% else %}
            {% assign max_width=640 %}
        {% endif %}
        {% assign sizes=''|split:'' %}
        {% for size in site.photo_sizes %}
            {% if size[0] <= max_width %}
                {% assign sizes=sizes | push:size %}
            {% endif %}
        {% endfor %}
        {% if photo.width == 200 %}
            {% assign file='200x200' %}                                    
        {% else %}
            {% assign file='640w' %}
        {% endif %}
        <p style="text-align:center;">
            <a href="{{ photo_url }}~{{ file }}.jpg"><img alt="Photo: {{ photo.title }}" src="{{ photo_url }}~{{ file }}.jpg" style="max-width:630px;" /></a>
        </p>

        {% if photo.description %}
            <div itemprop="description">
                {{ photo.description }}
            </div>
        {% endif %}
    </section>
    <div class="meta">
        <div class="meta-properties">
            <div>
                <dl style="margin-top:0;">
                    <dt>Date</dt>
                    <dd itemprop="dateCreated" content="{{ photo.date | date:'%FT%TZ' }}">{{ photo.date | date:'%A, %B %d at %I:%M %p' | replace:' 0',' ' | replace:' AM',' am' | replace:' PM',' pm' }}

                    {% if photo.aperture %}
                    <dt>Camera</dt>
                    <dd>{{ photo.make }} {{ photo.model }}</dd>
                    {% endif %}

                    {% if photo.aperture %}
                    <dt>Aperture</dt>
                    <dd>{{ photo.aperture }}</dd>
                    {% endif %}

                    {% if photo.aperture %}
                    <dt>Exposure</dt>
                    <dd>{{ photo.exposure }}</dd>
                    {% endif %}

                    {% if sizes %}
                        <dt>Sizes</dt>
                        <dd>
                            {% for size in sizes %}
                                {% if 0 < forloop.index0 %}&nbsp;&middot;&nbsp;{% endif %}
                                {% assign width=size[0] %}
                                {% assign height=size[1] %}                                
                                {% capture label %}{{ width }}x{{ height }}{% endcapture %}
                                {% if width == 640 %}
                                    {% assign label='640' %}
                                    {% assign file='640w' %}                                    
                                {% else %}
                                    {% capture label %}{{ width }}x{{ height }}{% endcapture %}
                                    {% assign file=label %}
                                {% endif %}
                                <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
                                    <meta itemprop="width" content="{{ width }}" />
                                {% if height > 0 %}
                                    <meta itemprop="height" content="{{ height }}" />
                                {% endif %}
                                    <a href="{{ photo_url }}~{{ file }}.jpg" itemprop="contentUrl">{{ label }}</a>
                                </span>
                            {% endfor %}
                        </dd>
                    {% endif %}
                </dl>
            </div>

            {% if photo.location %}
                <div style="float:left;line-height:0;margin-left:7px;width:280px;" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                    <span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
                        <meta itemprop="latitude" content="{{ photo.location.latitude }}" />
                        <meta itemprop="longitude" content="{{ photo.location.longitude }}" />
                    </span>
                    <a href="https://maps.google.com/maps?hl=en&amp;ll={{ photo.location.latitude }},{{ photo.location.longitude }}&amp;t=w&amp;z=12"><img alt="map" height="173" src="https://maps.googleapis.com/maps/api/staticmap?center={{ photo.location.latitude }},{{ photo.location.longitude }}&amp;zoom=13&amp;size=280x173&amp;markers=size:mid%7Ccolor:orange%7C{{ photo.location.latitude }},{{ photo.location.longitude }}&amp;sensor=false" title="{{ photo.location.title }}" width="280" /></a>
                </div>
            {% endif %}

            <div style="clear:left;"></div>
        </div>
        <div class="meta-navigate screen-only">
            {% if photo.next %}
                <div style="float:right;">
                    <a href="{{ gallery_url }}/{{ photo.next }}.html" rel="next">Next &raquo;</a>
                </div>
            {% endif %}

            {% if photo.previous %}
                <div style="float:left;">
                    <a href="{{ gallery_url }}/{{ photo.previous }}.html" rel="prev">&laquo; Previous</a>
                </div>
            {% endif %}

            <div style="padding:0 120px;">
                <a href="./" rel="contents">Gallery List</a>
            </div>

            <div style="clear:both;"></div>
        </div>
    </div>
</section>