Digging the Wanna Isotope plugin

Wanna Isotope screen shot

I wanted to give a shout out to the awesome folks who made the Wanna Isotope plugin for WordPress. When I was developing this theme for my site, I really wanted to make my portfolio page filterable, and I looked into creating my own implantation of Isotope, mostly because it didn’t occur to me that there might be a plugin already made. But once I discovered there were Isotope plugins for WordPress, I tried a number of them and found that Wanna Isotope was really nice, simple to use, not too opinionated its styles and functionality, and allowed for me to customize it without too much pain.

Of course, I got the urge to tinker. I thought it would be cool if I could also display the titles of my portfolio posts in addition to the thumbnails. Unfortunately, that required me to edit the plugin loop.php file directly, which means I will have to keep a backup or the next revision of the plugin will probably overwrite my changes. But it was actually pretty simple to add the post title within the loop. I then decided to style it so that the title always appears on mobile/smaller screens, and on larger screens, the title appears on mouseover. I did that by putting the thumbnail image and title in their own divs, and putting them in a container div. The container div has a position of relative, and the title div has a position of absolute, and is positioned at the bottom of the container div. This surprisingly worked pretty painlessly. I pushed it a little farther by setting the height to 0 on large screen devices, then animating the height on image mouse over, producing a cool rollover effect.

Anyway, major shout out again to the Wanna Isotope plugin folks, thanks for helping make my theme do everything I wanted it to.

Leave a Reply

Your email address will not be published. Required fields are marked *