Image: How to Format and Add an Image to the Track Player

Added in version 1.0.2

Note: You can now specify a default image that will show up every time you add a track player to your site. See this article to learn how to do that.

Ever since our friend John Lee Dumas from the Entrepreneur On Fire podcast updated his website, we’ve had a ton of requests for how to add images to the Smart Track Player. This video will walk you through the steps to manually add an image in to your player’s shortcode. It’s not hard, but you do need to follow the steps in order.

How to Format and Add an Image to the Smart Track Player

First, build your shortcode using the shortcode builder. If you need help with this, follow the steps in our Getting Started video on how to use the Smart Track Player shortcode builder.

Part One: Upload and Crop the Image

To add in an image, you first need to upload the image into your media library. You may already have your podcast logo uploaded into your library, but I’m going to ask you to upload it again. The reason I need you to upload it again is because we need to size this image way down—you don’t want to do that with your site's existing logo. This is important—if you were to size down an existing image that is being used elsewhere on your size, you’ll mess up the way that image appears everywhere else.

To upload the image:

  1. In the left-hand column of your WordPress panel, open the WordPress Media Library. If you want to keep the page editor open, right-click and open the Media Library in a new tab.
  2. Click on Add New and select your file. 
  3. After you’ve uploaded the file, come over to the right here and click on Edit more details
  4. This will take you to the Edit Media page. Underneath the image, click on Edit Image.

In here, you can edit your image size. For the track player, we need an image size of 80 x 80 pixels. 

To scale down the image:

  1. If your image is already square, you can adjust the size in the Scale Image section. 
  2. Reset these numbers to 80 by 80, then hit Save
  3. After hitting Save, hit the Update button.

If your image is not square, you’re going to need to crop it. 

To crop a rectangular image (this can get tricky—follow along with the video):

  1. Draw a box around the part of the image you want to use. 
  2. Over in the Image Crop section, make sure the two numbers in Selection are the same, which gives you a square image.
  3. In Aspect Ratio boxes enter 1:1.
  4. Once you have the square selection over the part of the image you want to use, click the Crop button. 
  5. Click Save.
  6. Click Edit Image.
  7. Adjust the Scale Image numbers to 80 by 80, then hit Save
  8. After hitting Save, hit the Update button.

Part Two: Add the Image URL to the Shortcode

Now that you've edited the image, copy the image URL. Above the Update button, you’ll see the File URL. Highlight this long string and copy it. Now, return to your page or post editor and find your track player shortcode.

Place your cursor inside the shortcode's closing bracket, just after the last attribute (such as color="green"). Hit the space bar so that there is one space following the last string of text inside the shortcode. Now, add the following into your shortcode:

image="http://example.com/image.jpg"

where http://example.com/image.jpg is the file URL that you copied from the Media Library.

Click Preview Changes and you should find that you have an image added in to your track player. If everything looks right, go back to your editor and click the Update button.

Troubleshooting Mistakes

What if your image looks wrong or you don’t see an image at all? Here are three common mistakes that you may have made.

The Image Is Giant

You may find that the image is much larger than the track player. This happens when the image has not been properly cropped. Open up that image in the Media Library and scale it down to 80 x 80 pixels.

Missing Space Between Attributes

If you added the image URL to the shortcode but it doesn't show up, take a closer look at your shortcode. You may be missing a space between attributes. Make sure that each attribute (such as color="green") is separated by a space.

Missing Quotation Marks Around the URL

After you've confirmed that you have a space between each attribute, check the shortcode to make sure you have quotation marks around the file URL. The proper format is as follows:

image="http://example.com/image.jpg"

If the quotation marks are missing, the image will not show up in the player.

Still need help? Contact Us Contact Us