Brag time. Beyoncé's Tumblr uses Masonry.

It was designed by NYC design agency designedmemory.

Aside from the glorious aura that is Beyoncé, this site actually has an awesome technique. If you resize the browser window, you'll see that the images are always in 3 columns and there are no gaps between the images. This is actually pretty hard to do. Browsers will properly size the items with width: 33.3333% to cover 3 columns. But when size is measured with JavaScript, the fractional pixel values will be rounded off, causing items to jump to the next column and break the layout. In the past (see Isotope issue #222), I've tried to resolve the issue with overly-intrusive JS.

designedmemory came up with a much better solution. Instead of trying to get exactly 3 columns in the layout, the columns are sized just a fraction to be less than the ideal. Then the images are sized to be just a little bit bigger to cover the gap. Brilliant!

/* not quite 33.3% */
.item { width: 33.2%; }

/* images cover up the gap */
.item img { width: 100.5%; }

Crack open this example on CodePen!

Several reports have come in about the the mythical drag n’ drop multi-column grid plugin.

Gridster

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages. Made by Ducksboard.

Ha, I appreciate the "mythical" reference :)

Open Assembly

Open Assembly was developed by Pressed Web, featuring a highly customizable interface than employs a draggable version of Masonry.

Awesome to see these solutions arise. For the time being, my branches of Masonry and Isotope will continue to be un-draggable. But both these options demonstrate that it can be done.

This is a story of serendipity.

But first, may I present Metafizzy's new logotype, designed by James T. Edmondson.

Deep within the core of every graphic designer burns an yearning for creative typography and custom lettering. We all want to be Jessica Hische, Erik Marinovich, and all the other Friends of Type. Having already produced several compelling fonts, boasting a wonderful Dribbble showcase, and backing it all up with a captivating portfolio, Mr. Edmondson belongs in this pantheon of typography superheroes.

So I was totally thrilled to when James reached out via email, notifying me that he was using Isotope for his new site. This was probably the closest I'll ever get to quenching the envious thirst to make pretty type. The use of Isotope was compelling -- an organic grid layout, using filtering to showcase similar content.

But after taking a look at the source, it was apparent that, while James was an incredible typographer, his jQuery skills were still developing. In addition to thanking him kindly for sharing, I replied back with some recommended code refactoring. Thus, the gentlemenly gesture was returned, and a mutually-respectful working relationship was born.

Metafizzy was already in business for a year. It was time for a proper brand identity. My own attempts at a logo were perhaps cute, but ultimately immature in communicating the spirit and values of the company.

I had been considering contracting a proper typographer for a while to work on a custom logotype. But, lo and behold, a talented letterer contacts me before I even begin searching! It was kismet!

---

What followed was an enlightening exchange working toward the final product. Here I was, playing the role of the whiny client who thought he could "design" and do some sketching of his own.

After suppling the aesthetic inspiration of "rainbows and super-powered teddy bears," James produced these first five sketches.

I was floored. Any of those five sketches was a winner. But there was something about the fourth sketch that jumped out as "this is an identity." I tried to play around with some sketching of my own.

To which James came back with:

I tried a bunch more sketching, but these were all dead ends. From James' sketch above, it was just a matter of honing it in.

James was so awesome, he made a geometic alternative and a one-line variant.

I couldn't be happier with the results. James totally delivered on the work and then some. He was a pleasure to work with and you should go hire him right now.

---

A logo is both important and unessential. You can spend a lot of time on it, but that time is probably a lot better spent on building any other part of the business.

But I can say, now that Metafizzy has a proper logo, it does feel significant. This whole venture feels legitimate and worthwhile, all because I have something I'm proud to put on a t-shirt.

Gene Crawford, being a upstanding Southern gentleman, offered me a fine opportunity to do a chat session for his site Unmatched Style. I graciously accepted. We got to talking about the history of Masonry, Isotope, and just what it is I do.

Unmatched Style Chat Session - David DeSandro

My thanks to Gene for putting this all together.

Also, sorry Jonah for totally blanking on your name.

Metafizzy is now one year old.

Back when I began, I decided to add a support service for Masonry and Isotope. At the time, I would receive several requests for help each week. While I'd like to think I am a nice guy, there was little incentive for me to help these requesters, aside from open-source guilt. The support license was a measure to resolve this. I would get paid for efforts. And requesters would be vetted. No more freeloaders.

It was also a matter of pride. I felt obligated to users that they deserved proper support for using (and financially supporting) my resources. I've found answers on Stack Overflow to be disappointing. As Stack Overflow answers rank high on Google, these "solutions" then propagate through the developer realm. By helping others, I could help myself, preventing poor solutions from growing virally.

Having that support system in place has been beneficial to the development of Isotope. Options have been added and source code has been improved all because a requester had a problem that identified a weak point.

But this improvement in code has come at the expense of personal man-hours. Each morning for the past 10 months, slouched over a bowl of cereal, I could expect to find several new requests for support. Resolving each of those requests is a mini-project all of itself, with individual complexities and peculiarities that require care and attention. The workload was manageable, but I just didn't have the heart to keep it going.

I was skeptical about starting a support service in the first place. I am happy that I gave it a try, that I was able to help my users, and improve my resources. But I have big plans for 2012. In order to create a resource like Isotope, I am going to need the hours and availability I had when I created Isotope. So it's time to close this chapter of Metafizzy, in order to start writing the next.

Isotope can make any ol' image gallery especially more compelling. But if you're loading in 20+ images at a time, it makes sense to get the smaller images with manageable filesizes. Rodrigo Sanchez was curious if there was a way to load in high-resolution, big filesize images after user-interaction, like when the image is clicked.

The solution is to use a little bit of Isotope, but mostly depend on some custom jQuery to handle the logic.

• Markup uses smaller thumbnail <img>, but links to larger hi-res images in <a>.
• When a link to an image is clicked, we'll check if a larger image needs to be in loaded.
• If so, first we'll add a loading GIF indicator to help users be patient.
• The large image will be dynamically added with jQuery, using the href attribute from the <a> as the src for the new <img>.
• Isotope's included imagesLoaded is used to detect when that new image has loaded.
• After the image has loaded, we hide the small image, and show the large.
• If an image is clicked and it already has loaded a big image, we just need to show it.
• To Show/hide images, we'll toggle a class .large. Simple CSS styles will handle what gets hidden/shown with that class on or off

View fiddle - Isotope - dynamically load images

Loading these big images into the Isotope layout will typically put them in a different spot from their thumbnails. You can add automatic scrolling with the jQuery scrollTo plugin.

• Get position of the container's top.
• Set itemPositionDataEnabled: true in Isotope's options. See details on itemPositionDataEnabled.
• When clicked, use $.scrollTo. The top value is calculated from .data('isotope-item-position').y + containerTop.

View fiddle - Isotope - dynamically load images, and scrollTo