Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 715a2ce

Browse files
committedAug 4, 2015
Fotorama directive to display a gallery using http://fotorama.io jQuery plugin
Usage: .. fotorama:: ⌨️ true :allowfullscreen: native image0.jpg image1.jpg image2.jpg image3.jpg
1 parent 0546186 commit 715a2ce

File tree

8 files changed

+228
-0
lines changed

8 files changed

+228
-0
lines changed
 

‎v7/fotorama_directive/README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
Fotorama directive to display a gallery using http://fotorama.io jQuery plugin
2+
3+
# Usage
4+
5+
```
6+
.. fotorama::
7+
:keyboard: true
8+
:allowfullscreen: native
9+
10+
image0.jpg
11+
image1.jpg
12+
image2.jpg
13+
image3.jpg
14+
```
15+
16+
# Gallery centered
17+
18+
If you want to get your fotorama images centered on the web page you
19+
can add this code to your `custom.css`:
20+
21+
```
22+
.fotorama__wrap {
23+
margin: 0 auto;
24+
}
25+
```

‎v7/fotorama_directive/conf.py.sample

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Default options for fotorama_directive plugin
2+
# To see all the options go to: http://fotorama.io
3+
FOTORAMA_OPTIONS = {
4+
'nav': 'thumbs',
5+
'ratio': '16/9',
6+
'keyboard': 'true',
7+
'thumbwidth': 256,
8+
'thumbheight': 256,
9+
'allowfullscreen': 'native'
10+
}

‎v7/fotorama_directive/files/assets/css/fotorama.css

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Loading

