Imgpop Is Picto Now

| Comments

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.

1
<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

1
{% imgpop /a/20120327-stony_cat/Screenshot-2012-03-27_22.22.41.png 50% center Tagline for The Pict. %}

From the tag above the rendered html will looks like this

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

Hatsune Miku, by piromizu.

Comments