Create A Simple Image Widget Easily

Today is Part 2 of How to Create Your Own Dashboard Widget. You’ll learn how to create a widget that will display an image. In a few steps, you’ll have your very own widget. This tutorial is a little bit more advanced than creating a widget with Safari, but still doable.

REQUIRED: You’ll need a PNG image for this tutorial. Resize the image so it will look good with your other widgets. We’re going to create a widget that will display this image in the dashboard.

Follow along carefully and be ready to try something new… Let’s get started!

Create a New Folder on Your Desktop

From the file menu, click “New Folder.” This will create a new folder on your desktop.

Rename the Folder

Rename the folder to: Image Widget.wdgt – then press the return key.

Click “Add” in the Pop-Up

You’ll be asked to confirm the new name of the folder. Click “Add” when you see this message.

Widget Icon Created!

Notice the folder has changed into a Dashboard Widget Icon – that’s what we want! Great job so far

Select the Image Widget.wdgt

Click on you Image Widget.wdgt once to select it.

Get Info

With the Image Widget.wdgt selected, go to “File” and then select “Get Info”

Hide The “.wdgt” Extension

In the Name & Extension section, check the box next to “Hide Extension” Then close the Info window.

Show The Widget Contents

Hold down the “Control” key on your keyboard and click the Image Widget. This will bring up a menu where you should select “Show Package Contents.”

Keep The Folder Open

Now the folder “Image Widget” should be open as shown above. Keep this folder open so you can drag & drop files into it.

Rename Your Image

Change the file name of your image to: Default.png

Drag The Default.png Into The “Image Widget” Window

Drag the Default.png image into the Image Widget folder.

Open TextEdit

Open TextEdit so we can create a required file for the Widget.

Change The TextEdit Format

Now that TextEdit is open, we have to change the format of the document so it will work with our Widget. In the Format menu, select “Make Plain Text”

Start Typing!

Copy the code below and paste into your TextEdit document:

<?xmlversion=“1.0″encoding=“UTF-8″?>
<!DOCTYPE plist PUBLIC“-//Apple//DTD PLIST 1.0//EN” “http://www.apple.com/DTDs/PropertyList-1.0.dtd”>
<plistversion=“1.0″>
<dict>
<key>AllowNetworkAccess</key>
<false/>
<key>CFBundleDevelopmentRegion</key>
<string>English</string>
<key>CFBundleDisplayName</key>
<string>ImageWidget</string>
<key>CFBundleIdentifier</key>
<string>com.my.widget.Untitled</string>
<key>CFBundleName</key>
<string>ImageWidget</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>MainHTML</key>
<string>index.html</string>
</dict>
</plist>

Save The Document As: Info.plist

In the File menu, select “Save As…” In the next screen type the name as: Info.plist

Warning!

You’ll see this warning. Click “Use .plist”

Drag Info.plist Into The Image Widget Folder

Now drag the Info.plist file into the Image Widget folder.

Create A New TextEdit File

Go back to TextEdit and open a new file. Click the File menu, then select New

Change The TextEdit Format Again

In the Format menu, select “Make Plain Text”

Type The Image Code

Type this code in the TextEdit document: <img src=Default.png>

Save As…

Select File, then Save As…

Save As Index.html

Type index.html into the Save As field

Warning!

Click Use .html

Drag The index.html File Into The Image Widget Folder

Drag the index.html file into the Image Widget folder

Double Check Your Files!

You should have 3 files in your Image Widget folder. They are:

1. Default.png

2. index.html

3. Info.plist

If you’re missing any of the files, now is the time to go back and create them.

Launch Your Widget!

If you’ve got all the files – and followed all the steps – you can now launch your widget! Just double click the Image Widget on your desktop!

Warning!

When you double click the Image Widget, you’ll get this pop-up window. Click Install to see your widget in action!

Last Step!

Now you’ll be asked to Keep or Delete your new Image Widget! Click Keep and you’re done! Ta-Dah!