Faces!

media/css/style.scss

@@ -2481,11 +2481,21 @@ body.homepage {
             border-right: 0;
             height: 50px;
             margin: 0 auto;
-            width: 2500px;
+            width: 5000px;
 
-            img {
+            div.inner {
-                display: none;
+                text-indent: -5000px;
+            }
+            a {
+                display: block;
                 float: left;
+
+                img {
+                    // From: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
+                    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
+                    filter: gray; /* IE6-9 */
+                    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
+                }
             }
         }
     }

media/js/snipt-all.min.js

@@ -140,7 +140,8 @@ if(!errors){$('.payment-errors').hide();$('.payment-loading').show();Stripe.crea
 return false;});}
 if(this.$body.hasClass('login')){$('input#id_username').focus();}
 if(window.gittip_username){this.$aside_main.html(this.$aside_main.html().replace(/\[\[.*gittip.*\]\]/,'<iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/'+window.gittip_username+'/widget.html" width="48pt" height="22pt"></iframe>'));$('iframe',this.$aside_main).parent('p').prev('p').css('margin-bottom','10px');}
-$('div.markdown pre code').each(function(i,e){hljs.highlightBlock(e);});if(this.$body.hasClass('homepage')){setTimeout(function(){$('div.faces img').show();},700);}
+$('div.markdown pre code').each(function(i,e){hljs.highlightBlock(e);});if(this.$body.hasClass('homepage')){setTimeout(function(){var $facesInner=$('div.faces div.inner');var $faces=$('a',$facesInner);for(var i=0;i<$faces.length;i++){var $face=$faces.eq(i);var imageWidth=$('img',$face).width();if(imageWidth!=50){$face.remove();}}
+$facesInner.hide();$facesInner.css('text-indent','0');$facesInner.fadeIn(400);},700);}
 window.ui_halted=false;},events:{'showKeyboardShortcuts':'showKeyboardShortcuts','click a.mini-profile':'toggleMiniProfile'},keyboardShortcuts:function(){var $body=this.$body;var that=this;$search_queries=this.$search_queries;$search_page_query=this.$search_page_query;$search_query=this.$search_query;$document=$(document);$document.bind('keydown','/',function(e){if(!window.ui_halted){e.preventDefault();if($body.hasClass('search')){$search_page_query.focus();}else{$search_query.focus();}}});$document.bind('keydown','h',function(e){if(!window.ui_halted){window.ui_halted=true;$body.trigger('showKeyboardShortcuts');}else{if(that.$keyboard_shortcuts.is(':visible')){that.$keyboard_shortcuts.modal('hide');}}});$document.bind('keydown','t',function(e){if(!window.ui_halted){window.open('','_blank');}});$document.bind('keydown','r',function(e){if(!window.ui_halted){location.reload(true);}});$document.bind('keydown','Ctrl+h',function(e){if(!window.ui_halted){history.go(-1);}});$document.bind('keydown','Ctrl+l',function(e){if(!window.ui_halted){history.go(1);}});this.$search_queries.bind('keydown','esc',function(e){if(!window.ui_halted){e.preventDefault();this.blur();}});},showKeyboardShortcuts:function(){this.$keyboard_shortcuts.modal('toggle');},toggleMiniProfile:function(e){this.$aside_nav.toggleClass('open');return false;},inFieldLabels:function(){$('div.infield label',this.$body).inFieldLabels({fadeDuration:200});},stripeResponseHandler:function(status,response){var $form=$('form#pro-signup');if(response.error){$('button[type="submit"]',$form).removeAttr('disabled');$('.payment-loading').hide();$('.payment-errors').text(response.error.message).show();}else{var token=response.id;$('input#name').val('');$('input#number').val('');$('select#exp-month').val('');$('select#exp-year').val('');$('input#cvc').val('');$form.append("<input type='hidden' name='token' value='"+token+"'/>");$form.get(0).submit();}}});})(snipt.module('site'));
 (function(Snipt){Snipt.SniptModel=Backbone.Model.extend({toSafe:function(){var snipt=this.toJSON();snipt.code=this.escape('code');snipt.title=this.escape('title');snipt.tags_list=this.escape('tags_list');if(typeof snipt.tags==='object'){for(var i;i<snipt.tags.length;i++){snipt.tags[i].name=_.escape(snipt.tags[i].name);}}
 return snipt;}});Snipt.SniptView=Backbone.View.extend({tagName:'article',initialize:function(){this.model.view=this;this.model.bind('change',this.render,this);this.template=_.template($('#snipt').html());this.editTemplate=_.template($('#edit').html());this.initLocalVars();this.initLineNumbers();},events:{'click a.copy':'copyFromClick','click a.edit':'edit','click a.favorite':'favoriteToggle','click a.embed':'embedFromClick','click a.expand':'expand','click .container':'selectFromClick','copyClose':'copyClose','copyRaw':'copy','detail':'detail','deselect':'deselect','destroy':'destroy','edit':'edit','embed':'embed','embedClose':'embedClose','expand':'expand','fadeAndRemove':'fadeAndRemove','goToAuthor':'goToAuthor','next':'next','prev':'prev','selectSnipt':'select'},copy:function(){$('textarea',this.$copyModal).remove();window.ui_halted=true;this.$copyModalBody.append('<textarea class="raw"></textarea>');$textarea=$('textarea.raw',this.$copyModalBody).val(this.model.get('code'));this.$copyModal.modal('show');$textarea.select();},copyClose:function(){$('textarea',this.$copyModal).remove();},copyFromClick:function(){this.copy();return false;},deselect:function(){this.$el.removeClass('selected');window.$selected=false;},detail:function(){window.location=this.model.get('absolute_url');},destroy:function(){this.model.destroy();},edit:function(){window.editing=true;window.ui_halted=true;this.select();that=this;var editPane=this.editTemplate({snipt:this.model.toSafe()});window.site.$main.hide();window.site.$body.addClass('detail editing');window.site.$main_edit.html(editPane);$('option[value="'+this.model.get('lexer')+'"]',window.site.$main_edit).attr('selected','selected');var $selectLexer=$('select#id_lexer',window.site.$main_edit);$selectLexer.chosen();$('label.blog-post input',window.site.$main_edit).on('change',function(){var $checkbox=$(this);var $label=$checkbox.parent();var $publish_date=$label.siblings('label.publish-date');if($checkbox.attr('checked')){$label.removeClass('is-not-blog-post').addClass('is-blog-post');$publish_date.show();}else{$label.addClass('is-not-blog-post').removeClass('is-blog-post');$publish_date.hide();}

media/js/src/modules/site.js

@@ -37,7 +37,6 @@
         el: 'body',
 
         initialize: function(opts) {
-
             this.$body = $(this.el);
             this.$html = $('html');
             this.$html_body = this.$body.add(this.$html);
@@ -172,7 +171,23 @@
             // Homepage Gravatars.
             if (this.$body.hasClass('homepage')) {
                 setTimeout(function() {
-                    $('div.faces img').show();
+
+                    var $facesInner = $('div.faces div.inner');
+                    var $faces = $('a', $facesInner);
+
+                    for (var i = 0; i < $faces.length; i++) {
+                        var $face = $faces.eq(i);
+                        var imageWidth = $('img', $face).width();
+
+                        if (imageWidth != 50) {
+                            $face.remove();
+                        }
+                    }
+
+                    $facesInner.hide();
+                    $facesInner.css('text-indent', '0');
+                    $facesInner.fadeIn(400);
+
                 }, 700);
             }
 

templates/base.html

@@ -369,9 +369,6 @@
         <script type="text/javascript" src="{{ STATIC_URL }}/js/plugins/jquery.hotkeys.js"></script>
         <script type="text/javascript" src="{{ STATIC_URL }}/js/plugins/jquery.infieldlabel.js"></script>
         <script type="text/javascript" src="{{ STATIC_URL }}/js/plugins/jquery.chosen.js"></script>
-        <script type="text/javascript" src="{{ STATIC_URL }}/js/src/application.min.js"></script>
-        <script type="text/javascript" src="{{ STATIC_URL }}/js/src/modules/site.min.js"></script>
-        <script type="text/javascript" src="{{ STATIC_URL }}/js/src/modules/snipt.min.js"></script>
         <script type="text/javascript" src="{{ STATIC_URL }}/js/src/account.js"></script>
         <script type="text/javascript" src="{{ STATIC_URL }}/js/libs/codemirror.js"></script>
         <script type="text/javascript" src="{{ STATIC_URL }}/js/libs/highlight.js"></script>

templates/homepage.html

@@ -42,11 +42,13 @@
         <h4>{{ users_count|intcomma }} coders in over 120 countries have stored {{ snipts_count|intcomma }} snipts, in 145 languages.</h4>
         <a href="/signup/" class="button">Sign up</a>
         <div class="faces group">
-            {% for coder in coders %}
+            <div class="inner">
-                <a href="/{{ coder.username }}/" title="{{ coder.username }}">
+                {% for coder in coders %}
-                    <img alt="{{ coder.username }}" title="{{ coder.username }}" src="https://secure.gravatar.com/avatar/{{ coder.email_md5 }}?s=50&d=https://snipt.net/static/images/default-gravatar-homepage.gif" />
+                    <a href="/{{ coder.username }}/" title="{{ coder.username }}">
-                </a>
+                        <img alt="{{ coder.username }}" title="{{ coder.username }}" src="https://secure.gravatar.com/avatar/{{ coder.email_md5 }}?s=50&d=https://snipt.net/static/images/default-gravatar-homepage.gif" />
-            {% endfor %}
+                    </a>
+                {% endfor %}
+            </div>
         </div>
     </section>
 {% endblock %}

views.py

@@ -17,7 +17,7 @@ from local_settings import STRIPE_API_KEY
 @render_to('homepage.html')
 def homepage(request):
 
-    random_users = User.objects.all().order_by('?')[:75]
+    random_users = User.objects.all().order_by('?')[:100]
     coders = []
 
     for user in random_users: