blue-twilight/resources/views/themes/base/gallery/photo.blade.php

@extends(Theme::viewName('layout'))
@section('title', $photo->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    @foreach ($album->albumParentTree() as $parentAlbum)
        <li class="breadcrumb-item"><a href="{{ $parentAlbum->url() }}">{{ $parentAlbum->name }}</a></li>
    @endforeach
    <li class="breadcrumb-item active">{{ $photo->name }}</li>
@endsection

@section('content')
    <div class="container" id="photo-app">
        <div class="row">
            <div class="col">
                <h1>{{ $photo->name }}</h1>
                @if (strlen($photo->description) > 0)
                    <p>{{ $photo->description }}</p>
                @endif
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8 content-body">
                @if ($is_original_allowed)
                    <a href="{{ $photo->thumbnailUrl() }}">
                @endif
                <img src="{{ $photo->thumbnailUrl('fullsize') }}" alt="" class="img-thumbnail mb-4"/>
                @if ($is_original_allowed)
                    </a>
                @endif

                <div class="row mb-3">
                    <div class="col-6">
                        @if (!is_null($previous_photo))
                            <a href="{{ $previous_photo->url() }}" class="btn btn-secondary" id="previous-button">@lang('gallery.previous_button')</a>
                        @endif
                    </div>
                    <div class="col-6 text-right">
                        @if (!is_null($next_photo))
                            <a href="{{ $next_photo->url() }}" class="btn btn-secondary" id="next-button">@lang('gallery.next_button')</a>
                        @endif
                    </div>
                </div>

                @if ($photo->labels()->count() > 0)
                    <h2 class="h4">@lang('gallery.labels')</h2>
                    <ul class="nav nav-pills mb-4">
                        @foreach ($photo->labels()->orderBy('name')->get() as $label)
                            <li class="nav-item">
                                <a class="nav-link" href="{{ $label->url() }}">
                                    <i class="fa fa-tag"></i> {{ $label->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif

                @if (UserConfig::get('allow_photo_comments'))
                    @include (Theme::viewName('partials.photo_comments'))
                @endif
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">Information about this photo:</div>
                    <div class="card-body" style="padding: 0;">
                        <table class="table table-striped photo-metadata mb-0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="metadata_name">@lang('gallery.file_name')</td>
                                    <td class="metadata_value">{{ $photo->file_name }}</td>
                                </tr>

                                @if (!empty($photo->taken_at))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.date_taken')</td>
                                        <td class="metadata_value">{{ date(UserConfig::get('date_format'), strtotime($photo->taken_at)) }}</td>
                                    </tr>
                                @endif

                                <tr>
                                    <td class="metadata_name">@lang('gallery.date_uploaded')</td>
                                    <td class="metadata_value">{{ date(UserConfig::get('date_format'), strtotime($photo->created_at)) }}</td>
                                </tr>

                                @if (!empty($photo->camera_make))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.camera_make')</td>
                                        <td class="metadata_value">{{ $photo->camera_make }}</td>
                                    </tr>
                                @endif

                                @if (!empty($photo->camera_model))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.camera_model')</td>
                                        <td class="metadata_value">{{ $photo->camera_model }}</td>
                                    </tr>
                                @endif

                                @if (!empty($photo->camera_software))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.camera_software')</td>
                                        <td class="metadata_value">{{ $photo->camera_software }}</td>
                                    </tr>
                                @endif

                                @if (!empty($photo->iso_number))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.iso_rating')</td>
                                        <td class="metadata_value">{{ $photo->iso_number }}</td>
                                    </tr>
                                @endif

                                @if (!empty($photo->focal_length))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.focal_length')</td>
                                        <td class="metadata_value">@lang('gallery.focal_length_units', ['value' => $photo->focal_length])</td>
                                    </tr>
                                @endif

                                @if (!empty($photo->aperture_fnumber))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.aperture')</td>
                                        <td class="metadata_value">{{ $photo->aperture_fnumber }}</td>
                                    </tr>
                                @endif

                                @if (!empty($photo->shutter_speed))
                                    <tr>
                                        <td class="metadata_name">@lang('gallery.shutter_speed')</td>
                                        <td class="metadata_value">@lang('gallery.shutter_speed_units', ['value' => $photo->shutter_speed])</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

                @if (!empty($photo->raw_exif_data))
                    @can('changeMetadata', $photo)
                        <p><a href="{{ $photo->exifUrl() }}" class="btn btn-primary mt-3"><i class="fa fa-eye fa-fw"></i> @lang('gallery.show_raw_exif_data')</a></p>
                    @endcan
                @endif
            </div>
        </div>

        <div class="row">
            <div class="col mt-4">
                <a href="{{ $album->url() }}" class="btn btn-secondary">&laquo; @lang('gallery.back_to_album', ['name' => $photo->album->name])</a>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        // #104: Next/Prev key bindings
        $(document).ready(function()
        {
            $(document).keyup(function(e)
            {
                if (e.which === 37)
                {
                    document.getElementById('previous-button').click();
                }
                else if (e.which === 39)
                {
                    document.getElementById('next-button').click();
                }
            });
        });

        var app = null;
        var photoViewModel = new PhotoViewModel({
            reply_comment_form: '{{ $photo->replyToCommentFormUrl() }}'
        });

        app = new Vue(photoViewModel);
        app.init();
    </script>
@endpush