Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Rest 'gallery' directive to include a gallery
  • Loading branch information
humitos committed Jun 5, 2015
1 parent 3469045 commit 3b29c56
Show file tree
Hide file tree
Showing 6 changed files with 460 additions and 0 deletions.
180 changes: 180 additions & 0 deletions nikola/data/themes/bootstrap3/assets/css/photoswipe.css
@@ -0,0 +1,180 @@
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 1500;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility: hidden;
outline: none; }
.pswp * {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.pswp img {
max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity: 0.001;
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open {
display: block; }

.pswp--zoom-allowed .pswp__img {
/* autoprefixer: off */
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }

.pswp--zoomed-in .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab; }

.pswp--dragging .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing; }

/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
-webkit-backface-visibility: hidden;
will-change: opacity; }

.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden; }

.pswp__container,
.pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }

.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
/* for open/close transition */
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg {
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
transition: none; }

.pswp__container,
.pswp__zoom-wrap {
-webkit-backface-visibility: hidden;
will-change: transform; }

.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden; }

.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0;
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s; }

/*
stretched thumbnail or div placeholder element (see below)
style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
-webkit-backface-visibility: hidden; }

/*
div element that matches size of large image
large image loads on top of it
*/
.pswp__img--placeholder--blank {
background: #222; }

.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0; }

/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC; }

.pswp__error-msg a {
color: #CCC;
text-decoration: underline; }

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions nikola/data/themes/bootstrap3/assets/js/photoswipe.min.js

Large diffs are not rendered by default.

169 changes: 169 additions & 0 deletions nikola/data/themes/bootstrap3/templates/embedded-gallery.tmpl
@@ -0,0 +1,169 @@
## -*- coding: utf-8 -*-
<!-- Core CSS file -->
<link rel="stylesheet" href="/assets/css/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
In the folder of skin CSS file there are also:
- .png and .svg icons sprite,
- preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="/assets/css/default-skin.css">

<!-- Core JS file -->
<script src="/assets/js/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="/assets/js/photoswipe-ui-default.min.js"></script>

<%block name="content">
<div id="${carousel_id}" class="carousel slide">
<ol class="carousel-indicators">
% for i in range(len(slides_content)):
% if i == 0:
<li data-target="#${carousel_id}" data-slide-to="${i}" class="active"></li>
% else:
<li data-target="#${carousel_id}" data-slide-to="${i}"></li>
% endif
% endfor
</ol>
<div class="carousel-inner">
% for i, image in enumerate(slides_content):
% if i == 0:
<div class="item active"><img src="${image}" alt="" style="margin: 0 auto 0 auto;"></div>
% else:
<div class="item"><img src="${image}" alt="" style="margin: 0 auto 0 auto;"></div>
% endif
% endfor
</div>
<a class="left carousel-control" href="#${carousel_id}" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#${carousel_id}" data-slide="next"><span class="icon-next"></span></a>
</div>
</%block>





<%inherit file="base.tmpl"/>
<%namespace name="comments" file="comments_helper.tmpl"/>
<%namespace name="ui" file="crumbs.tmpl" import="bar"/>
<%block name="sourcelink"></%block>

<%block name="content">
${ui.bar(crumbs)}
%if title:
<h1>${title|h}</h1>
%endif
%if post:
<p>
${post.text()}
</p>
%endif
%if folders:
% if galleries_use_thumbnail:
% for folder, ftitle, fpost in folders:
% if loop.index % galleries_columns == 0:
<div class="row">
% endif
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="${folder}">
% if fpost and getattr(fpost, 'previewimage', None):
<img src="${folder}${fpost.previewimage}" alt="${ftitle}">
% elif galleries_default_thumbnail:
<img src="${galleries_default_thumbnail}" alt="${ftitle}">
% else:
<div style="height: 250px; background-color: #eee;"></div>
% endif
</a>
<div class="caption">
<h3>${ftitle}</h3>
% if fpost and fpost.description():
<p>${fpost.description()}</p>
% endif
</div>
</div>
</div>
% if loop.index % galleries_columns == (galleries_columns - 1):
</div>
% endif
% endfor

% else:
<ul>
% for folder, ftitle in folders:
<li><a href="${folder}"><i class="glyphicon glyphicon-folder-open"></i>&nbsp;${ftitle}</a></li>
% endfor
</ul>
% endif
%endif

<div id="gallery_container"></div>
%if photo_array:
<noscript>
<ul class="thumbnails">
%for image in photo_array:
<li><a href="${image['url']}" class="thumbnail image-reference" title="${image['title']}">
<img src="${image['url_thumb']}" alt="${image['title']}" /></a>
%endfor
</ul>
</noscript>
%endif
%if site_has_comments and enable_comments:
${comments.comment_form(None, permalink, title)}
%endif
</%block>

<%block name="extra_head">
${parent.extra_head()}
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<style type="text/css">
.image-block {
display: inline-block;
}
.flowr_row {
width: 100%;
}
</style>
</%block>


<%block name="extra_js">
<script src="/assets/js/flowr.plugin.js"></script>
<script>
jsonContent = ${photo_array_json};
$("#gallery_container").flowr({
data : jsonContent,
height : ${thumbnail_size}*.6,
padding: 5,
rows: -1,
render : function(params) {
// Just return a div, string or a dom object, anything works fine
img = $("<img />").attr({
'src': params.itemData.url_thumb,
'width' : params.width,
'height' : params.height
}).css('max-width', '100%');
link = $( "<a></a>").attr({
'href': params.itemData.url,
'class': 'image-reference'
});
div = $("<div />").addClass('image-block').attr({
'title': params.itemData.title,
'data-toggle': "tooltip",
});
link.append(img);
div.append(link);
div.hover(div.tooltip());
return div;
},
itemWidth : function(data) { return data.size.w; },
itemHeight : function(data) { return data.size.h; },
complete : function(params) {
if( jsonContent.length > params.renderedItems ) {
nextRenderList = jsonContent.slice( params.renderedItems );
}
}
});
$("a.image-reference").colorbox({rel:"gal", maxWidth:"100%",maxHeight:"100%",scalePhotos:true});
</script>
</%block>
10 changes: 10 additions & 0 deletions nikola/plugins/compile/rest/gallery.plugin
@@ -0,0 +1,10 @@
[Core]
Name = rest_gallery
Module = gallery

[Documentation]
Author = Manuel Kaufmann
Version = 0.1
Website = http://getnikola.com
Description = Gallery directive

0 comments on commit 3b29c56

Please sign in to comment.