Mercurial > sat_legacy_website

annotate templates/sat_website/gallery.html @ 58:746e53efc188

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
allow large media files (screencasts) to be stored on an external server
author souliane <souliane@mailoo.org>
date Thu, 14 May 2015 23:37:56 +0200
parents d54f2f09a73a
children 3d04a955bec4
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">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
26 {% if screenshots|length > 9 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
27 <ol class="carousel-indicators">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
28 {% for row in screenshots|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">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
34 {% for row in screenshots|buffer:9 %}
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 %}">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
36 {% for screenshot in row %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
37 <div class="col-md-4">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
38 {% if screenshot.poster %}
58
746e53efc188 allow large media files (screencasts) to be stored on an external server
souliane <souliane@mailoo.org>
parents: 54
diff changeset
39 <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{{ screenshot.poster }}" controls="controls" src="{{ screenshot.path }}" preload="none">
46
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
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 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
43 <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static screenshot.path %}">
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 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
49 {% if screenshots|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">
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
70 {% if screenshots|length > 1 %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
71 <ol class="carousel-indicators">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
72 {% for screenshot in screenshots %}
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">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
78 {% for screenshot in screenshots %}
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 %}">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
80 {% if screenshot.poster %}
58
746e53efc188 allow large media files (screencasts) to be stored on an external server
souliane <souliane@mailoo.org>
parents: 54
diff changeset
81 <video class="img-responsive" width="640" height="400" poster="{{ screenshot.poster }}" controls="controls" src="{{ screenshot.path }}" preload="none">
46
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
diff changeset
82 {% 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
83 </video>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
84 {% else %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
85 <img class="img-responsive" src="{% static screenshot.path %}">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
86 {% endif %}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
87 <div class="carousel-caption">
46
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
diff changeset
88 {{ screenshot.description }}<br/>
a18800261cf6 change some texts, add a couple of screenshots, set metadata version and year to the medias
souliane <souliane@mailoo.org>
parents: 30
diff changeset
89 {{ screenshot.data|metadata }}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
90 </div>
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
91 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
92 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
93 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
94 {% if screenshots|length > 1 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
95 <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
96 <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
97 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
98 </a>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
99 <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
100 <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
101 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
102 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
103 {% endif %}
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>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
107 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
108 </div>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
109
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
110 <script>
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
111 $(document).ready(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
112 // 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
113 $('#carousel-{{ name }} .thumbnail').click(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
114 $('#modal-{{ name }}').modal('show');
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
115 index = parseInt($(this).attr('index'));
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
116 $('#carousel-{{ name }}-modal').carousel(index);
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
117 // start playing the big video
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
118 if ($(this)[0].tagName == 'VIDEO') {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
119 $('#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
120 }
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
121 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
122
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
123 // 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
124 $('#carousel-{{ name }} video.thumbnail').each(function(index) {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
125 $(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
126 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
127
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
128 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
129 </script>