Browse Source

implement a first version of video support for photoswipe theme.

CSS position is not perfect. It can be improved.

Implementation is based upon this comment : https://github.com/dimsemenov/PhotoSwipe/issues/651#issuecomment-223193536
pull/216/head
François D 10 years ago
parent
commit
64c367abf7
  1. 5
      docs/themes.rst
  2. 4
      sigal/themes/photoswipe/static/styles.css
  3. 2
      sigal/themes/photoswipe/static/styles.min.css
  4. 29
      sigal/themes/photoswipe/templates/index.html

5
docs/themes.rst

@ -26,10 +26,7 @@ Sigal comes with three themes, located in the ``sigal/themes`` folder:
**photoswipe**:
`source <http://photoswipe.com/>`_, `demo
<http://saimon.org/sigal-demo/photoswipe/>`_. The photoswipe
theme comes with some limitations : It does not support video (see
https://github.com/dimsemenov/PhotoSwipe/issues/651 for details). Video
support will be added when available.
<http://saimon.org/sigal-demo/photoswipe/>`_.
For developers, a Makefile is available to concatenate and minify the css
files, using `cssmin <https://pypi.python.org/pypi/cssmin>`_ (``pip install

4
sigal/themes/photoswipe/static/styles.css

@ -141,12 +141,14 @@ figcaption {
height: 0;
overflow: hidden;
}
.video__container iframe {
.video__container iframe,
.video__container video {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
padding: 2% 0 15% 0;
}
.video-desc {
width: 100%;

2
sigal/themes/photoswipe/static/styles.min.css vendored

File diff suppressed because one or more lines are too long

29
sigal/themes/photoswipe/templates/index.html

@ -81,6 +81,14 @@
</figure>
{% endif %}
{% endif %}
{% if media.type == "video" %}
<figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="{{ media.filename }}" itemprop="contentUrl" data-type="video" data-video='<div class="video"><div class="video__container"><video controls><source src="{{ media.filename }}" type="{{ media.mime }}" /></video></div></div>'>
<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.thumbnail }}" itemprop="thumbnail" title="" />
</a>
<figcaption itemprop="caption description">{{ media_title }}</figcaption>
</figure>
{% endif %}
{% endfor %}
</div>
{% endif %}
@ -198,16 +206,19 @@
linkEl = figureEl.children[0]; // <a> element
size = linkEl.getAttribute('data-size').split('x');
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
if (linkEl.getAttribute('data-type') == 'video') {
item = {
html: linkEl.getAttribute('data-video')
};
} else {
size = linkEl.getAttribute('data-size').split('x');
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
}
if(figureEl.children.length > 1) {
// <figcaption> content

Loading…
Cancel
Save