Dummyimage.com Gets New Features

Ever since the surge of interest in my pet project dummyimage.com I’ve been meaning to add some new features. Today is the International Day of Awesomeness (which coincides with Chuck Norris’ birthday) and I couldn’t think of a better time to unveil DummyImage.com‘s new functionality to the public.

a 600x200 Dummy Image

Here is a run down of the changes:

Specify Custom Colors

You can choose the background and foreground colors of the dummy image right in the url using a 6,3,2, or even 1 character hexcode. Don’t worry if you forget to do this as dummy image will default to gray and black.

Add Your Own Text

A lot of people wanted to be able to add their own text to a dummy image to better communicate what it is representing. Now using the &text= parameter you can.

A Better Typeface

Arial be damned! Font geeks cringed at my basic choice of a font. Some seemed worried about my distribution of the most popular font on Earth. Now both camps can be happy as I’m now using the completely free and open M+ Font. I also changed the X in the middle of the images to a multiplication sign × as pointed out by Erinah and Dave Cortright.

Standard Image Sizes

Dummyimage.com is a useful prototyping tool and a lot of prototypes and wireframes have ad positions. Instead of memorizing dimensions you can now bring up ad sizes by their industry-standard name like largerectangle, skyscraper, and fullbanner. You can even customize the colors, text, and formats of theses sizes as well.

Pick Your Format

Before you could add any image format extension to the url but my script would still generate a GIF image everytime. Now you can generate proper PNG, JPG, and GIF images and drag them into another app trouble free.

Happy Birthday Chuck Norris

And with these new features I figured it was time to give the site a proper, though still simple, design. Rather than bury how these features work in long, boring text I made a little tool that shows you everything you need to know with minimal fuss.

Not a fan of change? Don’t worry, you can still use Dummyimage.com to generate place holder images exactly the same way you have always been doing it.

So thank you to everyone who has e-mailed me, tweeted me, left a comment on a post somewhere or otherwise provided feedback on dummyimage.com. I’m glad so many people found it as useful as I think it is. Keep the ideas and dummyimage variations coming. I’m sure this thing could be better.

Dummyimage.com Sees A Surge In Interest

Way back in August of 2007 I built a simple PHP tool that generates place-holder images at different size by simply changing the URL. The idea came to me when I was working on a redesign for USNews.com. I hated opening up Photoshop, creating a new document,  filling the background layer, and exporting for web just to make a simple placeholder image. That is why I made dummyimage.com.

I figured it would be useful to other people which is why I also released the complete source code, documented and including instructions for setting it up on your own server. But like most new things, few gave it any notice.

The other day my friend Charlie Park (founder of Pear Budget) found it when doing some in-browser wire-framing and sent out a tweet to all of his followers. But he didn’t stop there. Charlie also posted it to Hacker News, a simple news aggregator aimed at geeks. It was obvious that my little tool was resonating with other developers with the tagline “Lorem ipsom for images.” In 24 hours, the Hacker News story got 161 votes with 77 comments, 513 people bookmarked it on del.icio.us, and 337 tweets.

What really struck me was how dummyimage.com was crossing the language barrier. I saw tweets mentioning in SpanishJapanese, Russian, German, Dutch, even Latvian. I’m glad my idea was simple enough that foreign speakers could easily pick it up without any translation help.

All of this sudden attention also produced helpful feedback and new feature ideas. I started working on an update this past December for a few additions I wanted to see but this recent surge of interest has lit a fire under my butt to continue developing. As is the nature of opensource software, people don’t have to wait for me; they can adapt the code to their own needs. Here are some iterations that have already been made:

And somewhere down the line I would like to give it an attractive homepage. Hooray for side projects!

Kingkool68.com Aggregates All Of My Web Activity

I finally finished kingkool68.com this weekend. The purpose of the site is to aggregate all of my activity on the web into one single stream, commonly referred to as a lifestream. To mash all of my RSS feeds of activity together I used SimpleLife, a WordPress adaption of the SimplePie PHP script. For the front end I used jQuery, a JavaScript library, as well as standard HTML and CSS.

Screenshot of kingkool68.com

Most lifestreams I saw didn’t include a way to for end users to filter out certain items, so I built one into my lifestream application. Using the power of CSS selectors built in to jQuery, I wrote a function to grab the list items with a certain class and then toggle a fade effect. If the item was hidden the script would fade them in, otherwise it would fade them out. You can see the 13 lines of code I wrote to do this for yourself.

Once I finished writing the filter code I noticed it didn’t work in Safari browsers even though it performed flawlessly in Firefox. After debugging and digging around on the net for possible solutions I stumbled upon the Safari Developer FAQ. Did you know you can unlock a debugging menu in Safari? The FAQ provides details on how to reveal it and then by holding Apple+Shift+J shows a JavaScript console alerting you to any errors. I used this to figure out that you can’t use ‘class’ as a variable name even though Firefox doesn’t seem to mind. I haven’t tested the site on any version of Microsoft’s Internet Explorer which is notorious for choking on standard code.

So if you ever wanted to see everything I do on the web, checkout kingkool68.com. And if you want to add me as a friend on any of these popular sites, click the small icons associated with each item to take you directly to my profile for that site. The next step would be to package my modifications up into a WordPress plugin so anyone could run a lifestream just like mine. In the meantime if you have any problems implementing a lifestream on your own, leave a question in the comments of this post and I’ll do the best I can to help out. Happy lifestreaming!

Dynamically Create Dummy Images At Any Size

Over the weekend I worked on a little micro project to help me during web development work. Have you ever needed a dummy image while laying out a site but opening a graphics app, entering the dimensions, saving it out, and uploading said image to your server seemed like too much work? Yea it was a bother for me to.

That’s why I created DummyImage.com which let’s you spit out a filler image at any size you want. All you have to do is construct a URL like so http://dummyimage.com/300×240. Replace the numbers with whatever you want and my script will spit back a GIF image for you.

300×240 Dummy Image from DummyImage.com

I have even packaged up the source code so you can download it, run it on your own server, mash it to bits or whatever else you want. Comments, suggestions, improvements are always welcome and hopefully this thing won’t take down my server from all of the image generating on the back end.

Happy Dummy Imaging!