Mercurial > sat_legacy_website

annotate templates/sat_website/gallery.html @ 89:4b4a5d7602f8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rename screenshots to media, since not only screenshots but also videos are listed
author souliane <souliane@mailoo.org>
date Tue, 16 Jun 2015 12:35:32 +0200
parents 45770a652636
children 5de2a3dd4e67
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">
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
40 <source src="{{ entry.path }}" type='video/webm; codecs="vp8.0, vorbis"'>
86
45770a652636 use source tag to display video (tip from Link Mauve)
souliane <souliane@mailoo.org>
parents: 84
diff changeset
41 {% 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
42 </video>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
43 {% else %}
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
44 <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
45 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
46 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
47 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
48 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
49 {% endfor %}
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
50 {% if media|length > 9 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
51 <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
52 <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
53 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
54 </a>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
55 <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
56 <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
57 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
58 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
59 {% endif %}
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 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
62
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
63 <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
64 <div class="modal-dialog">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
65 <div class="modal-content">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
66 <div class="modal-header">
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
67 <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
68 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
69 <div class="modal-body">
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
70 <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
71 {% if media|length > 1 %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
72 <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
73 {% for entry in media %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
74 <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
75 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
76 </ol>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
77 {% endif %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
78 <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
79 {% for entry in media %}
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
80 <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
81 {% 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
82 <video class="img-responsive" width="640" height="400" poster="{{ entry.poster }}" controls preload="none">
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
83 <source src="{{ entry.path }}" type='video/webm; codecs="vp8.0, vorbis"'>
86
45770a652636 use source tag to display video (tip from Link Mauve)
souliane <souliane@mailoo.org>
parents: 84
diff changeset
84 {% 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 %}
45770a652636 use source tag to display video (tip from Link Mauve)
souliane <souliane@mailoo.org>
parents: 84
diff changeset
85 </video>
29
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
86 {% else %}
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
87 <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
88 {% endif %}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
89 <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
90 {{ entry.description }}<br/>
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
91 {{ entry.data|metadata }}
30
565d653a15d3 append language and subtitles info to video description
souliane <souliane@mailoo.org>
parents: 29
diff changeset
92 </div>
29
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 {% endfor %}
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
95 </div>
89
4b4a5d7602f8 rename screenshots to media, since not only screenshots but also videos are listed
souliane <souliane@mailoo.org>
parents: 86
diff changeset
96 {% if media|length > 1 %}
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
97 <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
98 <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
99 <span class="sr-only">Previous</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
100 </a>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
101 <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
102 <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
103 <span class="sr-only">Next</span>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
104 </a>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
105 {% endif %}
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>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
109 </div>
b45621706d83 use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
diff changeset
110 </div>
54
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
111
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
112 <script>
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
113 $(document).ready(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
114 // 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
115 $('#carousel-{{ name }} .thumbnail').click(function() {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
116 $('#modal-{{ name }}').modal('show');
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
117 index = parseInt($(this).attr('index'));
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
118 $('#carousel-{{ name }}-modal').carousel(index);
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
119 // start playing the big video
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
120 if ($(this)[0].tagName == 'VIDEO') {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
121 $('#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
122 }
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
123 });
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 // 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
126 $('#carousel-{{ name }} video.thumbnail').each(function(index) {
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
127 $(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
128 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
129
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
130 });
d54f2f09a73a fixes displaying two carousels on the same page
souliane <souliane@mailoo.org>
parents: 46
diff changeset
131 </script>