Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Rest 'gallery' directive to include a gallery
- Loading branch information
Showing
6 changed files
with
460 additions
and
0 deletions.
There are no files selected for viewing
180 changes: 180 additions & 0 deletions
180
nikola/data/themes/bootstrap3/assets/css/photoswipe.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; } |
4 changes: 4 additions & 0 deletions
4
nikola/data/themes/bootstrap3/assets/js/photoswipe-ui-default.min.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
169 changes: 169 additions & 0 deletions
169
nikola/data/themes/bootstrap3/templates/embedded-gallery.tmpl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> ${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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
[Core] | ||
Name = rest_gallery | ||
Module = gallery | ||
|
||
[Documentation] | ||
Author = Manuel Kaufmann | ||
Version = 0.1 | ||
Website = http://getnikola.com | ||
Description = Gallery directive | ||
|
Oops, something went wrong.