Mercurial > sat_legacy_website

annotate templates/sat_website/gallery.html @ 110:f3b907d0e5ab

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
changed anti-spam email by .invalid tld. TODO: should use a template instead
author Goffi <goffi@goffi.org>
date Sat, 17 Oct 2015 17:52:43 +0200
parents 7a79cb5ed43b
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
1 {% comment %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
2 SàT website: Salut à Toi's presentation website
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
3 Copyright (C) 2012 Jérôme Poisson (goffi@goffi.org)
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
4
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
5 This file is part of SàT website.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
6
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
7 SàT website is free software: you can redistribute it and/or modify
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
8 it under the terms of the GNU Affero General Public License as published by
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
9 the Free Software Foundation, either version 3 of the License, or
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
10 (at your option) any later version.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
11
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
12 Foobar is distributed in the hope that it will be useful,
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
13 but WITHOUT ANY WARRANTY; without even the implied warranty of
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
14 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
15 GNU Affero General Public License for more details.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
16
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
17 You should have received a copy of the GNU Affero General Public License
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
18 along with Foobar. If not, see <http://www.gnu.org/licenses/>.
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
19 {% endcomment %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
20
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
21 {% load i18n %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
22 {% load staticfiles %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
23 {% load utils %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
24
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
25 <div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
26 {% if media|length > 9 %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
27 <ol class="carousel-indicators">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
28 {% for row in media|buffer:9 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
29 <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
30 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
31 </ol>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
32 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
33 <div class="carousel-inner" role="listbox">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
34 {% for row in media|buffer:9 %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
35 <div class="item{% if not forloop.counter0 %} active{% endif %}">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
36 {% for entry in row %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
37 <div class="col-md-4">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
38 {% if entry.poster %}
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
39 <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{{ entry.poster }}" controls preload="none">
86
45770a652636 use source tag to display video (tip from Link Mauve)
souliane <souliane@mailoo.org>
parents: 84
diff changeset
40 {% blocktrans with firefox="<a href=\"http://www.mozilla.org/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}.{% endblocktrans %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
41 </video>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
42 {% else %}
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
43 <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static entry.path %}">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
44 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
45 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
46 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
47 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
48 {% endfor %}
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
49 {% if media|length > 9 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
50 <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
51 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
52 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
53 </a>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
54 <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
55 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
56 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
57 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
58 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
59 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
60 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
61
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
62 <div class="modal my-modal" id="modal-{{ name }}" role="dialog">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
63 <div class="modal-dialog">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
64 <div class="modal-content">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
65 <div class="modal-header">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
66 <button class="close" type="button" data-dismiss="modal">×</button>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
67 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
68 <div class="modal-body">
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
69 <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
70 {% if media|length > 1 %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
71 <ol class="carousel-indicators">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
72 {% for entry in media %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
73 <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
74 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
75 </ol>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
76 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
77 <div class="carousel-inner" role="listbox">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
78 {% for entry in media %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
79 <div class="item{% if not forloop.counter0 %} active{% endif %}">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
80 {% if entry.poster %}
92
7a79cb5ed43b add subtitles in video metadata and <track /> elements
souliane <souliane@mailoo.org>
parents: 91
diff changeset
81 {% include "sat_website/video.html" with entry=entry style="img-responsive" width=640 height=400 %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
82 {% else %}
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
83 <img class="img-responsive" src="{% static entry.path %}">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
84 {% endif %}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
85 <div class="carousel-caption">
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
86 {{ entry.description }}<br/>
90
5de2a3dd4e67 change VideoDesc attribute path to paths, a dict where you can specify a different path for each language
souliane <souliane@mailoo.org>
parents: 89
diff changeset
87 {{ entry|metadata }}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
88 </div>
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
89 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
90 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
91 </div>
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
92 {% if media|length > 1 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
93 <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
94 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
95 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
96 </a>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
97 <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
98 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
99 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
100 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
101 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
102 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
103 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
104 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
105 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
106 </div>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
107
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
108 <script>
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
109 $(document).ready(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
110 // open the big gallery when a thumbnail is clicked
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
111 $('#carousel-{{ name }} .thumbnail').click(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
112 $('#modal-{{ name }}').modal('show');
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
113 index = parseInt($(this).attr('index'));
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
114 $('#carousel-{{ name }}-modal').carousel(index);
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
115 // start playing the big video
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
116 if ($(this)[0].tagName == 'VIDEO') {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
117 $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
118 }
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
119 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
120
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
121 // thumbail's video starts playing when clicked, pause it
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
122 $('#carousel-{{ name }} video.thumbnail').each(function(index) {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
123 $(this).on('play', function(e) { $(this)[0].pause(); });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
124 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
125
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
126 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
127 </script>