Make WordPress image link to large image instead of full

Okay, so you have WordPress setup to display all of your images using your favorite lightbox-inspired image viewer.  Now the only problem is that WordPress only gives you the option to link the image to the post, or link the image to the full file.  In order to link to the large file size—which is what you ultimately want—you must manually edit the HTML inserted into your post.  Unacceptable!

I set out to find a simple plugin, to no avail.  I figured I wasn’t the first person to come across this issue.  Since I couldn’t find exactly what I was looking for, it was time to write a custom function.

I dug around some of the core files and determined the code I wanted to change was the admin function image_link_input_fields(), located under wp-admin/includes/media.php.  I wanted the default URL to be the large image, and possibly while maintaining the ability to choose None, Original File, or Post.

Modifying the core file is not advisable, since you would have to re-apply changes every time you update WordPress.  Filters to the rescue!

The Solution

Here’s my solution.  Simply add this to your theme’s functions.php file:

add_filter('attachment_fields_to_edit',  'large_attachment_fields_to_edit', 0,  2);function large_attachment_fields_to_edit($fields, $post){        if (substr($post->post_mime_type,0,5) == 'image'){                $html = "<input type='text' class='text urlfield' name='attachments[$post->ID][url]' value='" . esc_attr(array_shift( wp_get_attachment_image_src($post->ID, 'large', false) )) . "' /><br />                                <button type='button' class='button urlnone' title=''>" . __('None') . "</button>                                <button type='button' class='button urlfile' title='".esc_attr(array_shift( wp_get_attachment_image_src($post->ID, 'large', false) ))."'>Large File URL</button>                                <button type='button' class='button urlfile' title='" . esc_attr(wp_get_attachment_url($post->ID)) . "'>" . __('Original File URL') . "</button>                                <button type='button' class='button urlpost' title='" . esc_attr(get_attachment_link($post->ID)) . "'>" . __('Post URL') . "</button>";                $fields['url']['html'] = $html;        }        return $fields;}

This will set the default URL for images to be the large image size, instead of the full image size.  It also adds buttons for None, Large File URL, Original File URL (full), and Post URL.

How it works

Basically, the only useful hook I could find was attachment_fields_to_edit.  It would allow me to modify the HTML generated on the “Add an Image” admin screen, right before the user inserts the image into the post.  Since I only wanted to change the URL field, I replaced $fields[‘url’][‘html’] completely.

The first part is the input field itself.  I wanted to set the default value to the large image.  I used wp_get_attachment_image_src() to pull the URL for the large image.

<input type='text' class='text urlfield' name='attachments[$post->ID][url]' value='" . esc_attr(array_shift( wp_get_attachment_image_src($post->ID, 'large', false) )) . "' />

Next, I simply copied some code from the WordPress core file to re-add the default buttons, along with another one for the large image.

