Mercurial > sat_legacy_website

annotate templates/sat_website/gallery.html @ 135:b61cb60a8eb2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
replace logos in different sizes for new ones generated from the SVG source
author souliane <souliane@mailoo.org>
date Wed, 09 Dec 2015 03:01:48 +0100
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>