added images gallery
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
def includeme(config):
|
||||
config.add_static_view('static', 'static', cache_max_age=3600)
|
||||
config.add_route('home', '/')
|
||||
config.add_route('apropos', '/apropos')
|
||||
config.add_route('blog', '/blog/{id:\d+}/{slug}')
|
||||
config.add_route('blog_copy', '/blog_copy/{topic}/{id}')
|
||||
config.add_route('blog_edit', '/blog_edit/{topic}/{id}')
|
||||
config.add_route('blog_search', '/blog_search')
|
||||
config.add_route('images', '/images')
|
||||
config.add_route('image_edit', '/image_edit/{name}')
|
||||
config.add_route('login', '/login')
|
||||
config.add_route('logout', '/logout')
|
||||
config.add_route('settings', '/settings')
|
||||
|
||||
186
cao_blogr/static/js/jquery-tjgallery.js
vendored
Normal file
186
cao_blogr/static/js/jquery-tjgallery.js
vendored
Normal file
@@ -0,0 +1,186 @@
|
||||
/*!
|
||||
* tjGallery 1.1
|
||||
* http://tj-s.ru
|
||||
*
|
||||
* description JQuery Plugin create responsive gallery grid
|
||||
* Options: {
|
||||
* selector :'img', // jquery selector for ersizing and positions element
|
||||
* row_min_height : 180, // minimal height of grid row
|
||||
* margin : 5 // border betwin elements
|
||||
* }
|
||||
*
|
||||
* @copyright Tod, tod@tj-s.ru
|
||||
* @license MIT License
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
var methods = {
|
||||
init : function(options) {
|
||||
var $settings = $.extend({
|
||||
selector :'img',
|
||||
row_min_height : 180,
|
||||
margin : 5
|
||||
}, options);
|
||||
|
||||
|
||||
return this.each(function() {
|
||||
var $this = $(this),
|
||||
data = $this.data('tjGallery');
|
||||
|
||||
if ( ! data ) {
|
||||
$this.data('tjGallery', {
|
||||
target : $this,
|
||||
tjGallery : $settings,
|
||||
});
|
||||
}
|
||||
$(window).bind('resize.tjGallery', responding);
|
||||
|
||||
return build($this);
|
||||
|
||||
|
||||
function responding(){
|
||||
methods.clear.apply($this);
|
||||
build($this);
|
||||
}
|
||||
|
||||
function build(items){
|
||||
return items.each(function() {
|
||||
var $container = $(this);
|
||||
var max_bucket_width = $container.width();
|
||||
var buckets = [],
|
||||
last_bucket = {
|
||||
items: [],
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
$container.find($settings.selector).each(function() {
|
||||
var $this = $(this);
|
||||
var $pic = $this;
|
||||
|
||||
|
||||
if ($pic[0].nodeName.toUpperCase() != 'IMG') {
|
||||
$pic = $pic.find('img');
|
||||
$this = $('<div class="tjGalleryItem">').insertBefore($this).append($this);
|
||||
} else {
|
||||
$this = $('<div class="tjGalleryItem">').insertBefore($pic).append($pic);
|
||||
}
|
||||
if (!$pic.length) return;
|
||||
|
||||
$this.css({width: 'auto', float: 'left', position: 'relative'});
|
||||
|
||||
var item = {
|
||||
pic: $pic,
|
||||
container: $this,
|
||||
original_height: $pic.attr('height') || $pic.height(),
|
||||
original_width: $pic.attr('width') || $pic.width()
|
||||
};
|
||||
item.aspect = item.original_width / item.original_height;
|
||||
item.scale = $settings.row_min_height / item.original_height;
|
||||
item.width = item.original_width * item.scale;
|
||||
item.height = item.original_height * item.scale;
|
||||
|
||||
var new_bucket_width = getWidthForBucket(last_bucket.items, item);
|
||||
if (new_bucket_width > max_bucket_width) {
|
||||
buckets.push(last_bucket);
|
||||
last_bucket = {
|
||||
items: [],
|
||||
width: 0,
|
||||
height: 0
|
||||
};
|
||||
}
|
||||
last_bucket.items.push(item);
|
||||
});
|
||||
|
||||
if (last_bucket.items.length == 1 && buckets[buckets.length-1].items.length > 1){
|
||||
buckets[buckets.length-1].items.push(last_bucket.items[0]);
|
||||
}else{
|
||||
buckets.push(last_bucket);
|
||||
last_bucket.last = true;
|
||||
}
|
||||
|
||||
$.each(buckets, function(idx, bucket) {
|
||||
bucket.scale = (max_bucket_width - (bucket.items.length - 1) * $settings.margin) / getWidthForBucket(bucket.items);
|
||||
var $last_item;
|
||||
|
||||
var n = 0;
|
||||
$.each(bucket.items, function(idx2, item) {
|
||||
if (bucket.scale) {
|
||||
item.width = Math.floor(item.width * bucket.scale);
|
||||
item.height = Math.floor(item.height * bucket.scale);
|
||||
}
|
||||
item.index = n;
|
||||
var pic = item.pic,
|
||||
container = item.container;
|
||||
$last_item = item;
|
||||
n++;
|
||||
|
||||
pic.css({
|
||||
height: parseInt(item.height)+"px",
|
||||
width: parseInt(item.width)+"px"
|
||||
});
|
||||
item.container.css({
|
||||
height: parseInt(item.height)+"px",
|
||||
width: parseInt(item.width)+"px",
|
||||
marginTop: $settings.margin + 'px'
|
||||
});
|
||||
if (idx2 > 0) {
|
||||
item.container.css({
|
||||
marginLeft: $settings.margin + 'px'
|
||||
});
|
||||
} else {
|
||||
item.container.css({
|
||||
clear: 'left'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
function getWidthForBucket(bucket, extra){
|
||||
var width = 0;
|
||||
if (bucket.length) {
|
||||
$.each(bucket, function(idx, item) {
|
||||
width += item.width;
|
||||
});
|
||||
}
|
||||
if (extra) {
|
||||
width += extra.width;
|
||||
}
|
||||
return width;
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
clear: function(){
|
||||
conteiner = this;
|
||||
data = conteiner.data('tjGallery');
|
||||
conteiner.each(function() {
|
||||
$(this).find(data.tjGallery.selector).each(function() {
|
||||
if (!$(this).is('img'))
|
||||
$(this).find('img').css({'width': 'auto', 'height': 'auto'});
|
||||
$(this).removeAttr('style');
|
||||
$(this).appendTo(conteiner);
|
||||
})
|
||||
$(this).find('div:empty').remove();
|
||||
})
|
||||
},
|
||||
destroy : function() {
|
||||
methods.clear.apply(this);
|
||||
$(window).unbind('.tjGallery');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.fn.tjGallery = function( method ) {
|
||||
if ( methods[method] ) {
|
||||
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
var that = this;
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist for jQuery.tjGallery' );
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
7
cao_blogr/static/js/jquery-tjgallery.min.js
vendored
Normal file
7
cao_blogr/static/js/jquery-tjgallery.min.js
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* tjGallery 1.1
|
||||
* http://tj-s.ru
|
||||
* @copyright Tod, tod@tj-s.ru
|
||||
* @license MIT License
|
||||
*/
|
||||
!function(o){var e={init:function(t){var l=o.extend({selector:"img",row_min_height:180,margin:5},t);return this.each(function(){var t=o(this);return t.data("tjGallery")||t.data("tjGallery",{target:t,tjGallery:l}),o(window).bind("resize.tjGallery",function(){e.clear.apply(t),i(t)}),i(t);function i(t){return t.each(function(){var t=o(this),r=t.width(),a=[],h={items:[],width:0,height:0};t.find(l.selector).each(function(){var t=o(this),i=t;if(t="IMG"!=i[0].nodeName.toUpperCase()?(i=i.find("img"),o('<div class="tjGalleryItem">').insertBefore(t).append(t)):o('<div class="tjGalleryItem">').insertBefore(i).append(i),i.length){t.css({width:"auto",float:"left",position:"relative"});var e={pic:i,container:t,original_height:i.attr("height")||i.height(),original_width:i.attr("width")||i.width()};e.aspect=e.original_width/e.original_height,e.scale=l.row_min_height/e.original_height,e.width=e.original_width*e.scale,e.height=e.original_height*e.scale;var n=s(h.items,e);r<n&&(a.push(h),h={items:[],width:0,height:0}),h.items.push(e)}}),1==h.items.length&&1<a[a.length-1].items.length?a[a.length-1].items.push(h.items[0]):(a.push(h),h.last=!0),o.each(a,function(t,n){n.scale=(r-(n.items.length-1)*l.margin)/s(n.items);var a=0;o.each(n.items,function(t,i){n.scale&&(i.width=Math.floor(i.width*n.scale),i.height=Math.floor(i.height*n.scale)),i.index=a;var e=i.pic;i.container;a++,e.css({height:parseInt(i.height)+"px",width:parseInt(i.width)+"px"}),i.container.css({height:parseInt(i.height)+"px",width:parseInt(i.width)+"px",marginTop:l.margin+"px"}),0<t?i.container.css({marginLeft:l.margin+"px"}):i.container.css({clear:"left"})})})})}function s(t,i){var e=0;return t.length&&o.each(t,function(t,i){e+=i.width}),i&&(e+=i.width),e}})},clear:function(){conteiner=this,data=conteiner.data("tjGallery"),conteiner.each(function(){o(this).find(data.tjGallery.selector).each(function(){o(this).is("img")||o(this).find("img").css({width:"auto",height:"auto"}),o(this).removeAttr("style"),o(this).appendTo(conteiner)}),o(this).find("div:empty").remove()})},destroy:function(){e.clear.apply(this),o(window).unbind(".tjGallery")}};o.fn.tjGallery=function(t){if(e[t])return e[t].apply(this,Array.prototype.slice.call(arguments,1));if("object"==typeof t||!t){return e.init.apply(this,arguments)}o.error("Method "+t+" does not exist for jQuery.tjGallery")}}(jQuery);
|
||||
@@ -179,4 +179,49 @@ textarea {
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #df4937;
|
||||
}
|
||||
}
|
||||
|
||||
/* TJ Gallery */
|
||||
.pictures{
|
||||
font-size: 0px;
|
||||
}
|
||||
.pictures .item{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
}
|
||||
.pictures .item img{
|
||||
position:relative;
|
||||
z-index: 11;
|
||||
}
|
||||
.pictures .item .item_description{
|
||||
position:absolute;
|
||||
z-index: 10;
|
||||
left: -15px;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
bottom: -60px;
|
||||
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
|
||||
|
||||
background:#962d21;
|
||||
padding: 15px;
|
||||
|
||||
display:none;
|
||||
}
|
||||
.pictures .item .item_description span{
|
||||
color:#ffffff;
|
||||
font-size: 13px;
|
||||
display:block;
|
||||
position:absolute;
|
||||
bottom: 15px;
|
||||
height: 30px;
|
||||
}
|
||||
.pictures .item:hover{
|
||||
z-index: 100;
|
||||
}
|
||||
.pictures .tjGalleryItem .item:hover .item_description{
|
||||
display:block;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
{% extends "layout.jinja2" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-default text-center">
|
||||
<div class="panel-body">
|
||||
<blockquote>
|
||||
L'argent qu'on possède est l'instrument de la liberté; celui qu'on pourchasse est celui de la servitude.
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<h4>Rousseau</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div class="panel panel-default text-center">
|
||||
<div class="panel-body">
|
||||
<blockquote>
|
||||
L'intelligence ce n'est pas ce que l'on sait mais ce que l'on fait quand on ne sait pas.
|
||||
<br />
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<h4>Jean Piaget</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
25
cao_blogr/templates/image_edit.jinja2
Normal file
25
cao_blogr/templates/image_edit.jinja2
Normal file
@@ -0,0 +1,25 @@
|
||||
{% extends "cao_blogr:templates/layout.jinja2" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<form action="{{request.route_url('image_edit', name=name)}}" method="post" class="form">
|
||||
|
||||
{% for error in form.name.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="required-field" for="name">{{form.name.label}}</label>
|
||||
{{form.name(class_='form-control')}}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<a class="btn btn-default" href="{{ request.route_url('users') }}"><span class="glyphicon glyphicon-chevron-left"></span> Retour</a>
|
||||
<button class="btn btn-primary" type="submit" name="form.submitted">
|
||||
<span class="glyphicon glyphicon-ok"></span> Enregistrer</button>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
{% endblock %}
|
||||
28
cao_blogr/templates/images.jinja2
Normal file
28
cao_blogr/templates/images.jinja2
Normal file
@@ -0,0 +1,28 @@
|
||||
{% extends "layout.jinja2" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<br />
|
||||
<div class="pictures">
|
||||
{% for item in images_list %}
|
||||
<div class="item">
|
||||
<div class="item_description"><span>{{ item[1] }}</span></div>
|
||||
<img src="{{ item[0] }}" alt="" /></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script src="{{ request.static_url('cao_blogr:static/js/jquery-tjgallery.min.js')}}"></script>
|
||||
<script>
|
||||
// waiting for loading page
|
||||
$(window).on('load', function(){
|
||||
$('.pictures').tjGallery({
|
||||
selector: '.item',
|
||||
margin: 10
|
||||
});
|
||||
$('.pictures').tjGallery({
|
||||
row_min_height: 180
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -15,6 +15,11 @@
|
||||
<h4>TOPICS / TAGS</h4>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<a href=" {{request.route_url('images')}} "><span class="glyphicon glyphicon-picture icone-big"></span>
|
||||
<h4>IMAGES</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -12,6 +12,7 @@ from ..services.blog_record import BlogRecordService
|
||||
from ..forms import UserCreateForm, TopicForm, TagForm
|
||||
from ..models.user import User
|
||||
from ..models.blog_record import Topics, Tags
|
||||
import os
|
||||
|
||||
|
||||
@view_config(route_name='home',
|
||||
@@ -97,15 +98,6 @@ def settings(request):
|
||||
}
|
||||
|
||||
|
||||
@view_config(route_name='apropos',
|
||||
renderer='cao_blogr:templates/apropos.jinja2')
|
||||
def apropos(request):
|
||||
|
||||
return {
|
||||
'page_title': "A propos",
|
||||
}
|
||||
|
||||
|
||||
@view_config(route_name='login',
|
||||
renderer='cao_blogr:templates/login.jinja2')
|
||||
@forbidden_view_config(renderer='cao_blogr:templates/login.jinja2')
|
||||
@@ -298,3 +290,23 @@ def tag_edit(request):
|
||||
'form': form,
|
||||
'topic': topic,
|
||||
}
|
||||
|
||||
|
||||
@view_config(route_name='images',
|
||||
renderer='cao_blogr:templates/images.jinja2')
|
||||
def images(request):
|
||||
|
||||
folder_path = request.registry.settings['images_dir']
|
||||
|
||||
images_list = []
|
||||
for f in os.scandir(folder_path):
|
||||
image = []
|
||||
image.append(request.static_url('cao_blogr:static/img/') + f.name)
|
||||
image.append(f.name)
|
||||
images_list.append(image)
|
||||
|
||||
return {
|
||||
'page_title': "Images",
|
||||
'images_list': images_list,
|
||||
}
|
||||
|
||||
|
||||
@@ -15,6 +15,8 @@ pyramid.includes =
|
||||
pyramid_debugtoolbar
|
||||
|
||||
sqlalchemy.url = sqlite:///%(here)s/cao_blogr.sqlite
|
||||
# images location
|
||||
images_dir = /pyramid10/cao_sunyata/cao_blogr/static/img
|
||||
|
||||
cao_blogr.admin_email = cao.thien-phuoc@orange.fr
|
||||
# Mailer configuration
|
||||
|
||||
@@ -13,6 +13,8 @@ pyramid.debug_routematch = false
|
||||
pyramid.default_locale_name = en
|
||||
|
||||
sqlalchemy.url = sqlite:///%(here)s/cao_blogr.sqlite
|
||||
# images location
|
||||
images_dir = /pyramid10/cao_sunyata/cao_blogr/static/img
|
||||
|
||||
cao_blogr.admin_email = phuoc@caotek.fr
|
||||
# Mailer configuration
|
||||
|
||||
Reference in New Issue
Block a user