‎v7/fotorama_directive/files/assets/js/fotorama.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[Core]
2+
Name = fotorama_directive
3+
Module = fotorama_directive
4+
5+
[Nikola]
6+
MinVersion = 7.4.0
7+
8+
[Documentation]
9+
Author = Manuel Kaufmann
10+
Version = 0.1
11+
Website = http://plugins.getnikola.com/#fotorama_directive
12+
Description = Fotorama directive to display a gallery using http://fotorama.io jQuery plugin
+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# -*- coding: utf-8 -*-
2+
3+
# Copyright © 2015 Manuel Kaufmann
4+
5+
# Permission is hereby granted, free of charge, to any
6+
# person obtaining a copy of this software and associated
7+
# documentation files (the "Software"), to deal in the
8+
# Software without restriction, including without limitation
9+
# the rights to use, copy, modify, merge, publish,
10+
# distribute, sublicense, and/or sell copies of the
11+
# Software, and to permit persons to whom the Software is
12+
# furnished to do so, subject to the following conditions:
13+
#
14+
# The above copyright notice and this permission notice
15+
# shall be included in all copies or substantial portions of
16+
# the Software.
17+
#
18+
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
19+
# KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
20+
# WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
21+
# PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
22+
# OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
23+
# OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
24+
# OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
25+
# SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
26+
27+
from __future__ import unicode_literals
28+
29+
import os
30+
31+
from docutils import nodes
32+
from docutils.parsers.rst import Directive, directives
33+
34+
from nikola.plugin_categories import RestExtension
35+
36+
from nikola.plugin_categories import LateTask
37+
from nikola.utils import copy_tree
38+
39+
40+
class Plugin(RestExtension, LateTask):
41+
42+
name = "fotorama_directive"
43+
44+
def set_site(self, site):
45+
self.site = site
46+
site.template_hooks['extra_head'].append('<link href="/assets/css/fotorama.css" rel="stylesheet" type="text/css">')
47+
site.template_hooks['body_end'].append('<script src="/assets/js/fotorama.js"></script>')
48+
Fotorama.site = site
49+
return super(Plugin, self).set_site(site)
50+
51+
def gen_tasks(self):
52+
kw = {
53+
"output_folder": self.site.config['OUTPUT_FOLDER'],
54+
}
55+
56+
# Copy all the assets to the right places
57+
asset_folder = os.path.join(os.path.dirname(__file__), "files")
58+
for task in copy_tree(asset_folder, kw["output_folder"]):
59+
task["basename"] = str(self.name)
60+
yield task
61+
62+
63+
class Fotorama(Directive):
64+
""" Restructured text extension for inserting fotorama galleries."""
65+
66+
# http://fotorama.io/customize/options/
67+
option_spec = {
68+
'width': directives.unchanged,
69+
'minwidth': directives.unchanged,
70+
'maxwidth': directives.unchanged,
71+
'height': directives.unchanged,
72+
'minheight': directives.unchanged,
73+
'maxheight': directives.unchanged,
74+
'ratio': directives.unchanged,
75+
'margin': directives.nonnegative_int,
76+
'glimpse': directives.unchanged,
77+
'nav': lambda arg: directives.choice(arg, ('dots', 'thumbs', 'false')),
78+
'navposition': lambda arg: directives.choice(arg, ('bottom', 'top')),
79+
'navwidth': directives.unchanged,
80+
'thumbwidth': directives.nonnegative_int,
81+
'thumbheight': directives.nonnegative_int,
82+
'thumbmargin': directives.nonnegative_int,
83+
'thumbborderwidth': directives.nonnegative_int,
84+
'allowfullscreen': lambda arg: directives.choice(arg, ('false', 'true', 'native')),
85+
'fit': lambda arg: directives.choice(arg, ('contain', 'cover', 'scaledown', 'none')),
86+
'thumbfit': directives.unchanged,
87+
'transition': lambda arg: directives.choice(arg, ('slide', 'crossfade', 'disolve')),
88+
'clicktransition': directives.unchanged,
89+
'transitionduration': directives.nonnegative_int,
90+
'captions': directives.flag,
91+
'hash': directives.flag,
92+
'startindex': directives.unchanged,
93+
'loop': directives.flag,
94+
'autoplay': directives.unchanged,
95+
'stopautoplayontouch': directives.unchanged,
96+
'keyboard': directives.unchanged,
97+
'arrows': lambda arg: directives.choice(arg, ('true', 'false', 'always')),
98+
'click': directives.flag,
99+
'swipe': directives.flag,
100+
'trackpad': directives.flag,
101+
'shuffle': directives.flag,
102+
'direction': lambda arg: directives.choice(arg, ('ltr', 'rtl')),
103+
'spinner': directives.unchanged,
104+
'shadows': directives.flag,
105+
}
106+
has_content = True
107+
108+
def __init__(self, *args, **kwargs):
109+
super(Fotorama, self).__init__(*args, **kwargs)
110+
# self.state.document.record_depenence(self.site.)
111+
# from doit.tools import set_trace; set_trace()
112+
self.state.document.settings.record_dependencies.add(self.site.configuration_filename)
113+
114+
def _sanitize_options(self):
115+
THUMBNAIL_SIZE = self.site.config.get('THUMBNAIL_SIZE', 128)
116+
defaults = {
117+
'nav': 'thumbs',
118+
'ratio': '16/9',
119+
'keyboard': 'true',
120+
'thumbwidth': THUMBNAIL_SIZE,
121+
'thumbheight': THUMBNAIL_SIZE,
122+
'allowfullscreen': 'native'
123+
}
124+
user_defaults = self.site.config.get('FOTORAMA_OPTIONS', {})
125+
# from doit.tools import set_trace
126+
# set_trace()
127+
defaults.update(user_defaults)
128+
129+
# TODO: validate options here and (maybe) display an error
130+
defaults.update(self.options)
131+
for option in defaults.keys():
132+
assert option in self.option_spec
133+
134+
return defaults
135+
136+
def run(self):
137+
if len(self.content) == 0:
138+
return
139+
140+
image_list = [t for t in self.content]
141+
thumbs = ['.thumbnail'.join(os.path.splitext(p)) for p in image_list]
142+
143+
photo_array = []
144+
for img, thumb in zip(image_list, thumbs):
145+
photo_array.append({
146+
'url': img,
147+
'url_thumb': thumb,
148+
})
149+
150+
output = self.site.template_system.render_template(
151+
'embedded-fotorama.tmpl',
152+
None,
153+
{
154+
'fotorama_content': photo_array,
155+
'options': self._sanitize_options()
156+
}
157+
)
158+
return [nodes.raw('', output, format='html')]
159+
160+
161+
directives.register_directive('fotorama', Fotorama)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## -*- coding: utf-8 -*-
2+
3+
<div class="fotorama"
4+
% for key, value in options.items():
5+
data-${key}="${value}"
6+
% endfor
7+
>
8+
% for image in fotorama_content:
9+
<a href="${image['url']}"><img src="${image['url_thumb']}"></a>
10+
% endfor
11+
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.