How to Link to Your Original High Quality Photos in WordPress

March 17, 2014 12:22pm

Say you’ve got a beautiful new poster that you’re trying to get distributed around the web. Your original file is 1500px x 2750px and comes in at around 15MB or so, but you don’t want to force people to download that file just to show a preview of it on your site.

Luckily, WordPress takes care of this type of thing for you automatically.

First things first, get your original file ready and waiting on your desktop somewhere, and go into the Post editor.

1. Click Add Media above the content editor box.
2. The Insert Media dialogue box will appear. You can drag and drop the file from your desktop right into that big white box there, or Upload Files and then Select Files to browse your machine and find the original file.
3. Once the file has uploaded, you’ll see a screen similar to this:
4. Note that near the bottom right you’ve got a few options available via dropdown menus. Look for the Link to and Size options, which are the relevant ones for this tutorial.
5. When you upload an image to WordPress, it automatically creates several smaller versions of the image. These can be set and changed in the Settings > Media area of your site (though note that if you’re a client of ClickNathan.com I set these sizes up for you, they’re probably set to what they need to be in order to make everything pretty on your site). In the Size dropdown, you’ll see the available sizes that your image was uploaded as. Original is the actual size of the file you uploaded, and then a few others will exist. Choose one that works well for what you’re trying to do. For example, Large if you want the image to still be big on the screen, or Thumbnail if you just want a small picture people can click to download the full-sized image.
6. Next, in the Link to dropdown, choose Media File. This will link the smaller image to the original.
7. Click Insert into Post and you’re all set.

What if I Want to Open the Large Image in a New Window?

With the instructions above, the original file will be opened in the same window/tab that your link was on, which you may not want and your users may not like either. If you’d like to force this image to open in a new window, find the code that was inserted into the post. To do this, go to the Text tab of the content editor, and look for some code like this:

Add the following highlighted code:

So you’re just adding target="_blank" to the <a href"..."> portion of the code. Don’t change anything else, particularly the src and href bits.

And there you have it!

Up Next: WordPress 101: How to Make Links in WordPress Open in a New Window