{% 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> →</li> {% if region %}{%if region.name == 'United States'%} <li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> →</li> <li>the United States</li>{%else%}<li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> →</li> <li>{{region.name|title|smartypants|safe}}{%endif%}{%else%}<li>{% if is_private %}<a href="/photos/">Photos</a> →</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> – <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 %}