Add Internationalization & localization
This commit is contained in:
parent
e37c412fd9
commit
f68db77e82
18 changed files with 488 additions and 257 deletions
|
|
@ -1,9 +1,10 @@
|
|||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
{% load gallery_stats %}
|
||||
|
||||
<!-- Title -->
|
||||
{% block title %} About {% endblock %}
|
||||
{% block title %} {% trans "About" %} {% endblock %}
|
||||
|
||||
<!-- Parallax -->
|
||||
{% block parallax %}
|
||||
|
|
@ -16,8 +17,8 @@
|
|||
<!-- Breadcrumb -->
|
||||
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
|
||||
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
|
||||
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
<li class="uk-disabled"><a>About</a></li>
|
||||
<li><a href="{% url 'gallery:main_url' %}">{% trans "Home" %}</a></li>
|
||||
<li class="uk-disabled"><a>{% trans "About" %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -27,22 +28,30 @@
|
|||
<div class="uk-width-1-1">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-text-center">
|
||||
|
||||
<h3 class="uk-card-title">Muistox gallery</h3>
|
||||
<h3 class="uk-card-title">{% trans "Muistox gallery" %}</h3>
|
||||
|
||||
<img class="uk-border-circle uk-box-shadow-small uk-margin-small"
|
||||
src="{% static "img/default.png" %}"
|
||||
alt="Profile photo" width="120">
|
||||
|
||||
<p class="uk-text-muted uk-margin-small">
|
||||
Just another wannabe photographer...
|
||||
{% trans "Just another wannabe photographer..." %}
|
||||
</p>
|
||||
|
||||
<hr class="uk-divider-icon">
|
||||
|
||||
<div class="uk-text-small uk-text-muted">
|
||||
<p>
|
||||
<strong>{{ counts.0 }}</strong> <a href="{% url 'gallery:albums_url' %}">Albums</a> (public {{ counts.1 }}),
|
||||
<strong>{{ counts.2 }}</strong> <a href="{% url 'gallery:photos_url' %}">Photos</a></p>
|
||||
<strong>{{ counts.0 }}</strong>
|
||||
<a href="{% url 'gallery:albums_url' %}">
|
||||
{% blocktrans count album_count=counts.0 %}album{% plural %}albums{% endblocktrans %}
|
||||
</a>
|
||||
( {% blocktrans count public_count=counts.1 %}{{ public_count }} public{% plural %}{{ public_count }} public{% endblocktrans %} )
|
||||
<strong>{{ counts.2 }}</strong>
|
||||
<a href="{% url 'gallery:photos_url' %}">
|
||||
{% blocktrans count photo_count=counts.2 %}photo{% plural %}photos{% endblocktrans %}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
<!-- Title -->
|
||||
{% block title %} {{ album.name }} {% endblock %}
|
||||
|
|
@ -32,32 +32,15 @@
|
|||
<!-- Breadcrumb -->
|
||||
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
|
||||
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
|
||||
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
<li><a href="{% url 'gallery:albums_url' %}">Albums</a></li>
|
||||
<li><a href="{% url 'gallery:main_url' %}">{% trans "Home" %}</a></li>
|
||||
<li><a href="{% url 'gallery:albums_url' %}">{% trans "Albums" %}</a></li>
|
||||
<li class="uk-disabled"><a>{{ album.name }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
|
||||
{% for photo in photos %}
|
||||
<a href="{{ photo.get_absolute_url }}">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="{{ photo.photo_sm.url }}"
|
||||
srcset="
|
||||
{{ photo.photo_sm.url }} 320w,
|
||||
{{ photo.photo_md.url }} 720w,
|
||||
{{ photo.photo_bg.url }} 1920w
|
||||
"
|
||||
sizes="(max-width: 640px) 50vw,
|
||||
(max-width: 960px) 33vw,
|
||||
(max-width: 1200px) 25vw,
|
||||
20vw"
|
||||
width="{{ photo.width }}"
|
||||
height="{{ photo.height }}"
|
||||
style="aspect-ratio: {{ photo.aspect_ratio }};"
|
||||
alt="{{ photo.album.name }} - {{ photo.slug }}">
|
||||
</a>
|
||||
{% include "gallery/partials/photo_thumbnail.html" with photo=photo %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% load image_tags %}
|
||||
{% load i18n %}
|
||||
|
||||
<!-- Title -->
|
||||
{% block title %} Albums {% endblock %}
|
||||
{% block title %} {% trans "Albums" %} {% endblock %}
|
||||
|
||||
<!-- Parallax -->
|
||||
{% block parallax %}
|
||||
|
|
@ -16,50 +16,15 @@
|
|||
<!-- Breadcrumb -->
|
||||
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
|
||||
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
|
||||
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
<li class="uk-disabled"><a>Albums</a></li>
|
||||
<li><a href="{% url 'gallery:main_url' %}">{% trans "Home" %}</a></li>
|
||||
<li class="uk-disabled"><a>{% trans "Albums" %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
|
||||
|
||||
{% for album in album_list %}
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-height-1-1">
|
||||
|
||||
<!-- Album cover image -->
|
||||
<div class="uk-card-media-top">
|
||||
<a href="{{ album.get_absolute_url }}">
|
||||
{% with album.cover|photo_image_data as img %}
|
||||
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
|
||||
<img
|
||||
src="{{ img.url }}"
|
||||
width="{{ img.width }}"
|
||||
height="{{ img.height }}"
|
||||
style="aspect-ratio: {{ img.aspect_ratio }};"
|
||||
alt="Cover image for {{ album.name }}"
|
||||
title="{{ album.name }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
|
||||
</div>
|
||||
{% endwith %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Album info overlay -->
|
||||
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
|
||||
<h3 class="uk-card-title uk-margin-remove-bottom">
|
||||
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
|
||||
</h3>
|
||||
<p class="uk-text-small uk-margin-remove-top">
|
||||
{{ album.photos_in_album }} photos •
|
||||
{{ album.photos_views }} views
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% include "gallery/partials/album_card.html" %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
{% load image_tags %}
|
||||
|
||||
<!-- Title -->
|
||||
{% block title %} Search {% endblock %}
|
||||
{% block title %} {% trans "Search" %} {% endblock %}
|
||||
|
||||
<!-- Parallax -->
|
||||
{% block parallax %}
|
||||
|
|
@ -16,8 +17,8 @@
|
|||
<!-- Breadcrumb -->
|
||||
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
|
||||
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
|
||||
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
<li class="uk-disabled"><a>Search</a></li>
|
||||
<li><a href="{% url 'gallery:main_url' %}">{% trans "Home" %}</a></li>
|
||||
<li class="uk-disabled"><a>{% trans "Search" %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -25,42 +26,7 @@
|
|||
|
||||
{% if results %}
|
||||
{% for album in results %}
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-height-1-1">
|
||||
|
||||
<!-- Album cover image -->
|
||||
<div class="uk-card-media-top">
|
||||
<a href="{{ album.get_absolute_url }}">
|
||||
{% with album.cover|photo_image_data as img %}
|
||||
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
|
||||
<img
|
||||
src="{{ img.url }}"
|
||||
width="{{ img.width }}"
|
||||
height="{{ img.height }}"
|
||||
style="aspect-ratio: {{ img.aspect_ratio }};"
|
||||
alt="Cover image for {{ album.name }}"
|
||||
title="{{ album.name }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
|
||||
</div>
|
||||
{% endwith %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Album info overlay -->
|
||||
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
|
||||
<h3 class="uk-card-title uk-margin-remove-bottom">
|
||||
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
|
||||
</h3>
|
||||
<p class="uk-text-small uk-margin-remove-top">
|
||||
{{ album.photos_in_album }} photos •
|
||||
{{ album.photos_views }} views
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% include "gallery/partials/album_card.html" %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>Not found: "{{ query }}".</p>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% load image_tags %}
|
||||
{% load i18n %}
|
||||
|
||||
<!-- Title -->
|
||||
{% block title %}Home{% endblock %}
|
||||
{% block title %} {% trans "Home" %} {% endblock %}
|
||||
|
||||
<!-- Parallax -->
|
||||
{% block parallax %}
|
||||
|
|
@ -13,100 +13,27 @@
|
|||
<!-- Content -->
|
||||
{% block content %}
|
||||
|
||||
<!-- Favorite random portrait photos -->
|
||||
{% load top_tags %}
|
||||
{% load image_tags %}
|
||||
|
||||
<!-- Favorite random portrait photos -->
|
||||
{% random_favorite_photos_portrait 10 as top_portrait_photos %}
|
||||
|
||||
{% if top_portrait_photos %}
|
||||
<div uk-slider>
|
||||
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
|
||||
<div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
|
||||
{% for photo in top_portrait_photos %}
|
||||
{% with photo|photo_image_data as data %}
|
||||
<div>
|
||||
<a href="{{ photo.get_absolute_url }}">
|
||||
<img src="{{ data.url }}" alt="{{ photo.album.slug }}" width="{{ data.width }}" height="{{ data.height }}" style="object-fit: cover;" loading="lazy">
|
||||
</a>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
|
||||
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
|
||||
</div>
|
||||
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
|
||||
</div>
|
||||
{% include "gallery/partials/photos_slider.html" with photos=top_portrait_photos %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Latest albums -->
|
||||
<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
|
||||
<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-margin-bottom" uk-grid="masonry: true">
|
||||
|
||||
{% for album in latest_albums %}
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-height-1-1">
|
||||
|
||||
<!-- Album cover image -->
|
||||
<div class="uk-card-media-top">
|
||||
<a href="{{ album.get_absolute_url }}">
|
||||
{% with album.cover|photo_image_data as img %}
|
||||
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
|
||||
<img
|
||||
src="{{ img.url }}"
|
||||
width="{{ img.width }}"
|
||||
height="{{ img.height }}"
|
||||
style="aspect-ratio: {{ img.aspect_ratio }};"
|
||||
alt="Cover image for {{ album.name }}"
|
||||
title="{{ album.name }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
|
||||
</div>
|
||||
{% endwith %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Album info overlay -->
|
||||
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
|
||||
<h3 class="uk-card-title uk-margin-remove-bottom">
|
||||
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
|
||||
</h3>
|
||||
<p class="uk-text-small uk-margin-remove-top">
|
||||
{{ album.photos_in_album }} photos •
|
||||
{{ album.photos_views }} views
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% include "gallery/partials/album_card.html" %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Favorite random landscape photos -->
|
||||
{% load top_tags %}
|
||||
{% load image_tags %}
|
||||
{% random_favorite_photos_landscape 10 as top_landscape_photos %}
|
||||
|
||||
{% if top_landscape_photos %}
|
||||
<div uk-slider>
|
||||
<div class="uk-position-relative uk-visible-toggle uk-light uk-margin-top" tabindex="-1">
|
||||
<div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
|
||||
{% for photo in top_landscape_photos %}
|
||||
{% with photo|photo_image_data as data %}
|
||||
<div>
|
||||
<a href="{{ photo.get_absolute_url }}">
|
||||
<img src="{{ data.url }}" alt="{{ photo.album.slug }}" width="{{ data.width }}" height="{{ data.height }}" style="object-fit: cover;" loading="lazy">
|
||||
</a>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
|
||||
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
|
||||
</div>
|
||||
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
|
||||
</div>
|
||||
{% include "gallery/partials/photos_slider.html" with photos=top_landscape_photos %}
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
39
gallery/templates/gallery/partials/album_card.html
Normal file
39
gallery/templates/gallery/partials/album_card.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
{% load image_tags %}
|
||||
{% load i18n %}
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-height-1-1">
|
||||
|
||||
<!-- Album cover image -->
|
||||
<div class="uk-card-media-top">
|
||||
<a href="{{ album.get_absolute_url }}">
|
||||
{% with album.cover|photo_image_data as img %}
|
||||
<div class="{% if img.is_placeholder %}uk-blur{% endif %}">
|
||||
<img
|
||||
src="{{ img.url }}"
|
||||
width="{{ img.width }}"
|
||||
height="{{ img.height }}"
|
||||
style="aspect-ratio: {{ img.aspect_ratio }};"
|
||||
alt="Cover image for {{ album.name }}"
|
||||
title="{{ album.name }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
onload="this.parentElement.classList.remove('uk-blur'); this.classList.add('fade-in');">
|
||||
</div>
|
||||
{% endwith %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Album info overlay -->
|
||||
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
|
||||
<h3 class="uk-card-title uk-margin-remove-bottom">
|
||||
<a href="{{ album.get_absolute_url }}">{{ album }}</a>
|
||||
</h3>
|
||||
<p class="uk-text-small uk-margin-remove-top">
|
||||
{% blocktrans count photo_count=album.photos_in_album %}{{ photo_count }} photo{% plural %}{{ photo_count }} photos{% endblocktrans %}
|
||||
•
|
||||
{% blocktrans count view_count=album.photos_views %}{{ view_count }} view{% plural %}{{ view_count }} views{% endblocktrans %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
{% load i18n %}
|
||||
{% load link_tags %}
|
||||
|
||||
{% if page_obj.has_other_pages %}
|
||||
|
|
@ -6,9 +7,9 @@
|
|||
<ul class="uk-pagination uk-padding-small uk-flex-center">
|
||||
|
||||
{% if page_obj.has_previous %}
|
||||
<li><a href="{% paginator_link page_obj.previous_page_number request.GET %}">« Prev</a></li>
|
||||
<li><a href="{% paginator_link page_obj.previous_page_number request.GET %}">« {% trans "Prev" %}</a></li>
|
||||
{% else %}
|
||||
<li class="uk-disabled"><a href="#">« Prev</a></li>
|
||||
<li class="uk-disabled"><a href="#">« {% trans "Prev" %}</a></li>
|
||||
{% endif %}
|
||||
|
||||
{% if page_obj.number|add:'-3' > 1 %}
|
||||
|
|
@ -34,9 +35,9 @@
|
|||
{% endif %}
|
||||
|
||||
{% if page_obj.has_next %}
|
||||
<li><a href="{% paginator_link page_obj.next_page_number request.GET %}">Next »</a></li>
|
||||
<li><a href="{% paginator_link page_obj.next_page_number request.GET %}">{% trans "Next" %} »</a></li>
|
||||
{% else %}
|
||||
<li class="uk-disabled"><a href="#">Next »</a></li>
|
||||
<li class="uk-disabled"><a href="#">{% trans "Next" %} »</a></li>
|
||||
{% endif %}
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{% load top_tags %}
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
|
||||
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; autoplay: true; animation: fade; min-height: 300;">
|
||||
|
||||
|
|
@ -36,9 +37,9 @@
|
|||
<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>
|
||||
<h1>{% trans "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>
|
||||
<p class="uk-text-small uk-margin-remove-top">{% trans "Just another wannabe photographer..." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
18
gallery/templates/gallery/partials/photo_thumbnail.html
Normal file
18
gallery/templates/gallery/partials/photo_thumbnail.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<a href="{{ photo.get_absolute_url }}">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="{{ photo.photo_sm.url }}"
|
||||
srcset="
|
||||
{{ photo.photo_sm.url }} 320w,
|
||||
{{ photo.photo_md.url }} 720w,
|
||||
{{ photo.photo_bg.url }} 1920w
|
||||
"
|
||||
sizes="(max-width: 640px) 50vw,
|
||||
(max-width: 960px) 33vw,
|
||||
(max-width: 1200px) 25vw,
|
||||
20vw"
|
||||
width="{{ photo.width }}"
|
||||
height="{{ photo.height }}"
|
||||
style="aspect-ratio: {{ photo.aspect_ratio }};"
|
||||
alt="{{ photo.album.name }} - {{ photo.slug }}">
|
||||
</a>
|
||||
20
gallery/templates/gallery/partials/photos_slider.html
Normal file
20
gallery/templates/gallery/partials/photos_slider.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{% load image_tags %}
|
||||
|
||||
<div uk-slider>
|
||||
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
|
||||
<div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
|
||||
{% for photo in photos %}
|
||||
{% with photo|photo_image_data as data %}
|
||||
<div>
|
||||
<a href="{{ photo.get_absolute_url }}">
|
||||
<img src="{{ data.url }}" alt="{{ photo.album.slug }}" width="{{ data.width }}" height="{{ data.height }}" style="object-fit: cover;" loading="lazy">
|
||||
</a>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
|
||||
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
|
||||
</div>
|
||||
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% load exif_filters %}
|
||||
|
||||
<!-- Title -->
|
||||
|
|
@ -47,8 +48,8 @@
|
|||
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
|
||||
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-middle">
|
||||
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
|
||||
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
<li><a href="{% url 'gallery:albums_url' %}">Albums</a></li>
|
||||
<li><a href="{% url 'gallery:main_url' %}">{% trans "Home" %}</a></li>
|
||||
<li><a href="{% url 'gallery:albums_url' %}">{% trans "Albums" %}</a></li>
|
||||
<li><a href="{{ photo.album.get_absolute_url }}">{{ photo.album.name }}</a></li>
|
||||
<li class="uk-disabled"><a>{{ photo.slug }}</a></li>
|
||||
</ul>
|
||||
|
|
@ -60,38 +61,38 @@
|
|||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<h3 class="uk-card-title">Photo Info</h3>
|
||||
<h3 class="uk-card-title">{% trans "Photo Info" %}</h3>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Album name</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Album" %}</div>
|
||||
<div><a href="{{ photo.album.get_absolute_url }}">{{ photo.album.name }}</a></div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Photo id</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Photo Name" %}</div>
|
||||
<div uk-lightbox>
|
||||
<a href="{{ photo.photo_bg.url }}">{{ photo.slug }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Photo Taken</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Photo Taken" %}</div>
|
||||
<div>{{ photo.taken_at|date:"d.m.Y H:i" }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Views</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Views" %}</div>
|
||||
<div>{{ photo.views }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Likes</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Likes" %}</div>
|
||||
<div id="like-count">{{ photo.likes }}</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-between uk-flex-middle uk-grid-small" uk-grid>
|
||||
<a href="{% url 'gallery:photo_slideshow_url' photo.album.slug photo.slug %}" class="uk-button uk-button-secondary">
|
||||
<span uk-icon="icon: play"></span> <span>Slideshow</span>
|
||||
<span uk-icon="icon: play"></span> <span>{% trans "Slideshow" %}</span>
|
||||
</a>
|
||||
<a href="{{ photo.photo.url }}" class="uk-button uk-button-secondary" class="uk-button uk-button-secondary" download>
|
||||
<span uk-icon="icon: download"></span> <span>Download {{ photo.width }}×{{ photo.height }}</span>
|
||||
<span uk-icon="icon: download"></span> <span>{% trans "Download" %} {{ photo.width }}×{{ photo.height }}</span>
|
||||
</a>
|
||||
<button id="like-button" class="uk-button uk-button-secondary">
|
||||
<span uk-icon="icon: heart" id="heart-icon"></span> <span id="like-text">Like</span>
|
||||
<span uk-icon="icon: heart" id="heart-icon"></span> <span id="like-text">{% trans "Like" %}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,37 +101,37 @@
|
|||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<h3 class="uk-card-title">Exif</h3>
|
||||
<h3 class="uk-card-title">{% trans "Exif" %}</h3>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Camera</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Camera" %}</div>
|
||||
<div>{{ photo.exif.Model }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Lens</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Lens" %}</div>
|
||||
<div>{{ photo.exif.LensModel }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Shutter Speed</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Shutter Speed" %}</div>
|
||||
<div>{{ photo.exif.ExposureTime|exif_exposuretime }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Aperture</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Aperture" %}</div>
|
||||
<div>{{ photo.exif.FNumber|exif_fnumber }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>ISO</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "ISO" %}</div>
|
||||
<div>{{ photo.exif.ISOSpeedRatings|exif_isospeedratings }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Focal Length</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Focal Length" %}</div>
|
||||
<div>{{ photo.exif.FocalLength|exif_focallength}}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Focal Length in 35mm</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Focal Length in 35mm" %}</div>
|
||||
<div>{{ photo.exif.FocalLengthIn35mmFilm|exif_focallength }}</div>
|
||||
</div>
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-expand" uk-leader>Keywords</div>
|
||||
<div class="uk-width-expand" uk-leader>{% trans "Keywords" %}</div>
|
||||
<div>{{ photo.exif.Keywords|exif_keywords }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
|
||||
<!-- Title -->
|
||||
{% block title %} Photostream {% endblock %}
|
||||
{% block title %} {% trans "Photostream" %} {% endblock %}
|
||||
|
||||
<!-- Parallax -->
|
||||
{% block parallax %}
|
||||
|
|
@ -18,46 +19,28 @@
|
|||
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-middle">
|
||||
<!-- Breadcrumb -->
|
||||
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
|
||||
<li class="uk-visible@m"><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
<li class="uk-visible@m uk-disabled"><a>Photostream</a></li>
|
||||
<li class="uk-visible@m"><a href="{% url 'gallery:main_url' %}">{% trans "Home" %}</a></li>
|
||||
<li class="uk-visible@m uk-disabled"><a>{% trans "Photostream" %}</a></li>
|
||||
</ul>
|
||||
<!-- Sort menu -->
|
||||
<ul class="uk-subnav uk-subnav-divider uk-margin-remove uk-flex uk-flex-middle uk-margin-medium-top@s">
|
||||
<li {% if order == 'latest' %}class="uk-active"{% endif %}>
|
||||
<a href="{% search_link 'latest' request.GET %}">Latest</a>
|
||||
<a href="{% search_link 'latest' request.GET %}">{% trans "Latest" %}</a>
|
||||
</li>
|
||||
<li {% if order == 'liked' %}class="uk-active"{% endif %}>
|
||||
<a href="{% search_link 'liked' request.GET %}">Liked</a>
|
||||
<a href="{% search_link 'liked' request.GET %}">{% trans "Liked" %}</a>
|
||||
</li>
|
||||
<li {% if order == 'popular' %}class="uk-active"{% endif %}>
|
||||
<a href="{% search_link 'popular' request.GET %}">Popular</a>
|
||||
<a href="{% search_link 'popular' request.GET %}">{% trans "Popular" %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
|
||||
|
||||
{% for photo in object_list %}
|
||||
<a href="{{ photo.get_absolute_url }}">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="{{ photo.photo_sm.url }}"
|
||||
srcset="
|
||||
{{ photo.photo_sm.url }} 320w,
|
||||
{{ photo.photo_md.url }} 720w,
|
||||
{{ photo.photo_bg.url }} 1920w
|
||||
"
|
||||
sizes="(max-width: 640px) 50vw,
|
||||
(max-width: 960px) 33vw,
|
||||
(max-width: 1200px) 25vw,
|
||||
20vw"
|
||||
width="{{ photo.width }}"
|
||||
height="{{ photo.height }}"
|
||||
style="aspect-ratio: {{ photo.aspect_ratio }};"
|
||||
alt="{{ photo.album.name }} - {{ photo.slug }}">
|
||||
</a>
|
||||
{% include "gallery/partials/photo_thumbnail.html" with photo=photo %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Muistox Photo Gallery">
|
||||
<title>Slideshow : {{ photo.album.name }} - Gallery</title>
|
||||
<meta name="description" content="{% trans "Muistox Photo Gallery" %}">
|
||||
<title>{% trans "Slideshow" %} : {{ photo.album.name }} - {% trans "Gallery" %} </title>
|
||||
{% if next_photo %}
|
||||
<meta http-equiv="refresh" content="5; url={% url 'gallery:photo_slideshow_url' next_photo.album.slug next_photo.slug %}" />
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue