Octopress

Site Moved

A bit of rants here first. So my previous vps provider decides to acting up, suspending my server for overdue payment. Except that I paid in-time. I’m not sure whether this is purely coincidence mistakes or some sort. My invoice was dated due to 6th each month. Of course, as a good service provider, they sent me reminder for the payment at the end of the month by 29th, and at the 3rd of the next month.
Read more

imgpop is Picto Now

This one is late for about… 24 days?
I re-made the image viewer almost from scratch also renamed it to picto.

At the last post I showed the snippet on how imgpop html template looks like. And while I said it was neat, it is not. The new template actually looks like this: in a straight one line.

<a href="<%= image %>" id="image-<%= id %>" rel="pict" w="<%= full_width %>" h="<%= full_height %>"><img src="<%= scaled_image %>" alt="<%= title %>" class="<%= klass %>"/></a>

So let say I call the imgpop like this


% center Tagline for The Pict.

From the tag above the rendered html will looks like this

<a href="/a/20120327-stony_cat/Screenshot-2012-03-27_22.22.41.png" id="image-1" rel="pict" w="1920" h="1080"><img src="/a/20120327-stony_cat/resized_Screenshot-2012-03-27_22.22.41.png" alt="Tagline for The Pict." class="center"/></a>

Far more simple, and better, no script tag pollution.

The backend magic were performed by MiniMagick (pun intended). As you may see above, I put the resized image rather than the original one inside the post. Just when the image clicked, the original image showed inside a popup, plus tagline at the bottom, and nice resize button feature hidden at the right-top corner. Try hover your mouse to the right top corner of the image and click the resize button. Of course nothing will happen if the image were not resized by MiniMagick, or smaller than your browser portview size.

At the frontend, I ditch jQuery all the way and use ender-based libraries. The source code can be forked at https://bitbucket.org/fudanchii/picto.

So, here is to summarize, what’s picto (hopefully) features:

  • Shadowbox inspired.
  • Resizable image, also draggable.
  • Lightweight.
  • Easy to integrate to another platform.

Sample image after the break.

Read more

imgpop

Now I will going into technical details inside imgpop.

Like I said in the previous post. I extends Brian’s imgpopup and do some makeup to things. At the backend, I use mini_magick to actually save the resized image, and use that as preview/thumbnail. Here’s the snippet.

#...#
# Open the source image, and scale it accordingly.
image = MiniMagick::Image.open(image_path)
vars['full_width'] = image[:width]
vars['full_height'] = image[:height]
image.resize "#{@percent}%"

rpath = source+ resized_image
if not File.exists? rpath
# Actually save the image
  image.format "jpg"
  image.quality "92"
  image.write rpath

  # This is the tricky part
  # we should register the new created file
  # since Jekyll already indexed all files before
  context.registers[:site].static_files << StaticFile.new(
          context.registers[:site], source, File.dirname(@path.sub(%r{^/}, '')),
          "resized_#{File.basename(@path)}")
  print "image saved to #{rpath}\n"
end
#...#
Read more

Image viewer is up!

% center My current desktop with cinnamon: 2nd monitor % center My current desktop with cinnamon: 1st monitor Yay, it’s up. You can click images above to try it out. a pop-up will appear with full sized image, and it’s draggable! You can also try hover the upper area of the popup to see the tagline/title and download link for the image. Credits to Brian Clapper.
Read more

More Layout Update

I apologize for the inconvenience to refreshing your browser cache. For I randomly changing the site’s layout. Now I made the whole page a bit smaller, including the fonts. Also fixed mobile view for navigation bar. Which is hacky.

So it appears that this theme support mobile view (duh). That navigation bar above will shrink and turn into drop down menu if browsed from mobile device. And it happened that I broke this feature when I moved the search box to the sidebar.

Here be the aforementioned feature in javascript.

function getNav() {
  var mobileNav = $('nav[role=navigation] fieldset[role=search]').after('<fieldset class="mobile-nav"></fieldset>').next().append('<select></select>');
  mobileNav.children('select').append('<option value="">Navigate&hellip;</option>');
  $('ul[role=main-navigation]').addClass('main-navigation');
  $('ul.main-navigation a').each(function(link) {
    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
  });
  $('ul.subscription a').each(function(link) {
    mobileNav.children('select').append('<option value="'+link.href+'">&raquo; '+link.text+'</option>');
  });
  mobileNav.children('select').bind('change', function(event) {
    if (event.target.value) { window.location.href = event.target.value; }
  });
}
Read more

Octopress, custom banner

One thing I fond from octopress is its super simple customization, here’s example. You might notice that my banner above only showed at front page, and it’s not coincidence. I set that on purpose using almost no code. The trick is coming from Jekyll itself. Jekyll/Octopress user should already know that there is YAML formatted meta data at the top of each post or page file. So yes, you can put anything there and use it from your template.
Read more