30 comments
  1. Jonathan said:

    This is perfect, thanks!Do you know if it’s possible to get the same buttons on the popup that appears when editing already inserted images? Right now in WordPress 3.1.2 it says: "None, Current Link, Link to Image". I’d rather it say "None, Current Link, Link to Large Image, Link to Full Image".

  2. Anonymous said:

    Jeff, this is a fine filter! Does it also change the link in a gallery to link to the large file size instead of the original? If so, that would be very helpful.

  3. Jeff skop said:

    i added the function per your instructions below, and then i do see the buttons show up under the gallery tab and default to large size. I then saved all on the gallery, changed to link to file and then inserted gallery; however, the image still appears as full size instead of large. Is this because i had previously created this same gallery without the new filter?

  4. Jeff skop said:

    BTW, I am very surprised that this filter you created isn’t getting more attention….this is a huge improvement from previous functionality….how are people posting lightbox image galleries that look correct if gallery images are 3000×2000 or something around there…most phone cameras and digital cameras output at very high resolutions now and you would think wordpress would be very advanced for handling images but IS NOT…blows me away how many features wordpress has but the core elements of posting blogs and images is so rudimentary. anyways, i agree with the other 2 posts requests above mine….can you please respond to those requests? if you can write something to accommodate these requests, i think you have something glaringly missing from the core wordpress functionality.

  5. Andrew said:

    this is brilliant – cheers for sharing

  6. Peter said:

    Brilliant – thanks very much for this.

  7. Shawn said:

    Worked brilliantly.. exactly what I was looking for.. You might wanna check up on your meta tags tho… weirdest set of google search words I’ve ever had to use.

  8. Rune K M said:

    Brilliant! Thanks!

  9. andrewgtibbetts said:

    So simple and so perfect. Thanks!

  10. Alexander Tegelid said:

    Thank you so much! I thought I’d have to go trough hell to get this fixed, but then I found this page. Excellent!

  11. dumpark said:

    Awesome! However it seems like WordPress now (i am running 3.4.1)requires the "data-link-url" instead of the "title" button attribute:function large_attachment_fields_to_edit($fields, $post){ if (substr($post->post_mime_type,0,5) == ‘image’){ //$html = "<input type=’text’ class=’text urlfield’ name=’attachments[$post->ID][url]’ value=’" . esc_attr( $url) . "’ /><br /> $html = "<input type=’text’ class=’text urlfield’ name=’attachments[$post->ID][url]’ value=’" . esc_attr(array_shift( wp_get_attachment_image_src($post->ID, ‘gallery’, false) )) . "’ /><br /> <button type=’button’ class=’button urlnone’ data-link-url=”>" . __(‘None’) . "</button> <button type=’button’ class=’button urlfile’ data-link-url=’".esc_attr(array_shift( wp_get_attachment_image_src($post->ID, ‘large’, false) ))."’>Large Image</button> <button type=’button’ class=’button urlfile’ data-link-url=’" . esc_attr(wp_get_attachment_url($post->ID)) . "’>" . __(‘Original Image’) . "</button>

    "; $fields[‘url’][‘html’] = $html; } return $fields;}

  12. dumpark said:

    sorry meant to be … button type=’button’ class=’button urlfile’ data-link-url= …

  13. Doug said:

    Yes, I confirm that you need to change the title=" to data-link-url=" to make the javascript work with the latest, 3.4.1 wordpress. So, there is 4 items to change in the script above.

  14. Angelo said:

    I have the same problem. The images in the gallery link to the gigantic full sized version of the images. This Code snippet and the ‘fixed’ version in the comments fail to work with WordPress version 3.4.2.

  15. doug said:

    bah, code didnt post correct. just replace the ‘titles’ like i said in my first comment. still works in 3.4.2

  16. doug said:

    works in 3.4.2:add_filter(‘attachment_fields_to_edit’, ‘large_attachment_fields_to_edit’, 0, 2);function large_attachment_fields_to_edit($fields, $post){ if (substr($post->post_mime_type,0,5) == ‘image’){ $html = "<input type=’text’ class=’text urlfield’ name=’attachments[$post->ID][url]’ value=’" . esc_attr(array_shift( wp_get_attachment_image_src($post->ID, ‘large’, false) )) . "’ /><br /> <button type=’button’ class=’button urlnone’ data-link-url=”>" . __(‘None’) . "</button> <button type=’button’ class=’button urllarge’ data-link-url=’".esc_attr(array_shift( wp_get_attachment_image_src($post->ID, ‘large’, false) ))."’>Large File URL</button> <button type=’button’ class=’button urlfile’ data-link-url=’" . esc_attr(wp_get_attachment_url($post->ID)) . "’>" . __(‘Original File URL’) . "</button> <button type=’button’ class=’button urlpost’ data-link-url=’" . esc_attr(get_attachment_link($post->ID)) . "’>" . __(‘Post URL’) . "</button>

    "; $fields[‘url’][‘html’] = $html; } return $fields;}

  17. Angelo said:

    <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> </head> <body bgcolor="#FFFFFF" text="#000000"> <div class="moz-cite-prefix">The code gives me this error.<br> <br> <img src="cid:part1.01080905.01060401@vizow.com" alt=""><br> <br></div></body></html>

  18. Angelo said:

    I don’t think you will fix your code because you know it doesn’t work. Reference to vague fixes and typing out emails that take more effort than fixing your code is evidence. <br/> <br/>My statement still stands, your code is bunk. <br/> <br/>Angelo

  19. doug said:

    Hey, just cuz youre a fucking dumb-ass doesnt mean the code doesnt work. The code works and is working in several sites and I even went to the trouble of upgrading a site to 3.4.2 to make sure. So, you can take the time to re read the thread, get some knowledge or you can take your shitty attitude and shove it right up your fat ass.

  20. Angelo said:

    <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> </head> <body bgcolor="#FFFFFF" text="#000000"> <div class="moz-cite-prefix">First of all.. the code you wrote doesn’t work and the code version in your comments doesn’t work. You need to test it on themes… maybe more than several.?? <br> <br> good luck, you’ll need it.<br> <br> <br> <br></div></body></html>

  21. Jeff skop said:

    for some reason I'm getting emails on this thread. At one point i used Lundberg's script since it provided a solution that wordpress did not have. As a rule, the comments that I've read in the past few days have been rude and disrespectful. for those of us who have used his script, we thank you. if it does not work for you, then i'm sure jeff appreciates feedback but you are not??guaranteed??compatibility…and if you can do better, then do it yourself but insulting someone who is doing something for free is just wrong and you have to ask yourself if you are really contributing anything useful in life if all you can do is throw insults. take a deep breadth, apologize and move forward.

  22. Angelo said:

    It works. good job 🙂

  23. Ian Hoar said:

    Thanks for the great tutorial. I added the data-link-url instead of title and it works great.

  24. Paul said:

    Angelo… you’re such a rude idiot! I hate people like you! Thanks all for the help, the data-link-url change worked a treat, Paul

  25. Angelo said:

    The code didn’t work for me. Perhaps it’s because of my theme. In an effort to save the post I lied and said the plugin worked when it really never did for me. Ultimately, I never resorted to calling people names like some did. Hey… I was just honest and sometims the truth hurts, don’t take it personal.

  26. Alex said:

    Thanx alot for tip! It works great in 3.2 but I’ve upgraded to 3.5 and there is different upload manager. Any way to solve it?

  27. doug said:

    No, it doesnt work in 3.5. I have spent a bit of time trying to fix it for 3.5, to no avail. The new managers are way more javascripty ajaxy. I have put off upgrading my sites to 3.5 untill I can get around to some more in depth trouble shooting. I will post on this thread when (cuz i will, eventually) I figure it out.

  28. Alex said:

    Thanx alot for effort!

  29. truyen sex said:

    wordpress 3.5.1

  30. Nick said:

    This worked perfectly. Thanks for the post!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: