Ruby

Things I did randomly last week

I actually have like 3 post drafts queued before this, 2 reviews for the Hibike! Euphonium ending, and a note on how I rewrote shreds with ES2015, ractiveJS, and a bastardized Flux architecture. But anyway, I kind of in the mood for writing about things I did last week. So it just came to me that it’s probably about time to rotate my SSH keys, random public keys started to piled up at my GitHub and Bitbucket account and I decided to remove them all and start with the new one.
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