eRuby: SUSIE a Simple Photo Gallery in Ruby

videos

articles

blogs

comments

downloads

sitemap

Hiveminds | Thu, 2006-09-07 14:43 tags: Tutorials, Web Developer, eRuby

leave a commentsubscribe to feedfriendly: printshare: delicious, digg, reddit, icerocket

SUSIE stands for Seriously Uncomplicated SlIdeshow Engine and is written by Ernest Turro.

This application is the first eRuby application that I have found in the wild. It shows why eRuby is going to be popular and that using a framework is not the only way of getting things done in Ruby. It also gives web developers a chance to see first hand what Ruby as a web language looks like.

SUSIE is a simple application and shows a side of Ruby that other programming languages lack, the ability to be straight forward and small. Ruby does have muscle and lots of it. It is a pure object oriented programming language like Java. But you can still use it as a quick procedural language, embedded in HTML as shown by the SUSIE Photo Gallery. So if the developers at the watercooler see you doing this type of coding and say things like "Hmm, Ruby...Cute language but is it enterprise ready?". You can confidently just smile knowingly and walk away. No need for arguements, Ruby has got you covered.

Read over this code and you will see the same easy to understand syntax that Classic ASP and PHP are known for. Humanly understandable and showing a shallow learning curve. Ernest tired of large applications like Gallery2 just sits down one day, writes a little over one hundred lines of code, places it on the web server and it works! No, cgi bins, file permissions and especially no commandline work to create controllers and other Rails stuff.

<% albums = "bits/susie/albums" %> <%# specify the path to the albums directory %>

<% require 'cgi' %>
<% cgi = CGI.new %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>susie</title>

<script src="susie.js" type="text/javascript"></script>
<link rel="stylesheet" href="susie.css" type="text/css" media="screen" />
</head>
<body>

<h2>Pick an album</h2>
<ul id="albums">
<% Dir.entries(albums).sort.each do |x| %>
  <% unless x.match('^\.') %>
    <li><a <% if cgi['album'] == x %>class="active"<% end %> href="?album=<%= x %>#controls"><%= x %></a></li>
  <% end %>
<% end %>
</ul>

<div id="photos">
<% unless cgi.params.empty? 
   entries = Dir.entries(albums + "/" + cgi['album']).sort 
   entries.delete_if{|e| e.match('^\.')} 
   photo_selector_base = "?album=" + cgi['album'] + "&amp;photo_id="
   prevpage = photo_selector_base + (
      if cgi.params['photo_id'].empty? or cgi.params['photo_id'][0].to_i==1 
      then entries.length.to_s 
      else (cgi.params['photo_id'][0].to_i-1).to_s 
      end
      )
   curpage = photo_selector_base + (
      if cgi.params['photo_id'].empty? 
      then "1" 
      else cgi.params['photo_id'][0] 
      end
      )
   nextpage = photo_selector_base + (
      if cgi.params['photo_id'].empty? 
      then "2" 
      else ((cgi.params['photo_id'][0].to_i+1)%entries.length).to_s 
      end
      ) 
   image_uri_base = albums.split("/")[-1] + "/" + cgi['album'] + "/"
   curimage = image_uri_base +  entries[(
      if cgi.params['photo_id'].empty? 
      then 0 
      else cgi.params['photo_id'][0].to_i-1 
      end
      )] 
   %>
  <script type="text/javascript">
    document.onkeydown= photoKeyHandler; // keyboard control
    var sm = document.createElement('small'); // tell user about keyboard control
    sm.appendChild(document.createTextNode("Use your left/right arrow keys to navigate"));
    document.getElementsByTagName('body')[0].insertBefore(sm,document.getElementById('photos'));

    var entries = new Array(
    <% entries.each do |e| %>'<%= image_uri_base + e %>'<% unless entries.last == e%>,
    <% end %><% end %>
    );
    var cur = 
    <%= (
        if cgi.params['photo_id'].empty? 
        then 0 
        else cgi.params['photo_id'][0].to_i-1 
        end) 
        %>;
    // cache neighbouring images 
    var prev_image = new Image();
    var next_image = new Image();
    prev_image.src= entries[cur==0 ? entries.length-1 : cur-1];
    next_image.src = entries[(cur+1)%entries.length];
  </script>
  
  <p id="controls">
    <a class="prev_photo_anchor" href="<%= prevpage %>" onclick="cur=prev_photo(cur,entries);return false">
      <img src="prev.gif" alt="prev" onmouseover="this.src='prev_hover.gif'" onmouseout="this.src='prev.gif'" />
    </a>
    <span id="photo_index_text">
    <%= (
        if cgi.params['photo_id'].empty? 
        then 1 
        else cgi.params['photo_id'][0].to_i 
        end
        ) 
        %> 
    OF 
    <%= entries.length %>
    </span>
    <a class="next_photo_anchor" href="<%= nextpage %>" onclick="cur=next_photo(cur,entries); return false;">
      <img src="next.gif" alt="next" onmouseover="this.src='next_hover.gif'" onmouseout="this.src='next.gif'"/>
    </a>
  </p>
  
  <a class="next_photo_anchor" href="<%= nextpage %>" onclick="cur=next_photo(cur,entries);return false;">
    <img id="current_image" src="<%= curimage %>" alt="photo" />
  </a>
  <a id="chain" title="Permanent link to this page" href="<%= curpage %>">
    <img src="chain.png" alt="chain"/>
  </a>
  
<% end %>
</div>

</body>
</html>