44 lines
No EOL
1.8 KiB
HTML
44 lines
No EOL
1.8 KiB
HTML
{% load top_tags %}
|
|
{% load static %}
|
|
|
|
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; autoplay: true; animation: fade">
|
|
<ul class="uk-slideshow-items">
|
|
{% random_photos_landscape as top_photos %}
|
|
{% if top_photos %}
|
|
{% for photo in top_photos %}
|
|
<li>
|
|
<img src="{{ photo.photo_md.url }}"
|
|
srcset="
|
|
{{ photo.photo_sm.url }} 480w,
|
|
{{ photo.photo_md.url }} 1024w,
|
|
{{ photo.photo_bg.url }} 1920w
|
|
"
|
|
sizes="100vw"
|
|
width="{{ photo.width }}"
|
|
height="{{ photo.height }}"
|
|
style="aspect-ratio: 7 / 3;"
|
|
alt="{{ photo.album.name }} - {{ photo.slug }}"
|
|
{% if forloop.first %} loading="eager" {% else %} loading="lazy" {% endif %}
|
|
uk-cover />
|
|
</li>
|
|
{% endfor %}
|
|
{% else %}
|
|
<li>
|
|
<img src="{% static 'img/placeholder.png' %}"
|
|
width="1920" height="823"
|
|
style="aspect-ratio: 7 / 3;"
|
|
alt="Placeholder" uk-cover />
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
|
|
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
|
|
<div class="uk-position-top uk-padding-small">
|
|
<h1>Gallery</h1>
|
|
</div>
|
|
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
|
|
<p class="uk-text-small uk-margin-remove-top">
|
|
Just another wannabe photographer...
|
|
</p>
|
|
</div>
|
|
</div> |