Add slideshow
This commit is contained in:
parent
47b543bbb3
commit
38fa9ddf3f
4 changed files with 97 additions and 10 deletions
|
|
@ -88,7 +88,10 @@
|
||||||
<div><a href="{{ photo.photo.url }}">{{ photo.width }}x{{ photo.height }}</a></div>
|
<div><a href="{{ photo.photo.url }}">{{ photo.width }}x{{ photo.height }}</a></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-grid-small" uk-grid>
|
<div class="uk-grid-small" uk-grid>
|
||||||
<button id="like-button" class="uk-button uk-button-primary">
|
<a href="{% url 'gallery:photo_slideshow_url' photo.album.slug photo.slug %}" class="uk-button uk-button-secondary" target="_blank" rel="noopener">
|
||||||
|
<span uk-icon="icon: play"></span> <span>Slideshow</span>
|
||||||
|
</a>
|
||||||
|
<button id="like-button" class="uk-button uk-button-secondary">
|
||||||
<span id="heart-icon" uk-icon="icon: heart"></span> <span id="like-text">Like</span>
|
<span id="heart-icon" uk-icon="icon: heart"></span> <span id="like-text">Like</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -157,7 +160,7 @@
|
||||||
|
|
||||||
if (data.status === "liked") {
|
if (data.status === "liked") {
|
||||||
likeText.innerText = "Unlike";
|
likeText.innerText = "Unlike";
|
||||||
heartIcon.setAttribute("style", "color: red");
|
heartIcon.setAttribute("style", "color: inherit");
|
||||||
} else {
|
} else {
|
||||||
likeText.innerText = "Like";
|
likeText.innerText = "Like";
|
||||||
heartIcon.setAttribute("style", "color: inherit");
|
heartIcon.setAttribute("style", "color: inherit");
|
||||||
|
|
@ -171,7 +174,7 @@
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
document.getElementById('like-text').innerText = "Unlike";
|
document.getElementById('like-text').innerText = "Unlike";
|
||||||
document.getElementById('heart-icon').setAttribute("style", "color: red");
|
document.getElementById('heart-icon').setAttribute("style", "color: inherit");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
52
gallery/templates/gallery/photo_slideshow.html
Normal file
52
gallery/templates/gallery/photo_slideshow.html
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
{% load static %}
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="{{ site_config.site_head_description }}">
|
||||||
|
<title>{{ site_config.site_head_title }} : Slideshow : {{ photo.album.name }}</title>
|
||||||
|
{% if next_photo %}
|
||||||
|
<meta http-equiv="refresh" content="5; url={% url 'gallery:photo_slideshow_url' next_photo.album.slug next_photo.slug %}" />
|
||||||
|
{% endif %}
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #000;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.slideshow-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
height: 100vh;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="slideshow-container">
|
||||||
|
<a href="{{ photo.get_absolute_url }}">
|
||||||
|
<img
|
||||||
|
src="{{ photo.photo_md.url }}"
|
||||||
|
srcset="
|
||||||
|
{{ photo.photo_sm.url }} 320w,
|
||||||
|
{{ photo.photo_md.url }} 720w,
|
||||||
|
{{ photo.photo_bg.url }} 1920w,
|
||||||
|
{{ photo.photo.url }} 2560w
|
||||||
|
"
|
||||||
|
sizes="(max-width: 640px) 320px,
|
||||||
|
(max-width: 960px) 720px,
|
||||||
|
(max-width: 1920px) 1920px,
|
||||||
|
2560px"
|
||||||
|
alt="{{ photo.album.name }} - {{ photo.slug }}"
|
||||||
|
class="uk-display-block uk-margin-auto"
|
||||||
|
style="max-width: 100%; max-height: 90vh; object-fit: contain;" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,20 +1,17 @@
|
||||||
from django.urls import path, register_converter
|
from django.urls import path, re_path, register_converter
|
||||||
|
|
||||||
from . import converters, views
|
from . import converters, views
|
||||||
|
|
||||||
register_converter(converters.FilenamePathConverter, 'filename')
|
|
||||||
|
|
||||||
|
|
||||||
app_name = 'gallery'
|
app_name = 'gallery'
|
||||||
|
|
||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
|
|
||||||
path('', views.AlbumsList.as_view(), name='main_url'),
|
path('', views.AlbumsList.as_view(), name='main_url'),
|
||||||
path('about/', views.About.as_view(), name='about_url'),
|
path('about/', views.About.as_view(), name='about_url'),
|
||||||
path('search/', views.Search.as_view(), name='search_url'),
|
path('search/', views.Search.as_view(), name='search_url'),
|
||||||
path('photostream/', views.PhotosList.as_view(), name='photos_url'),
|
path('photostream/', views.PhotosList.as_view(), name='photos_url'),
|
||||||
path('like/<slug:album_slug>/<filename:photo_slug>', views.PhotoLike.as_view(), name='photo_like_url'),
|
re_path(r'^like/(?P<album_slug>.+)/(?P<photo_slug>[a-zA-Z0-9_-]{1,50}\.[a-zA-Z]{3,4})/?$', views.PhotoLike.as_view(), name='photo_like_url'),
|
||||||
path('albums/<path:album_slug>/<filename:photo_slug>', views.PhotoDetail.as_view(), name='photo_url'),
|
re_path(r'^slideshow/(?P<album_slug>.+)/(?P<photo_slug>[a-zA-Z0-9_-]{1,50}\.[a-zA-Z]{3,4})/?$', views.PhotoSlideshow.as_view(), name='photo_slideshow_url'),
|
||||||
|
re_path(r'^albums/(?P<album_slug>.+)/(?P<photo_slug>[a-zA-Z0-9_-]{1,50}\.[a-zA-Z]{3,4})/?$', views.PhotoDetail.as_view(), name='photo_url'),
|
||||||
path('albums/<path:album_slug>/', views.AlbumDetail.as_view(), name='album_url'),
|
path('albums/<path:album_slug>/', views.AlbumDetail.as_view(), name='album_url'),
|
||||||
path('albums/', views.AlbumsList.as_view(), name='albums_url'),
|
path('albums/', views.AlbumsList.as_view(), name='albums_url'),
|
||||||
path('<path:redir_path>/', views.redirect_to_album, name='redirect_to_album'),
|
path('<path:redir_path>/', views.redirect_to_album, name='redirect_to_album'),
|
||||||
|
|
|
||||||
|
|
@ -158,6 +158,41 @@ class PhotoLike(View):
|
||||||
return JsonResponse({'success': True, 'likes': photo.likes, 'status': status})
|
return JsonResponse({'success': True, 'likes': photo.likes, 'status': status})
|
||||||
|
|
||||||
|
|
||||||
|
class PhotoSlideshow(DetailView):
|
||||||
|
model = Photo
|
||||||
|
slug_url_kwarg = 'photo_slug'
|
||||||
|
template_name = 'gallery/photo_slideshow.html'
|
||||||
|
|
||||||
|
def get_object(self, queryset=None):
|
||||||
|
album_slug = self.kwargs.get('album_slug')
|
||||||
|
photo_slug = self.kwargs.get('photo_slug')
|
||||||
|
photo = get_object_or_404(
|
||||||
|
Photo.objects.select_related('album'),
|
||||||
|
slug=photo_slug,
|
||||||
|
album__slug=album_slug
|
||||||
|
)
|
||||||
|
|
||||||
|
if photo.slug not in self.request.session:
|
||||||
|
photo.add_view()
|
||||||
|
self.request.session[photo.slug] = 0
|
||||||
|
|
||||||
|
return photo
|
||||||
|
|
||||||
|
def get_context_data(self, **kwargs):
|
||||||
|
context = super().get_context_data(**kwargs)
|
||||||
|
current_photo = self.object
|
||||||
|
|
||||||
|
next_photo = current_photo.get_next()
|
||||||
|
|
||||||
|
if not next_photo:
|
||||||
|
next_photo = Photo.objects.filter(album=current_photo.album).order_by('taken_at').first()
|
||||||
|
|
||||||
|
context.update({
|
||||||
|
"next_photo": next_photo,
|
||||||
|
"liked": self.request.session.get(f"liked_{current_photo.slug}", False)
|
||||||
|
})
|
||||||
|
return context
|
||||||
|
|
||||||
class Search(TemplateView):
|
class Search(TemplateView):
|
||||||
"""Search view for public albums by name, place or city."""
|
"""Search view for public albums by name, place or city."""
|
||||||
template_name = "gallery/search.html"
|
template_name = "gallery/search.html"
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue