Tri Nguyen

Adding Responsive Lightbox to WordPress

I have finally got around to update all the images on this blog to make use of Lightbox. Woohoo!

Lightbox has been around for a while, and there are many WordPress plugins that allow you to automatically update your blog with it.

However, I have found them to not be very satisfactory for a few reasons. None of them take advantage of the latest version of lightbox plugins. My personal favorite is fancyBox, which is responsive as well. Most of them are not responsive, and none of them allows you to group all the images within a post to be in one gallery, which I think is really important.

Following Bryce Adam’s incredibly helpful WPTuts tutorial on Add a Responsive Lightbox to your WordPress Theme, I have been able to implement Lightbox on my blog using the latest version of fancyBox. As a front-end developer, this is just a much more intuitive approach for me, rather than using a plugin without knowing what it does.

I followed step 1 and 2 but implemented step 3 a little differently to allow my version to automatically add all images within a post to the same gallery. I know that WordPress has a built-in gallery function, but I don’t use it that often and much prefer adding single image as I need to.

Here’s my version of the Javacript file:

// Initialize the Lightbox for any links with the 'fancybox' class
						$(".fancybox").fancybox();
						$('article').each(function() {
						    var id = $(this).attr('id');
						    // add fancybox class to any .jpg, .png, .jpeg and .gif file, as well as a rel attribute to denote that it belongs to a certain post
						    $("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']", this).attr('rel', id).addClass("fancybox");
						});
						

If you are not sure of the unusual jQuery selector, it means selecting an anchor tag a element with href attribute that ends with .png etc.

As an example, here are some pictures I’ve taken from my recent trip to Chicago that I would like to share. All I did is using the regular WordPress media uploader to import the pictures, without any Gallery configuration.

P/S: Writing this post has finally made me sit down and implemented prism.js for this website too! It is actually quite easy to do. DOUBLE WIN!

Using Em and Rem

em and rem have slowly become the new standard for sizing font sizes on webpages and even for things like margin and padding.

As an avid listener of the Shop Talk Show, I’ve been itching to start using em’s and rem’s in my work to see how cool these are (Chris Coyier described this as “spine tinkly hot“). But I was never certain of the right way to use either of them. The biggest mental block for me was distinguishing between using em and just regular percentage (%).

I’ve finally found a great article that clearly explain the pros and cons of using em’s and rem’s, and how to use them correctly in your code. In fact, I got so excited by this “Aha!” moment that I decided to write this blog post to commemorate this article and use it as a resource for me to refer back to in the future.

So if you’re just like me, sitting on the fence about moving to Ems and Rems from good ole px, reading this article might help give you that final nudge to explore it yourself.

Responsive design vs. Separate site: Google Chrome Sync Tabs

The debate between which strategy to approach for a responsive site is alive and well. The growing support for Responsive Web Design strongly indicates that many designers and developers truly think that designing for all viewport sizes at the same time, while a very challenging task, is the way to go (the view that I share).

This debate is all the more relevant with the two very well-run US presidential campaign adopting these very different strategies.

I just found another benefit of responsive design – it works much better with Google Chrome’s synced tabs across devices.

If you’re like me, you will browse your Twitter feed on the go and click on interesting articles to read on your phone. If an article is too long or is something you’d like to read later, you will just leave that tab open. Once back on desktop, you would fire up Chrome and go to “Other Devices” to bring up the article on the larger screen.

This is an amazing way to save time as I no longer have to email myself the article or even use Pocket.

This is where responsive design really trumps mobile site. I’ll use The Atlantic as the example here. As I initially opened an article on my phone, I am redirected to its mobile site, http://m.theatlantic.com. As a user, I’m happy as the content are laid out beautifully and neatly. This is all fine and good until I open the site up with Chrome on my desktop. Chrome simply grabs the URL from its mobile cousin browser and display that. As a result, the mobile version is displayed on my 23″ screen in all its glory (or lack thereof). I am less happy now because I feel that my experience has been reduced because I don’t have the beautiful typeface or layout that is designed for a larger viewport.

If The Atlantic had used the responsive design strategy however, it will be the same URL on any device and my browser will just magically know which layout it needs to adapt to for the most optimized reading experience that had been intended by the designers.

I am still surprised at how many big news websites that still do not have responsive design. While it is true that a separate mobile site approach has its merits, I think that it is an approach that was based on the past when responsive design was not a thing. To stay ahead with the web though, we need to made some real efforts to make our content responsive. I am sure the people at the NYTimes or The Atlantic already know this and probably are spending a lot of money trying to concert their content to be responsive. Meanwhile, we now have another argument to make for responsive design.

The perks of being on this side of the Pacific Ocean

Steph Yiu wrote a fantastic blog post about what she considers The Little Privileges You Get By Living In The USA, some of which I whole-heartedly agree with. These are the thoughts that go in my mind daily and I’m happy someone has so well articulated and published it on the web.

Here’s Steph’s list of 10 perks, check out the post for her full description of each perk, which I thought were light-hearted, honest and insightful observations.

1. You can Amazon Prime stuff
2. You can watch TV on Hulu, and movies on Netflix
3. You can use the iTunes store
4. You don’t need to worry about spoilers
5. Brands in magazines? They’re real.
6. You can buy Reese’s Pieces
7. Have stuff to do over the holidays
8. Britney Spears concerts
9. The best media the world has to offer.
10. Vote in the biggest election on the planet.

To this list, I would only add Listening to Spotify and Pandora, which have become my staples for music for quite a while now, and Getting first dibs at product releases (think Apple and Android phones, Amazon Kindles etc.), though the latter has been improved with every release cycle.

I don’t really get the Birtney Spear concerts, but I do think that there are just a whole lot more concerts here in general, not just big name ones, but even small little ones around the community neighborhoods. And unfortunately I can’t share Steph’s joy in being a part of the election, but I share the sentiment nonetheless.