Generating Placeholder Content in Sublime Text 2

by on 7th January 2013 with No Comments

screenshot

Everyone needs a little placeholder content now and then. Whether it’s a quick dummy image or a chunk of lorem ipsum, placeholder content can help fill the void when you need to flesh out a project but don’t necessarily have your pieces in place.

Today we’re going to take a look at how Sublime Text 2 can help you generate placeholder content automatically so you can save time and move on to the important stuff. Let’s check it out!

Sublime Package Control

First things first, you need to make sure that you have Sublime Package Control installed. This is a package manager that makes it super easy to find and install packages for Sublime Text 2.

screenshot

Starting with this tool, we’ll be able to discover some really cool add-ons for Sublime that will make placeholder content generation a snap. With that, let’s move on and look at some of the packages that are available. You can find installation instructions for Package Control here.

Placehold.it

The first package that we’re going to check out makes use of the popular web service Placehold.it. Like other dummy image generators, Placehold.it uses customizable URLs that allow you to quickly embed generic images. You can change the size, color and caption of the images just by manipulating the contents of the URL.

screenshot

The problem with services like this is that you can never quite remember the right URL off the top of your head, so you’re left running to the website every time you want to insert a placeholder image. With Sublime Text 2 however, you can access the service with a quick shortcut.

Installing

To bring up the Command Palette, hit Command+Shift+P in Sublime Text 2. This is where you can launch all kinds of different services and commands simply by typing them in. Think of it as Alfred for Sublime.

screenshot

In the Command Palette, begin typing the word “install”, the results will quickly be filtered so that “Package Control: Install Package” is at the top of the list (typing “package” also works, but gives you a lot more results to sift through).

Hit Return on that “Install Package” result and you’ll be taken to list of available packages. This time, begin typing out “placehold” and you should see the Placehold.it package pop up.

screenshot

Hit Return on the item shown above and it will be installed. That’s it, now you’re ready to start using it!

Using The Placeholt.it Package

To use the Placehold.it package, all you have to do is insert your cursor where you want to place an image, type the letters “ph” and then hit Tab. This brings up a little window with three options:

screenshot

As you can see, you can insert an image at the default size, type in custom dimensions or insert cached images. If you choose the default image, this snippet will be inserted wherever your cursor lies (sans the comment). Note that an image tag is also generated for you, saving you even more time.

<!-- placehold.it package default image -->
<img alt="" src="http://placehold.it/600x400/0eafff/ffffff.png" />

If you copy and paste this link into your browser, you can see the image that will be inserted. The size is 600px by 400px, the background color is #0eafff and the text color is #ffffff. Once the URL is inserted, you can change any of these on the fly

screenshot

If you choose the custom size option, you’ll be given a small list of image size options to choose from. By default this includes four sizes: 600×400, 200×200, 800×600 and 100×100.

screenshot

Customization

If you want to tweak the options that you’re presented with, hit up the settings for that package. On a Mac, these are found under Sublime Text 2 > Preferences > Package Settings, Placehold.it > Settings.

screenshot

When you open that file, you’ll see this chunk of code:

{
    "ph_bgcolor": "0eafff",
    "ph_textcolor": "ffffff",
    "ph_size": "600x400",
    "ph_default_sizes": "600x400, 200x200, 800x600, 100x100",
    "ph_format": ".png",
    "ph_text": "",
    "ph_localimages": true,
    "ph_imagepath": "images/"
}

This allows you to change every little aspect of how the image snippets work. You can add extra options to the custom size list, change the colors used in the image or even add in custom text. Once you made changes here, restart Sublime Text 2 just to be sure they take effect.

Other Placeholder Content Generators

Now that we’ve walked through the basic process of installing, using and customizing a Sublime Text 2 Package, we can apply this knowledge when we take a look at other packages. Follow the same basic steps to get up and running with these other great placeholder content generators.

Dummy Image

If you prefer the “Dummy Image” service over Placehold.it, there’s a nearly identical package that uses that site instead. In the install section of the Command Palette, search for “dummy” and you should find it. One thing that I like about this one over Placehold.it is that the custom size option allows you to type in any value that you want rather than choosing from a limited list.

Placeholders

This package essentially tosses a bunch of pieces of code into your Snippets menu. Install it the same way as the others, then type what you want to insert and hit the Tab key (list of options here).

This package includes all kinds of options for both text and HTML. Not only can you use it to generate fully stocked elements like forms and navigation menus, you can also access a ton of options for inserting plain old lorem ipsum text.

screenshot

Hipster Ipsum

If you’re looking for some humor-driven lorem ipsum, look no further than the Hipster Ipsum package. Once installed, type out the number of paragraphs that you want to insert, select that number, then hit Control+Alt+H and you’ll get placeholder text that you’ll swear is straight out of an episode of Portlandia.

screenshot

If you’re into funny lorem ipsum generators, check out this post, which contains thirty awesome variations: everything from bacon ipsum to gangsta ipsum.

What Are Your Favorite Sublime Text Packages?

There are so many awesome packages and add-ons available for Sublime Text 2 that it’s easy to overlook a few gems such as those that we checked out above. If you know of any awesome packages, leave a comment below and let me know.

Comments & Discussion

Subscribe

Membership
About the Author