Merge pull request #438
This commit is contained in:
Simon Conseil
@@ -14,235 +14,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="icons">
|
||||
{% if settings.show_map and album.show_map %}
|
||||
<a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
|
||||
title="Show/Hide map" alt="Show/Hide Map (m)" /></a>
|
||||
{% endif %}
|
||||
<a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
|
||||
title="Fullscreen" alt="Fullscreen (f)" /></a>
|
||||
</div>
|
||||
<div id="gallery"></div>
|
||||
{% include 'album_items.html' %}
|
||||
|
||||
{% if album.zip %}
|
||||
<div id="additionnal-infos" class="row">
|
||||
<p><a href="{{ album.zip }}"
|
||||
title="Download a zip archive with all images">Download ZIP</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block late_js %}
|
||||
{% macro img_description(media) -%}
|
||||
{%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
|
||||
{# clean up tags and whitespace, including newlines, in the description #}
|
||||
{%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%}
|
||||
{%- if media.exif -%}
|
||||
<div class='film-meta'>
|
||||
{%- if media.exif.iso -%}<abbr title='film speed'>{{ media.exif.iso }}</abbr> {%- endif -%}
|
||||
{%- if media.exif.exposure -%}<abbr title='exposure'>{{ media.exif.exposure }}</abbr> {%- endif -%}
|
||||
{%- if media.exif.fstop -%}<abbr title='aperture'>{{ media.exif.fstop }}</abbr> {%- endif -%}
|
||||
{%- if media.exif.focal -%}<abbr title='focal length'>{{ media.exif.focal }}</abbr> {%- endif -%}
|
||||
</div>
|
||||
{%- if media.exif.gps -%}
|
||||
<a title='location' href='https://www.openstreetmap.org/?mlat={{ media.exif.gps.lat }}&mlon={{ media.exif.gps.lon}}&zoom=12&layers=M' target='_blank' class='map' >{{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }}{{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }}</a>
|
||||
{%- endif -%}
|
||||
{%- if media.exif.Make or media.exif.Model -%}
|
||||
<abbr title='camera make and model'>{{ media.exif.Make }} {{ media.exif.Model }}</abbr>
|
||||
{%- endif -%}
|
||||
{%- if media.exif.datetime -%}
|
||||
<abbr title='date'>{{ media.exif.datetime }}</abbr>
|
||||
{%- endif -%}
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
<script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
|
||||
{% if settings.show_map and album.show_map %}
|
||||
<script src="{{ theme.url }}/leaflet/leaflet.js"></script>
|
||||
<script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
|
||||
{% endif %}
|
||||
<script src="{{ theme.url }}/galleria.min.js"></script>
|
||||
<script src="{{ theme.url }}/themes/{{ settings.galleria_theme }}/galleria.{{ settings.galleria_theme }}.min.js"></script>
|
||||
<script src="{{ theme.url }}/plugins/history/galleria.history.min.js"></script>
|
||||
<script>
|
||||
var data = [
|
||||
{% for media in album.medias -%}
|
||||
{
|
||||
title: "{{ media.title }}",
|
||||
description: "{{ img_description(media) | e }}",
|
||||
thumb: "{{ media.thumbnail }}",
|
||||
{% if media.big %}
|
||||
big: "{{ media.big_url }}",
|
||||
{% endif %}
|
||||
{% if media.type == "image" %}
|
||||
image: "{{ media.url }}"
|
||||
{% endif %}
|
||||
{% if media.type == "video" %}
|
||||
image: "{{ theme.url }}/img/empty.png",
|
||||
layer: "<video controls><source src='{{ media.url }}' type='{{ media.mime }}' /></video>"
|
||||
{% endif %}
|
||||
},
|
||||
{% endfor %}
|
||||
]
|
||||
|
||||
{% if settings.show_map and album.show_map %}
|
||||
var selected =-1;
|
||||
/* Init markers */
|
||||
var features = new Array();
|
||||
|
||||
function selectMarker(marker) {
|
||||
if (selected >= 0 && features[selected] != null) {
|
||||
features[selected].setStyle({
|
||||
radius: 7,
|
||||
fillColor: "#888a85",
|
||||
color: "#2e3436",
|
||||
weight: 1,
|
||||
fillOpacity: 1,
|
||||
clickable: true
|
||||
});
|
||||
features[selected].redraw();
|
||||
}
|
||||
|
||||
if (marker != null) {
|
||||
marker.setStyle({
|
||||
radius: 7,
|
||||
fillColor: "#cc0000",
|
||||
color: "#ef2929",
|
||||
weight: 1,
|
||||
fillOpacity: 1,
|
||||
clickable: true
|
||||
});
|
||||
marker.bringToFront();
|
||||
map.panTo(marker.getLatLng());
|
||||
}
|
||||
}
|
||||
|
||||
function onFeatureClick(e) {
|
||||
selectMarker(e.target);
|
||||
var id = features.indexOf(e.target);
|
||||
var galleria = $("#gallery").data("galleria");
|
||||
if (selected != id) {
|
||||
selected = id;
|
||||
galleria.show(id);
|
||||
}
|
||||
}
|
||||
|
||||
function init_map() {
|
||||
/* Make sure we have the map div */
|
||||
if ($("#galleria-map").length == 0) {
|
||||
$(".galleria-stage").after("<div id='galleria-map'></div>");
|
||||
map = L.map('galleria-map');
|
||||
L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
|
||||
map.setView([51.505, -0.09], 12);
|
||||
|
||||
{% for media in album.medias %}
|
||||
{% if media.exif and media.exif.gps %}
|
||||
var lat = {{ media.exif.gps.lat }};
|
||||
var lon = {{ media.exif.gps.lon }};
|
||||
var marker = L.circleMarker([lat, lon], {
|
||||
radius: 7,
|
||||
fillColor: "#888a85",
|
||||
color: "#2e3436",
|
||||
weight: 1,
|
||||
fillOpacity: 1,
|
||||
clickable: true
|
||||
});
|
||||
marker.on('click', onFeatureClick);
|
||||
features.push(marker);
|
||||
marker.addTo(map);
|
||||
{% else %}
|
||||
features.push(null);
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
selectMarker(features[selected]);
|
||||
}
|
||||
}
|
||||
|
||||
function galleryMapToggle() {
|
||||
/* Make sure the map is loaded */
|
||||
init_map();
|
||||
|
||||
var stage = $(".galleria-stage");
|
||||
var mapdiv = $("#galleria-map");
|
||||
var icons = $(".icons");
|
||||
|
||||
if (stage.attr.hidden == true) {
|
||||
stage.attr.hidden = false;
|
||||
$(".galleria-info-link").show();
|
||||
mapdiv.hide();
|
||||
stage.css("opacity", "1");
|
||||
icons.css("background-color", "inherit");
|
||||
/* Change display of the Map link */
|
||||
$(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/map.png";
|
||||
} else {
|
||||
stage.attr.hidden = true;
|
||||
$(".galleria-info-link").hide();
|
||||
mapdiv.show();
|
||||
/* Play with the stage opacity otherwise galleria will go mad */
|
||||
stage.css("opacity", "0");
|
||||
icons.css("background-color", "#333");
|
||||
/* Change display of the Map link */
|
||||
$(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/photo.png";
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
Galleria.ready(function() {
|
||||
/*
|
||||
load thumbnails after gallery setup, and download has started
|
||||
for the main images, but before the loading of map tiles starts
|
||||
in the background. This ensures visible elements are prioritised
|
||||
over non-visible elements
|
||||
|
||||
The choice to lazy load thumbnails in batches of 50 was not made
|
||||
scientifically. Other numbers may yield better performance.
|
||||
*/
|
||||
this.lazyLoadChunks( 50 );
|
||||
|
||||
this.attachKeyboard({
|
||||
right: this.next,
|
||||
left: this.prev,
|
||||
/* Toggle fullscreen display on press of 'f' key */
|
||||
0x46: this.toggleFullscreen,
|
||||
{% if settings.show_map and album.show_map %}
|
||||
/* Toggle map display on press of 'm' key */
|
||||
0x4D: galleryMapToggle,
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
var gallery = this;
|
||||
$('#fullscreen').click(function() {
|
||||
gallery.toggleFullscreen();
|
||||
});
|
||||
|
||||
$('.icons').appendTo(this.$('container'));
|
||||
|
||||
{% if settings.show_map and album.show_map %}
|
||||
$(".gallery-map-toggle").click(galleryMapToggle);
|
||||
this.bind('loadfinish', function(e) {
|
||||
/* Triggers every time Galleria has finished loading an image.*/
|
||||
if (selected != e.index) {
|
||||
selectMarker(features[e.index]);
|
||||
selected = e.index;
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
Galleria.configure({
|
||||
imageCrop: false,
|
||||
transition: "fade",
|
||||
thumbnails: "lazy"
|
||||
});
|
||||
Galleria.run("#gallery", {dataSource: data});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
233
sigal/themes/galleria/templates/album_items.html
Normal file
233
sigal/themes/galleria/templates/album_items.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<div class="icons">
|
||||
{% if settings.show_map and album.show_map %}
|
||||
<a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
|
||||
title="Show/Hide map" alt="Show/Hide Map (m)" /></a>
|
||||
{% endif %}
|
||||
<a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
|
||||
title="Fullscreen" alt="Fullscreen (f)" /></a>
|
||||
</div>
|
||||
<div id="gallery"></div>
|
||||
|
||||
{% if album.zip %}
|
||||
<div id="additionnal-infos" class="row">
|
||||
<p><a href="{{ album.zip }}"
|
||||
title="Download a zip archive with all images">Download ZIP</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block late_js %}
|
||||
{% if album.medias %}
|
||||
{% macro img_description(media) -%}
|
||||
{%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
|
||||
{# clean up tags and whitespace, including newlines, in the description #}
|
||||
{%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%}
|
||||
{%- if media.exif -%}
|
||||
<div class='film-meta'>
|
||||
{%- if media.exif.iso -%}<abbr title='film speed'>{{ media.exif.iso }}</abbr> {%- endif -%}
|
||||
{%- if media.exif.exposure -%}<abbr title='exposure'>{{ media.exif.exposure }}</abbr> {%- endif -%}
|
||||
{%- if media.exif.fstop -%}<abbr title='aperture'>{{ media.exif.fstop }}</abbr> {%- endif -%}
|
||||
{%- if media.exif.focal -%}<abbr title='focal length'>{{ media.exif.focal }}</abbr> {%- endif -%}
|
||||
</div>
|
||||
{%- if media.exif.gps -%}
|
||||
<a title='location' href='https://www.openstreetmap.org/?mlat={{ media.exif.gps.lat }}&mlon={{ media.exif.gps.lon}}&zoom=12&layers=M' target='_blank' class='map' >{{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }}{{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }}</a>
|
||||
{%- endif -%}
|
||||
{%- if media.exif.Make or media.exif.Model -%}
|
||||
<abbr title='camera make and model'>{{ media.exif.Make }} {{ media.exif.Model }}</abbr>
|
||||
{%- endif -%}
|
||||
{%- if media.exif.datetime -%}
|
||||
<abbr title='date'>{{ media.exif.datetime }}</abbr>
|
||||
{%- endif -%}
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
<script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
|
||||
{% if settings.show_map and album.show_map %}
|
||||
<script src="{{ theme.url }}/leaflet/leaflet.js"></script>
|
||||
<script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
|
||||
{% endif %}
|
||||
<script src="{{ theme.url }}/galleria.min.js"></script>
|
||||
<script src="{{ theme.url }}/themes/{{ settings.galleria_theme }}/galleria.{{ settings.galleria_theme }}.min.js"></script>
|
||||
<script src="{{ theme.url }}/plugins/history/galleria.history.min.js"></script>
|
||||
<script>
|
||||
var data = [
|
||||
{% for media in album.medias -%}
|
||||
{
|
||||
title: "{{ media.title }}",
|
||||
description: "{{ img_description(media) | e }}",
|
||||
thumb: "{{ media.thumbnail }}",
|
||||
{% if media.big %}
|
||||
big: "{{ media.big_url }}",
|
||||
{% endif %}
|
||||
{% if media.type == "image" %}
|
||||
image: "{{ media.url }}"
|
||||
{% endif %}
|
||||
{% if media.type == "video" %}
|
||||
image: "{{ theme.url }}/img/empty.png",
|
||||
layer: "<video controls><source src='{{ media.url }}' type='{{ media.mime }}' /></video>"
|
||||
{% endif %}
|
||||
},
|
||||
{% endfor %}
|
||||
]
|
||||
|
||||
{% if settings.show_map and album.show_map %}
|
||||
var selected =-1;
|
||||
/* Init markers */
|
||||
var features = new Array();
|
||||
|
||||
function selectMarker(marker) {
|
||||
if (selected >= 0 && features[selected] != null) {
|
||||
features[selected].setStyle({
|
||||
radius: 7,
|
||||
fillColor: "#888a85",
|
||||
color: "#2e3436",
|
||||
weight: 1,
|
||||
fillOpacity: 1,
|
||||
clickable: true
|
||||
});
|
||||
features[selected].redraw();
|
||||
}
|
||||
|
||||
if (marker != null) {
|
||||
marker.setStyle({
|
||||
radius: 7,
|
||||
fillColor: "#cc0000",
|
||||
color: "#ef2929",
|
||||
weight: 1,
|
||||
fillOpacity: 1,
|
||||
clickable: true
|
||||
});
|
||||
marker.bringToFront();
|
||||
map.panTo(marker.getLatLng());
|
||||
}
|
||||
}
|
||||
|
||||
function onFeatureClick(e) {
|
||||
selectMarker(e.target);
|
||||
var id = features.indexOf(e.target);
|
||||
var galleria = $("#gallery").data("galleria");
|
||||
if (selected != id) {
|
||||
selected = id;
|
||||
galleria.show(id);
|
||||
}
|
||||
}
|
||||
|
||||
function init_map() {
|
||||
/* Make sure we have the map div */
|
||||
if ($("#galleria-map").length == 0) {
|
||||
$(".galleria-stage").after("<div id='galleria-map'></div>");
|
||||
map = L.map('galleria-map');
|
||||
L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
|
||||
map.setView([51.505, -0.09], 12);
|
||||
|
||||
{% for media in album.medias %}
|
||||
{% if media.exif and media.exif.gps %}
|
||||
var lat = {{ media.exif.gps.lat }};
|
||||
var lon = {{ media.exif.gps.lon }};
|
||||
var marker = L.circleMarker([lat, lon], {
|
||||
radius: 7,
|
||||
fillColor: "#888a85",
|
||||
color: "#2e3436",
|
||||
weight: 1,
|
||||
fillOpacity: 1,
|
||||
clickable: true
|
||||
});
|
||||
marker.on('click', onFeatureClick);
|
||||
features.push(marker);
|
||||
marker.addTo(map);
|
||||
{% else %}
|
||||
features.push(null);
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
selectMarker(features[selected]);
|
||||
}
|
||||
}
|
||||
|
||||
function galleryMapToggle() {
|
||||
/* Make sure the map is loaded */
|
||||
init_map();
|
||||
|
||||
var stage = $(".galleria-stage");
|
||||
var mapdiv = $("#galleria-map");
|
||||
var icons = $(".icons");
|
||||
|
||||
if (stage.attr.hidden == true) {
|
||||
stage.attr.hidden = false;
|
||||
$(".galleria-info-link").show();
|
||||
mapdiv.hide();
|
||||
stage.css("opacity", "1");
|
||||
icons.css("background-color", "inherit");
|
||||
/* Change display of the Map link */
|
||||
$(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/map.png";
|
||||
} else {
|
||||
stage.attr.hidden = true;
|
||||
$(".galleria-info-link").hide();
|
||||
mapdiv.show();
|
||||
/* Play with the stage opacity otherwise galleria will go mad */
|
||||
stage.css("opacity", "0");
|
||||
icons.css("background-color", "#333");
|
||||
/* Change display of the Map link */
|
||||
$(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/photo.png";
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
Galleria.ready(function() {
|
||||
/*
|
||||
load thumbnails after gallery setup, and download has started
|
||||
for the main images, but before the loading of map tiles starts
|
||||
in the background. This ensures visible elements are prioritised
|
||||
over non-visible elements
|
||||
|
||||
The choice to lazy load thumbnails in batches of 50 was not made
|
||||
scientifically. Other numbers may yield better performance.
|
||||
*/
|
||||
this.lazyLoadChunks( 50 );
|
||||
|
||||
this.attachKeyboard({
|
||||
right: this.next,
|
||||
left: this.prev,
|
||||
/* Toggle fullscreen display on press of 'f' key */
|
||||
0x46: this.toggleFullscreen,
|
||||
{% if settings.show_map and album.show_map %}
|
||||
/* Toggle map display on press of 'm' key */
|
||||
0x4D: galleryMapToggle,
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
var gallery = this;
|
||||
$('#fullscreen').click(function() {
|
||||
gallery.toggleFullscreen();
|
||||
});
|
||||
|
||||
$('.icons').appendTo(this.$('container'));
|
||||
|
||||
{% if settings.show_map and album.show_map %}
|
||||
$(".gallery-map-toggle").click(galleryMapToggle);
|
||||
this.bind('loadfinish', function(e) {
|
||||
/* Triggers every time Galleria has finished loading an image.*/
|
||||
if (selected != e.index) {
|
||||
selectMarker(features[e.index]);
|
||||
selected = e.index;
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
Galleria.configure({
|
||||
imageCrop: false,
|
||||
transition: "fade",
|
||||
thumbnails: "lazy"
|
||||
});
|
||||
Galleria.run("#gallery", {dataSource: data});
|
||||
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -24,10 +24,8 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% include 'album_items.html' %}
|
||||
|
||||
|
||||
|
||||
{% if album.description %}
|
||||
<div id="description">
|
||||
{{ album.description }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user