added images gallery

cao_blogr/routes.py

@@ -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')

cao_blogr/static/js/jquery-tjgallery.js

@@ -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);

cao_blogr/static/js/jquery-tjgallery.min.js

@@ -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);

cao_blogr/static/theme.css

@@ -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;
+}
+

cao_blogr/templates/apropos.jinja2

@@ -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 %}

cao_blogr/templates/image_edit.jinja2

@@ -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 %}

cao_blogr/templates/images.jinja2

@@ -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 %}

cao_blogr/templates/settings.jinja2

@@ -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">

cao_blogr/views/default.py

@@ -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,
+        }
+

development.ini

@@ -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

production.ini

@@ -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