added topics to posts

2 files changed, 378 insertions, 7 deletions

diff --git a/templates/details/entry.html b/templates/details/entry.html
index 29570b5..3e15f83 100644
--- a/templates/details/entry.html
+++ b/templates/details/entry.html
@@ -4,6 +4,13 @@
 {% block pagetitle %}{{object.title|title|smartypants|safe}} ({% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, {{object.location.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.location.state.country.name}}{%endifequal%}) | Luxagraf, a travelogue{% endblock %}
 
 {% block metadescription %}Luxagraf: {{object.dek|striptags|safe}}{% endblock %}
+{%block extrahead%}
+     <link rel="canonical" href="http://luxagraf.net{{object.get_absolute_url}}" />
+     <meta name="ICBM" content="{{object.latitude}}, {{object.longitude}}" />
+     <meta name="geo.position" content="{{object.latitude}}; {{object.longitude}}" />
+     <meta name="geo.placename" content="{% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, {{object.location.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.location.state.country.name}}{%endifequal%}"> 
+     <meta name="geo.region" content="{% ifequal object.location.state.country.name "United States" %}{{object.location.state.country.iso2}}-{{object.location.state.iso2}}{%else%}{{object.location.state.country.iso2}}{% endifequal%}">
+{%endblock%}
 
 {%block bodyid%}class="writing-detail"{%endblock%}
 								
@@ -12,15 +19,18 @@
     <article>
             <section id="post">
                 <h1>{{object.title|smartypants|safe}}</h1>
-    
-                <span class="byline"><time datetime="{{object.pub_date}}">{{object.pub_date|date:"F j, Y"}}</time> &bull; <span class="location">{% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endifequal%}</span></span>
+                <aside class="meta">
+                    <div class="geo">{% ifequal object.location.state.country.name "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endifequal%} <span class="latitude hide">{{object.latitude}}</span> <span class="longitude hide">{{object.longitude}}</span></div>
+                    <span class="topics">Topics: {%for topic in object.topics.all%}<a href="{{topic.get_absolute_url}}" title="view more {{topic.name}} posts">{{topic.name}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</span>
+                </aside>
+                
                 
                 {{object.body_html|smartypants|widont|safe}}
             </section>
             <section id="post-metadata">
-                <h4>About {{object.title|title|smartypants|safe}}</h4>
-                <p><span>{{object.title|title|smartypants|safe}}</span> was posted {{ object.pub_date|timesince }} ago from <!--<a href="{{object.location.get_absolute_url}}" title="see other entries from {{object.location.name}}">-->{{object.location.name|smartypants|safe}}<!--</a>-->, which is in {%ifequal object.location.state.country.name 'United States'%}<a href="/maps/#{{object.location.state.slug}}" title="see other entries from {{object.location.state.name}}">{{object.location.state.name|smartypants|safe}}</a>,{%endifequal%} <a href="/writing/{{object.location.state.country.slug}}/1/" title="see other entries from {{object.location.state.country.name}}">{{object.location.state.country.name|smartypants|safe}}</a>. You can find nearby entries by browsing the <a href="/map/">Map</a>.
-                <p>If you enjoyed reading this, you can follow along on <a href="http://twitter.com/luxagraf" title="twitter" rel="me">Twitter</a> or by subscribing to the <a href="http://feeds.feedburner.com/luxagraf/blog" title="writing RSS 2.0 feed">RSS Feed</a>. For more about luxagraf, see the <a href="/about/" title="about luxagraf">about page</a>. To get in touch please use the <a href="/contact/" title="contact me">contact form</a> or leave a comment below.</p>
+                <h4>About {{object.title|smartypants|safe}}</h4>
+                <p>posted <time datetime="{{object.pub_date}}">{{object.pub_date|date:"F j, Y"}}</time>, from {{object.location.name|smartypants|safe}}, {%ifequal object.location.state.country.name 'United States'%}<a href="/maps/#{{object.location.state.slug}}" title="see other entries from {{object.location.state.name}}">{{object.location.state.name|smartypants|safe}}</a>{% else %}{{object.location.state.country.name}}{%endifequal%}.
+                <p>Follow along on <a href="http://twitter.com/luxagraf" title="twitter" rel="me">Twitter</a> or by subscribing to the <a href="http://feeds.feedburner.com/luxagraf/blog" title="writing RSS 2.0 feed">RSS Feed</a>. For more about me, see the <a href="/about/" title="about luxagraf">about page</a>. To get in touch please use the <a href="/contact/" title="contact me">contact form</a> or leave a comment below.</p>
             </section>
             <section id="page-navigation">
                 <nav>
@@ -35,8 +45,24 @@
                 </nav>
             </section>
             <section id="comments">
-                <h4>Comments on <span>{{object.title|title|smartypants|safe}}</span></h4>
+                <h4><a class="disqus-link-count" href="{{object.get_absolute_url}}#disqus_thread">Comments</a></h4>
                 <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/luxagraf/embed.js"></script><noscript><a href="http://luxagraf.disqus.com/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
             </section>
     </article>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+{% block js %}
+<script type="text/javascript">
+//<![CDATA[
+(function() {
+	var links = document.getElementsByTagName('a');
+	var query = '?';
+	for(var i = 0; i < links.length; i++) {
+	if(links[i].href.indexOf('#disqus_thread') >= 0) {
+		query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
+	}
+	}
+	document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/luxagraf/get_num_replies.js' + query + '"></' + 'script>');
+})();
+//]]>
+</script>
+{% endblock%}
\ No newline at end of file
diff --git a/templates/details/photo_galleries.html b/templates/details/photo_galleries.html
new file mode 100644
index 0000000..84dc219
--- /dev/null
+++ b/templates/details/photo_galleries.html
@@ -0,0 +1,345 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+    <title>Luxagraf | Photos | {{object.set_title}}</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta http-equiv="imagetoolbar" content="false">
+    <meta name="description" content="">
+    <meta name="keywords" content="">
+    
+    <style>
+    
+html {
+	/* Moz */
+	height: 100%;
+}
+.wrapper {
+    width: 960px;
+    margin: 0 auto;
+}
+/* BEGIN GALLERIA STYLE */
+.galleria{list-style:none;width:200px}
+.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 6px 10px 0;border: 3px #2a2a2a solid;}
+.galleria li a{display:none}
+.galleria li div{position:absolute;display:none;top:0;left:180px}
+.galleria li div img{cursor:pointer}
+.galleria li.active {border: 3px #b6b6b6 solid;}
+.galleria li.active div img,.galleria li.active div{display:block}
+.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
+.galleria li .caption{display:block;padding-top:.5em}
+* html .galleria li div span{width:400px} /* MSIE bug */
+
+*{margin:0;padding:0}
+body{padding:20px;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
+h1{font-family:Georgia,"Times New Roman",Times,Serif;text-transform:uppercase;font-size:15px;font-weight: normal}
+h2 a {font-family:Georgia,"Times New Roman",Times,Serif;font-size:12px;font-weight: normal; font-style:italic; color: #b6b6b6; text-decoration: none;}
+a:hover{color:#b53a04;}
+.caption{font-family:Georgia,"Times New Roman",Times,Serif;font-style:italic;color:#887;}
+.demo{position:relative;margin-top:2em;}
+/*.gallery_show{width:702px;margin:0 auto;}*/
+.gallery_show{height:90px;margin:0;}
+.gallery_show li{width:75px;height:75px;border:3px double #111;margin: 2px;background:#000;}
+.gallery_show li div{left:240px}
+.gallery_show li div .caption{font:italic 0.7em/1.4 georgia,serif;}
+
+#main_image{margin:0 auto 20px auto;height:640px;width:960px;}
+#main_image img{margin-bottom:1px;}
+
+.nav{padding-bottom:10px;text-align:center;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
+
+
+
+
+
+/* Menu
+---------------------------- */
+
+.clearit {
+	margin: 0;
+	padding: 0;
+	height: 0;
+	clear: both;
+}
+/* start jcarousel */
+/**
+ * This <div> element is wrapped by jCarousel around the list
+ * and has the classname "jcarousel-container".
+ */
+.jcarousel-container {
+    position: relative;
+}
+
+.jcarousel-clip {
+    z-index: 2;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.jcarousel-list {
+    z-index: 1;
+    overflow: hidden;
+    position: relative;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.jcarousel-item {
+    float: left;
+    list-style: none;
+    /* We set the width/height explicitly. No width/height causes infinite loops. */
+    width: 75px;
+    height: 75px;
+}
+
+/**
+ * The buttons are added dynamically by jCarousel before
+ * the <ul> list (inside the <div> described above) and
+ * have the classnames "jcarousel-next" and "jcarousel-prev".
+ */
+.jcarousel-next {
+    z-index: 3;
+    display: none;
+}
+
+.jcarousel-prev {
+    z-index: 3;
+    display: none;
+}
+
+/* end jcarousel */
+
+
+/* start tango jcarousel */
+.jcarousel-skin-tango.jcarousel-container {
+    -moz-border-radius: 5px;
+    margin: 0 auto;
+}
+
+.jcarousel-skin-tango.jcarousel-container-horizontal {
+    width: 960px;
+    padding: 10px 40px;
+}
+
+.jcarousel-skin-tango.jcarousel-container-vertical {
+    width: 75px;
+    height: 245px;
+    padding: 40px 20px;
+}
+
+.jcarousel-skin-tango .jcarousel-clip-horizontal {
+    width:  960px;
+    height: 75px;
+}
+
+.jcarousel-skin-tango .jcarousel-clip-vertical {
+    width:  75px;
+    height: 245px;
+}
+
+.jcarousel-skin-tango .jcarousel-item {
+    width: 65px;
+    height: 65px;
+    border: 3px #2a2a2a solid;
+}
+
+.jcarousel-skin-tango .jcarousel-item-horizontal {
+    margin-right: 8px;
+}
+
+.jcarousel-skin-tango .jcarousel-item-vertical {
+    margin-bottom: 10px;
+}
+
+.jcarousel-skin-tango .jcarousel-item-placeholder {
+    background: #000;
+    color: #fff;
+}
+
+/**
+ *  Horizontal Buttons
+ */
+.jcarousel-skin-tango .jcarousel-next-horizontal {
+    position: absolute;
+    top: 22px;
+    right: 10px;
+    width: 20px;
+    height: 53px;
+    cursor: pointer;
+    background: url({{media_url}}img/slideshow-arrow-right.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
+    background-position: -20px 0;
+}
+
+.jcarousel-skin-tango .jcarousel-prev-horizontal {
+    position: absolute;
+    top: 22px;
+    left: 10px;
+    width: 20px;
+    height: 53px;
+    cursor: pointer;
+    background: url({{media_url}}img/slideshow-arrow-left.png) no-repeat -20px 0;
+}
+
+.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
+    background-position: 0 0;
+}
+#controls {width: 60px; margin: 5px auto 0;}
+.play {
+    width: 57px;
+    height: 32px;
+    background: url({{media_url}}img/play.png) 0 0 no-repeat;
+}
+
+.play:hover { background: url({{media_url}}img/play.png) -57px 0 no-repeat; }
+
+.pause {
+    width: 57px;
+    height: 32px;
+    background: url({{media_url}}img/pause.png) 0 0 no-repeat;;
+}
+.pause:hover {
+    background: url({{media_url}}img/pause.png) -57px 0 no-repeat;
+}
+    </style>
+	<script type="text/javascript" src="http://media.luxagraf.net/js/jquery.js"></script>
+
+	<script type="text/javascript" src="http://media.luxagraf.net/js/combo.pack.js"></script>
+</head>
+<body>
+<h1>Luxagraf, photos from: {{object.set_title}}</h1>
+<h2><a href="/photos/1/">&laquo; Back to galleries</a></h2>
+<div id="controls">
+				<div id="toggle" class="pause"></div>
+	</div>
+
+<div id="wrapper">
+    <div id="main_image"></div>
+    <div id="images" style="height:90px; white-space:nowrap;">
+        <ul id="mycarousel" class="jcarousel-skin-tango">						
+            {%for photo in object.photos.all %}
+            <li><img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{%ifequal photo.description 'None' %}{%else%}{{photo.description|striptags}}{%endifequal%}"></li>
+            {% endfor %}
+        </ul>
+    </div>
+</div>
+	<script type="text/javascript">
+//<![CDATA[
+	$(document).ready(function(){
+		
+		$('.jcarousel-skin-tango').addClass('gallery_show'); // adds new class name to maintain degradability
+		
+		$('ul.gallery_show').galleria({
+			history   : true, // activates the history object for bookmarking, back-button etc.
+			clickNext : true, // helper for making the image clickable
+			insert    : '#main_image', // the containing selector for our main image
+			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
+				
+				// fade in the image & caption
+				image.css('display','none').fadeIn(200);
+				caption.css('display','none').fadeIn(200);
+				
+				// fetch the thumbnail container
+				var _li = thumb.parents('li');
+				
+				// fade out inactive thumbnail
+				_li.siblings().children('img.selected').fadeTo(100,0.6);
+				
+				// fade in active thumbnail
+				thumb.fadeTo('fast',1).addClass('selected');
+				
+				// add a title for the clickable image
+				image.attr('title','Next image >>');
+				
+				$('#main_image').trigger('img_change');
+
+			},
+			onThumb : function(thumb) { // thumbnail effects goes here
+				
+				// fetch the thumbnail container
+				var _li = thumb.parents('li');
+				
+				// if thumbnail is active, fade all the way.
+				var _fadeTo = _li.is('.active') ? '1' : '0.6';
+				
+				// fade in the thumbnail when finished loading
+				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(500);
+				
+				// hover effects
+				thumb.hover(
+					function() { thumb.fadeTo('fast',1); },
+					function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active
+				)
+			}
+		
+		});
+		// 
+		jQuery('#mycarousel').jcarousel({
+        	scroll: 12,
+	        initCallback: mycarousel_initCallback
+	    });
+	    
+	    $.hotkeys.add('left', function(){$.galleria.prev();});
+	    $.hotkeys.add('right', function(){$.galleria.next();});
+	    
+        $(function() { 
+                var firstItem = $('ul.galleria li:first').addClass('active').find('img').addClass('selected'); 
+                $.galleria.activate(firstItem.attr('src'));
+                $('ul.galleria li:first').remove()
+                
+                var active = false;
+				var gal = jQuery('#controls');
+				$(function() {
+                    if (!active) {
+						active = !active;
+						gal.everyTime('5s', 'slideshow', function() {
+							$.galleria.next();
+						});
+					}
+				})
+				$('#toggle').bind("click", function() {
+				     var gal = jQuery('#controls');
+                     if ($(this).attr("class") == "play") {
+                         $(this).attr("class", "pause");
+                         if (!active) {
+                             active = !active;
+                             $.galleria.next();
+                             gal.everyTime('5s', 'slideshow', function() {
+                                 $.galleria.next();
+                             });
+                         }
+                     } else {
+                         $(this).attr("class", "play");
+                         if (active) {
+                             active = !active;
+                             gal.stopTime('slideshow');
+                         }
+                     }
+                });
+				
+		});
+
+	    
+    });
+    
+    function mycarousel_initCallback(carousel) {
+	    jQuery('#main_image').bind('img_change',function() {
+		    var num = parseInt((jQuery('.caption').text()).split(":",1)[0])-1;
+		    var ntext = (jQuery('.caption').text()).split(":")[1];
+		    if (ntext == 'undefined') {
+		        ntext=''
+		    }
+		    jQuery('.caption').text(ntext);
+	        carousel.scroll(num);
+	        return false;
+	    });
+	};	
+//]]>
+	</script>
+</body>
+</html>