d141b76febc4

Add thumbnailing and remove the custom gallery JS.
[view raw] [browse files]
author Steve Losh <steve@stevelosh.com>
date Thu, 07 Jan 2010 18:48:06 -0500
parents d8ef4c78256a
children 467bf986634a
branches/tags (none)
files content/projects/fuego.html content/projects/women-in-water.html media/css/base.css media/js/sjl-gallery.js settings.py

Changes

--- a/content/projects/fuego.html	Wed Jan 06 21:17:38 2010 -0500
+++ b/content/projects/fuego.html	Thu Jan 07 18:48:06 2010 -0500
@@ -8,13 +8,29 @@
 
 {% block article %}
 
+{% spaceless %}
+
 <div class="gallery">
-    <img src="/media/images/projects/{{ page.page_name }}/Fuego-4852.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/Fuego-4887.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/Fuego-4919.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/Fuego-4941.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/Fuego-4985.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/Fuego-5133.jpg" />
+    <a href="/media/images/projects/{{ page.page_name }}/Fuego-4852.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/Fuego-4852-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/Fuego-4887.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/Fuego-4887-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/Fuego-4919.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/Fuego-4919-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/Fuego-4941.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/Fuego-4941-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/Fuego-4985.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/Fuego-4985-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/Fuego-5133.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/Fuego-5133-thumb.jpg" />
+    </a>
 </div>
 
+{% endspaceless %}
+
 {% endblock %}
\ No newline at end of file
--- a/content/projects/women-in-water.html	Wed Jan 06 21:17:38 2010 -0500
+++ b/content/projects/women-in-water.html	Thu Jan 07 18:48:06 2010 -0500
@@ -9,16 +9,36 @@
 {% block article %}
 
 <div class="gallery">
-    <img src="/media/images/projects/{{ page.page_name }}/erin-tele.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/alex-tele.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/lizza-tele.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/leah-tele.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/anna-tele.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/erin-wide.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/alex-wide.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/lizza-wide.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/leah-wide.jpg" />
-    <img src="/media/images/projects/{{ page.page_name }}/anna-wide.jpg" />
+    <a href="/media/images/projects/{{ page.page_name }}/erin-tele.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/erin-tele-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/alex-tele.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/alex-tele-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/lizza-tele.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/lizza-tele-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/leah-tele.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/leah-tele-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/anna-tele.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/anna-tele-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/erin-wide.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/erin-wide-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/alex-wide.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/alex-wide-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/lizza-wide.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/lizza-wide-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/leah-wide.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/leah-wide-thumb.jpg" />
+    </a>
+    <a href="/media/images/projects/{{ page.page_name }}/anna-wide.jpg">
+        <img src="/media/images/projects/{{ page.page_name }}/anna-wide-thumb.jpg" />
+    </a>
 </div>
 
 This is still a work in progress.
--- a/media/css/base.css	Wed Jan 06 21:17:38 2010 -0500
+++ b/media/css/base.css	Thu Jan 07 18:48:06 2010 -0500
@@ -203,7 +203,7 @@
     border: none;
 }
 div#leaf-content img {
-	display: block;
+    display: block;
     margin-left: auto;
     margin-right: auto;
     border: 1.43em solid #e5e5e5;
@@ -221,16 +221,11 @@
 div#leaf-content img.right {
     margin: 0 0 .75em 1em;
 }
-div#leaf-content div.gallery > img {
+div#leaf-content div.gallery img {
+    background: none;
+    padding: 0;
+    border: none;
     display: inline;
-    padding: 0px;
-    border: none;
-    margin-left: 0px;
-    margin-right: 0px;
+    margin-bottom: 1.5em;
+    margin-right: 1.5em;
 }
-div#leaf-content div.gallery-pane {}
-div#leaf-content div.gallery-pane img.gallery-display {
-	display: block;
-    margin: 0px;
-    padding: 0px;
-}
\ No newline at end of file
--- a/media/js/sjl-gallery.js	Wed Jan 06 21:17:38 2010 -0500
+++ b/media/js/sjl-gallery.js	Thu Jan 07 18:48:06 2010 -0500
@@ -1,30 +0,0 @@
-$(function() {
-    $('div.gallery').each(function () {
-        $(this).contents().filter(function() {
-            return this.nodeType == Node.TEXT_NODE;
-        }).remove();
-        
-        var cols = 4;
-        var padding = 10;
-        var total_width = $(this).width() - (cols * 2 * padding);
-        var width = (total_width / cols);
-        
-        $(this).find('img').css({width: width, margin: padding});
-        
-        $(this).before('<div class="gallery-pane"></div>');
-        $(this).find('img:first').clone()
-                                 .addClass('gallery-display')
-                                 .css({width: '', margin: '0px auto'})
-                                 .appendTo('div.gallery-pane');
-    });
-    
-    $('div.gallery img').click(function() {
-        var new_image = $(this).clone()
-                               .addClass('gallery-display')
-                               .css({width: '', margin: '0px auto', display: 'none'});
-        $('img.gallery-display').fadeOut('fast', function() {
-            $(this).remove();
-            new_image.appendTo('div.gallery-pane').fadeIn('slow');
-        });
-    });
-});
\ No newline at end of file
--- a/settings.py	Wed Jan 06 21:17:38 2010 -0500
+++ b/settings.py	Thu Jan 07 18:48:06 2010 -0500
@@ -38,11 +38,15 @@
 
 MEDIA_PROCESSORS = {
     '*': {
-        '.css':( 'hydeengine.media_processors.TemplateProcessor',
-                 'hydeengine.media_processors.YUICompressor', ),
-        '.js':( 'hydeengine.media_processors.TemplateProcessor',
-                'hydeengine.media_processors.YUICompressor', )
-    } 
+        '.css': ('hydeengine.media_processors.TemplateProcessor',
+                 'hydeengine.media_processors.YUICompressor',),
+        '.js': ('hydeengine.media_processors.TemplateProcessor',
+                'hydeengine.media_processors.YUICompressor',)
+    },
+    'images/': {
+        '.png': ('hydeengine.media_processors.Thumbnail',),
+        '.jpg': ('hydeengine.media_processors.Thumbnail',),
+    }
 }
 
 CONTENT_PROCESSORS = {}
@@ -70,6 +74,9 @@
 
 YUI_COMPRESSOR = os.path.join(HYDE_FOLDER, 'lib', 'yuicompressor-2.4.1.jar')
 HSS_PATH = None # if you don't want to use HSS
+THUMBNAIL_MAX_WIDTH = 140
+THUMBNAIL_MAX_HEIGHT = 300
+THUMBNAIL_FILENAME_POSTFIX = '-thumb'
 
 # Django settings