imgpop

Posted on

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
#...#

I also change the tag into imgpop, add new parameter for the <img> class, and made all the parameters mandatory.

I moved all the logic into separate file other than the template. So now we have the original template img_popup.html.erb and javascript file called imgpop.js.

The template now looks like this.

{% include_code img_popup.html.erb %}

Above, I only have to call jQuery.imgpop, and pass full image data, id and the title. It’s pretty neat.

All the logic happen in imgpop.js. You can load this file after jQuery UI. For octopress, you can put the script tag at /source/_include/custom/head.html file.

{% include_code imgpop.js %}

I should highlight the FIXME part above. The workaround emptied the src, since if I leave it to /images/1px.png firefox will do this:

For some reason firefox download the same image multiple times.

The last one is its stylesheet.
{% include_code _styles.scss %}

There’s nothing special I guess, except that I should remind myself about html layouting system. For position property, absolute value means that the element positioned relative to its non static parent. While fixed value would put the element relative to the viewport.

The full repo can be accessed here.
It is released under BSD license. Please take a look, all suggestions are welcomed!