{% extends 'base.html' %}
{% load get_image_by_size %}
{% load typogrify_tags %}
{% load pagination_tags %}

{% block pagetitle %}Luxagraf | {% if region %}Photo Galleries: Images from {{region.name|title|smartypants|safe}}{%else%}Photo Galleries: Images from Around the World {%endif%} Page {{page}}{% endblock %}
{% block metadescription %}{% if region %}Photo Galleries from {{region.name|title|smartypants|safe}}{%else%}Photo Galleries: Images from Around the World {%endif%} Page {{page}}{% endblock %}

{%block extrahead%}
<style>
    @media screen and (min-width: 38em){ 
    {% autopaginate object_list 24 %} {% for object in object_list %}
    {%if object.caption_style%}
#image-{{forloop.counter}} .gallery-text {
    {{object.caption_style}} 
}
    {%endif%}
    {%endfor%}
</style>
{%endblock%}

{%block bodyid%}id="photo-archive"{%endblock%}

{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
       <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr;</li>
       {% if region %}{%if region.name == 'United States'%} <li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> &rarr;</li>
       <li>the United States</li>{%else%}<li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> &rarr;</li> <li>{{region.name|title|smartypants|safe}}{%endif%}{%else%}<li>{% if is_private %}<a href="/photos/">Photos</a> &rarr;</li>{%else%}<li>Photos </li>{%endif%}{%endif%}
           {% if is_private %}<li>Private</li>{%endif%}
    </ul>
    <main role="main">
    <h1 class="hide">{% if region %}Photographs from {{region.name|title|smartypants|safe}}{%else%}Photographs from Around the World {%endif%}</h1>
    {% autopaginate object_list 24 %}{% for object in object_list %}
    <article id="image-{{forloop.counter}}" class="photo-gallery">
        <a href="{{object.get_absolute_url}}" title="view images from {{ object.title }}">
                <img sizes="(max-width: 1170px) 100vw"
                     {{object.thumb}}
                     srcset="{% for size in object.thumb.sizes.all %}{%spaceless%}
                     {% get_image_by_size object.thumb size.width %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endspaceless%}{%endfor%}
                     {% for size in object.thumb.sizes.all %}{%spaceless%}{% if size.width > 720 and size.width < 2000 %}src="{% get_image_by_size object.thumb size.width %}"{%endif%}{%endspaceless%}{%endfor%} alt="{{object.title}}" {%if photo.is_portait %}class="v"{%endif%} ></a>
            <div class="gallery-text">
            <h4>{{object.title}}</h4>
            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> &ndash; 
                <span class="p-location h-adr adr post--location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                    {% if object.location.state.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/photos/united-states/" title="all galleries from the United States">{{object.location.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.state.country.slug}}/" title="travel writing from {{object.location.state.country.name}}">{{object.state.country.name}}</a>{%endif%}
                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
                        {%if object.latitude%}<data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>{%endif%}
                        {%if object.longitude%}<data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>{%endif%}
                    </span>
                </span>
            {%if object.description%}<p>{{object.description|safe|smartypants|widont}}</p>{%endif%}
            </div>
        </article>{% endfor %}
    </main>
    <nav class="pagination">{% paginate %}
    </nav>
{% endblock %}