muistox/gallery/templates/gallery/photo_detail.html

{% extends "base.html" %}
{% load i18n %}
{% load exif_filters %}

<!-- Title -->
{% block title %} {{ photo.album.name }} : {{ photo.slug }} {% endblock %}


<!-- Content -->
{% block content %}

    <div class="uk-align-center uk-container-large uk-background-secondary uk-light">
        
        <div class="uk-position-relative">
            <div uk-lightbox>
                <a href="{{ photo.photo_bg.url }}" data-alt="{{ photo.slug }}">
                    <img 
                        src="{{ photo.photo_md.url }}" 
                        srcset="
                            {{ photo.photo_sm.url }} 320w, 
                            {{ photo.photo_md.url }} 720w, 
                            {{ photo.photo_bg.url }} 1920w
                        " 
                        sizes="(max-width: 640px) 320px, 
                               (max-width: 960px) 720px, 
                               1920px" 
                        alt="{{ photo.slug }}" 
                        class="uk-display-block uk-margin-auto"
                        style="max-width: 100%; max-height: 90vh; object-fit: contain;" />
                </a>
            </div>
        
            <!-- Navigointinuolet -->
            {% if photo.get_prev %}
            <a href="{{ photo.get_prev.get_absolute_url }}" class="uk-position-center-left uk-hidden-hover" uk-slidenav-previous></a>
            {% endif %}
        
            {% if photo.get_next %}
            <a href="{{ photo.get_next.get_absolute_url }}" class="uk-position-center-right uk-hidden-hover" uk-slidenav-next></a>
            {% endif %}
        </div>
        
    
    </div>


    <!-- Breadcrumb -->
    <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' %}">{% 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>  
        </div>
    </div>


    <div class="uk-child-width-1-2@m uk-grid-small uk-grid-match" uk-grid>

        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">{% trans "Photo Info" %}</h3>
                <div class="uk-grid-small" uk-grid>
                    <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>{% 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>{% 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>{% trans "Views" %}</div>
                    <div>{{ photo.views }}</div>
                </div>
                <div class="uk-grid-small" uk-grid>
                    <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>{% 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>{% 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">{% trans "Like" %}</span>
                    </button>
                </div>
            </div>
        </div>


        <div>
            <div class="uk-card uk-card-default uk-card-body">
                <h3 class="uk-card-title">{% trans "Exif" %}</h3>
                <div class="uk-grid-small" uk-grid>
                    <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>{% trans "Lens" %}</div>
                    <div>{{ photo.exif.LensModel }}</div>
                </div>
                <div class="uk-grid-small" uk-grid>
                    <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>{% 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>{% 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>{% 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>{% 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>{% trans "Keywords" %}</div>
                    <div>{{ photo.exif.Keywords|exif_keywords }}</div>
                </div>
            </div>
        </div>

     </div>

     <script>
        const likeBtn = document.getElementById('like-button');
        const likeText = document.getElementById('like-text');
        const heartIcon = document.getElementById('heart-icon');
        const likeCount = document.getElementById('like-count');
    
        likeBtn.addEventListener('click', function () {
            fetch("{% url 'gallery:photo_like_url' photo.album.slug photo.slug %}", {
                method: "POST",
                headers: {
                    "X-CSRFToken": "{{ csrf_token }}",
                    "Content-Type": "application/json",
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    likeCount.innerText = data.likes;
    
                    if (data.status === "liked") {
                        likeText.innerText = "Unlike";
                        heartIcon.setAttribute("style", "color: inherit");
                    } else {
                        likeText.innerText = "Like";
                        heartIcon.setAttribute("style", "color: inherit");
                    }
                }
            });
        });
    </script>

    {% if liked %}
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById('like-text').innerText = "Unlike";
            document.getElementById('heart-icon').setAttribute("style", "color: inherit");
        });
    </script>
    {% endif %}

{% endblock %}