Add a banner build with random item (but not centered yet)

cards/templatetags/image_tags.py

@@ -116,6 +116,9 @@ def crop(card_item):
     """
     return scale(card_item, 'crop')
 
+def tiny(card_item):
+	return scale(card_item, 'tiny')
 
 register.filter('scale', scale)
 register.filter('crop', crop)
+register.filter('tiny', tiny)

cards/templatetags/inclusion_tags.py

@@ -1,6 +1,6 @@
 from django import template
 from django.conf import settings
-from cards.models import Country, Category
+from cards.models import Country, Category, Card
 
 register = template.Library()
 
@@ -10,6 +10,10 @@ def nav_menu():
 	
 def cards_list_partial(cardslist):
 	return { 'cards_list': cardslist }
+	
+def random_pics():
+	return { 'random_pics': Card.objects.order_by('?')[:15] }
 
 register.inclusion_tag('nav_menu.html')(nav_menu)
 register.inclusion_tag('cards_list.html')(cards_list_partial)
+register.inclusion_tag('random_pics.html')(random_pics)

cards/views.py

@@ -17,7 +17,7 @@ def index(request):
 	
 	nbr_of_cards = Card.objects.count()
 	
-	tags_list = Tag.objects.order_by('?').annotate(occurences=Count('tags'))[:15]
+	tags_list = Tag.objects.order_by('?').annotate(occurences=Count('tags'))[:25]
 	
 	cards_list = Card.objects.order_by('-created_at')[:25]
 	

templates/base.html

@@ -14,8 +14,8 @@
 
 <div class="container">
 	<header>
-		<div>
-			<!--<a href="/"><img src="{{STATIC_URL}}img/header.png" alt="Ma collection de télécartes" /></a>-->
+		<div style="padding-bottom: 1em;">
+			{% random_pics %}<!--<a href="/"><img src="{{STATIC_URL}}img/header.png" alt="Ma collection de télécartes" /></a>-->
 		</div>
 		<div>
 			<ul class="nav nav-pills menu">

templates/cards/index.html

@@ -6,13 +6,29 @@
 {% block main_container %}
 
 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jqcloud.css" />
-<script type="text/javascript" src="{{ STATIC_URL }}js/jqcloud-1.0.2.js"></script>
+<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.tagcanvas.min.js"></script>
+
+<script type="text/javascript">
+      $(document).ready(function() {
+        if(!$('#myCanvas').tagcanvas({
+          textColour: '#0088CC',
+          outlineColour: '#0088CC',
+          reverse: true,
+          depth: 0.8,
+          wheelZoom: true,
+          maxSpeed: 0.02
+        },'tags')) {
+          // something went wrong, hide the canvas container
+          $('#myCanvasContainer').hide();
+        }
+      });
+    </script>
 
 <script type="text/javascript">
 	/*!
 	* Create an array of word objects, each representing a word in the cloud
 	*/
-	var word_array = [
+	/*var word_array = [
 		{% for tag in tags_list %}
 			{text: "{{ tag.label }}", weight: {{ tag.occurences }}, link: "{% url list-by-tag tag.id %}"},
 		{% endfor %}         
@@ -21,18 +37,29 @@
 	$(function() {
 		// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
 		$("#tagCloud").jQCloud(word_array);		
-	});	  
+	});*/	  
 </script>
 	
 <div class="container">
-
+<div class="well">
+Un petit texte d'introduction ici.
+</div>
+	<div id="myCanvasContainer">	
+      <canvas width="600" height="600" id="myCanvas">
+        <p>Anything in here will be replaced on browsers that support the canvas element</p>
+      </canvas>
+    </div>
+    <div id="tags">
+      <ul>
+      {% for tag in tags_list %}
+      	<li><a href="{% url list-by-tag tag.id %}">{{ tag.label }}</a>
+      {% endfor %}     
+      </ul>
+    </div>
 	<div class="row">
 		<div class="span4">
 			<img style="vertical-align: middle;" src="{{ STATIC_URL }}/img/header_pic.png" alt="" />
-		</div>
-		<div class="span8">
-			<div id="tagCloud" style="width: 550px; height: 350px;"></div>			
-		</div>
+		</div>		
 	</div>
 
 </div>

templates/random_pics.html

@@ -0,0 +1,10 @@
+{% load image_tags %}
+
+
+<div style="margin: auto; width: 85%:">
+{% for card in random_pics %}
+{% if card.image %}
+	<a href="{% url card-details card.id %}"><img src="{{card|tiny}}" alt="" /></a>
+{% endif %}
+{% endfor %}
+</div>