This is a quick tutorial on creating graphical dates using SimpleLog. Since I released the newest design of this site, which features graphical dates, I've received a few requests from SimpleLog users for a short how-to on the subject. Here goes:
First, create the 0-9 images. Try to make them as uniform as is possible. You can always add padding space between them later using CSS, so don't pad them too much. Save them as 0.png, 1.png, et cetera. Pretty logical. Put them in your theme's images directory, maybe in a subdir called "numbers." You should also create a dot graphic and a colon graphic (or a / or a - or whatever you want to use as a separator.)
Next, tweak your theme's views to use the new graphics. You're going to modify themes/your_theme/views/posts/_item.rhtml and _item_detailed.rthml. The latter is the partial used on individual post archive pages (or permalinks). Here's a simple way to use the graphics:
<%
# We're going to store the image code as we build it
link_img = ''
# For loop iteration
i = 0
# Choose which separator to use and set the datetime string
# The following will produce MM.DD.YY
sep = 'dot'
dt = post.created_at.strftime('%m%d%y')
# Loop through each character of the datetime string
while i < dt.length
# Add the digit, use theme_image_path to generate a theme-specific URL
link_img << "<img class=\"dt\" src=\"#{theme_image_path('numbers/' + dt[i,1])}\"/>"
# Add a separator if we've gone two digits
link_img << "<img class=\"dt\" src=\"#{theme_image_path('numbers/' + sep)}\"/>" if i%2 != 0 and i != dt.length-1
# Increment the iterator
i+=1
end
# Now we've got our image in link_img, we can use it
-%>
<%= link_to link_img, Post.permalink(post), :title => 'Permalink for this post' %>
Now, there are plenty of ways to choose which separator or datetime string to use. This is a very simple example that uses only the month, date and year with dots separating them. You could do something more complicated like, say, YYYY-MM-DD HH:MM:SS by using code like the following:
<%
# Set the separator to hyphen first, set the full datetime string we need
sep = 'hyphen'
dt = post.created_at.stftime('%Y%m%d%H%M%S')
# Loop through
while i < dt.length
# If we've passed the last part of the date, change the separator
sep = 'colon' if i >= 7
# Add the digit, use theme_image_path to generate a theme-specific URL
link_img << "<img class=\"dt\" src=\"#{theme_image_path('numbers/' + dt[i,1])}\"/>"
# Add a separator if we've gone two digits but don't add one between the date and time
if i != 1 and i != 7
link_img << "<img class=\"dt\" src=\"#{theme_image_path('numbers/' + sep)}\"/>" if i%2 != 0 and i != dt.length-1
elsif i == 7
# Add a space between the date and time
link_img << ' '
end
# Increment the iterator
i+=1
end
-%>
Obviously, the second example is a little more complicated, but due to the various requirements (year is four characters without a separator, space between the date and time), it has to be. It's still quite easy to put in place, though. These might not even be the best way to do this, but it's a quick and dirty method that works.
Once you've got this code in place, you can easily customize the padding/spacing of the graphics using CSS.
Check out the SimpleLog wiki or forums for other SimpleLog tips, tricks and user feedback.
