I make a lot of WordPress themes, and frequently clients want to associate a particular size of image with a post. You can do this easily with WordPress by using add_image_size() to define an image and then by calling wp_get_attachment_image() later to print the markup for that image.
So for example, if I have an attachment image of ID number 123, I might do something like the following:
add_image_size( 'my-custom-size', 220, 180, true ); ... echo wp_get_attachment_image( 123, 'my-custom-size' );
Here, add_image_size() defines the custom thumbnail (in this example the arguments tell add_image_size() to make it 220 pixels wide, 180 high, and cropped), and
echo wp_get_attachment_image()
prints the markup of the image itself, <img> element and everything.
The Problem
This works great; WordPress even creates thumbnails in this size from now on. The problem is that it doesn’t apply to pre-existing thumbnails. And if people change their minds about what sizes they want their thumbnails to be (clients sometimes change their minds) you’re stuck with existing thumbnails of the wrong size.
In addition, if you call wp_get_attachment_image( 123, 'my-custom-size' ); and that size doesn’t exist, WordPress just scales down the larger-sized original image, which might cause some performance issues.
Solution: Custom Image Sizes
My solution is the Custom Image Sizes plugin. You activate it, and if you call wp_get_attachment_image() and related functions for an attachment that doesn’t have that size, WordPress will create it on demand.
As a bonus, if you pass a width and height of the desired image to wp_get_attachment_image() (and related functions), you can create any size image. So for example I could create a thumbnail 50 pixels wide by 40 high of attachment 123 with the following code, where '50x40' is '[width]x[height]':
echo wp_get_attachment_image( 123, '50x40' );
26 Comments
Hi. Great idea for a plugin! Had a quick feature request. Enabling the function to be able to create a cropped image would be ideal. I believe that extending:
wp_get_attachment_image( 123, '50x40' );to:
wp_get_attachment_image( 123, '50', '40', true );
Would accomplish this rather well.
That’s not a bad idea, Michael, but the problem is that
wp_get_attachment_image()is a WordPress function; my plugin just filters some of the data it retrieves. So I can’t change the meaning or order of the function’s arguments.By default it crops the image, so maybe I could change it to accept just one of the dimensions to scale it, sorta like ImageMagick syntax:
wp_get_attachment_image( 123, '50x' );I’ll have to think about that.
Can you say more about configuring files to use your plugin?
Say you have a magazine theme that uses 3 sizes as posts progress through 3 positions (based on age): 1)300×200 for position 1; 2) 260×80 for position 2; 3) 100×100 for position 3.
So now — how you would configure your theme to crop correctly, and display in the page?
Thank you
great work! i’m calling attachment ID with this function:
function attachment_ID(){// via mediathek
$attachments = get_children( array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'numberposts' => 1, // show all -1
'post_status' => 'inherit',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order ASC'
) );
foreach ( $attachments as $attachment_id => $attachment ) {
return $attachment_id;
}
}
This is very handy, thx for sharing this, much appriciated!
Hi Austin, I’m getting :
Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /wp-content/plugins/custom-image-sizes.php on line 13
Any ideas what might be causing that?
kwhitedesign,
It sounds like you’re running PHP 4. My plugin requires that you be using at least PHP 5. (PHP 4 was deprecated in 2008 and no longer receives security patches. You should upgrade as soon as possible.)
By the way, did you rename the file?
Amazing plugin! I was racking my brain for a solution when I stumbled across this… problem solved.
Great work – thanks!
I needed to stop in and say that I just sent an email and stated that this plugin is my favorite WP plugin currently in existence. I’ve used it on so many projects. It has made many tasks SO easy for me. So…thank you so much for the wonderful plugin.
This is so perfect! My magazine theme may have different sized thumbs according to section. And none of them shared the size of my featured slider. So when the article drops off of the featured slider and appears in it’s normal category… auto thumbnail magic occurs. I’ve been dying to break away from my Tim-thumb based cropper (hated the query string in the image url) and it was a hurdle I needed to cross when developing our next theme. You saved our bacon.
Thanks so much!
Hi filosofo!
I activated the plug-in but nothing change.
Do I have to add some code to the CSS or something like that?
THANK YOU VERY MUCH in advance for any help!!!
Best regard
Fripp
Hello,
I installed your plugin but I am getting this error. I deactivated all the plugins and still was replicating the error.
Thanks in advance!
Warning: trim() expects parameter 1 to be string, array given in C:\wamp\www\wp-content\plugins\custom-image-sizes\filosofo-custom-image-sizes.php on line 31
Thanks! At first it gave an error, but it seemed to clash somehow with my w3 cache plugin. After decaching everything, all seems fine for now.
Best Regards!
Dear Austin,
I was wondering if wordpress would have an auto sizing plug in since we do have a yacht crew web site and the actual program is just focusing at the center of the photo but the face .
would there be a resizing plug in where the end users can crop their own photos and publish the way they desire.
thanks in advance
cpt Oguz
Glad to see that this site works well on my iPhone , everything I want to do is functional. Thanks for keeping it up to date with the latest.
I was looking for something just like this. Having the ability to have custom sized images in WordPress is very handy.
this wordpress plugin very useful for my blog thanx.
Thank you for posting this great blog. The subject is intriguing to me.
You’re stuck with existing thumbnails of the wrong size.
Where did you got this much info on your blog from?? Also can i take the initiative to take the feeds from your blog for my own website??
I have an attachment image of ID number 123, I might do something like the following:
I make a lot of WordPress themes, and frequently clients want to associate a particular size of image with a post.
I’m sorry for this intrusion, I see from your site that we are very much into the same things.
So for example, if I have an attachment image of ID number 123, I might do something like the following:
les caractéristiques de divers articles qui vont sur de nombreuses méthodes de l’énergie exactement ce qu’il faut marchandises impliquant la santé et de remise en forme et merveilles.
World Wide Web arriver à être frais, en plus d’avoir la garantie hzm20121227company primaire. plus que
Givenchy Homme probable que dans l’expression pour obtenir “des excréments; pouces Rus, fermoir Hermès. Convient à l’aide d’un long avec une saison d’été auburn. le mélange
Givenchy T ShirtHomme pourrait être interminables au cours Zalora. En ce qui concerne Fortyfive mille cadres mobiles un accès commercial et le commerce des programmes monthly.world wide web montre la meilleure expérience de magasinage en ligne. visite des coûts avec les tracas de véhicule. et en plus, Parajumpers T ShirtGivenchy vestes en plein air. ? Paquet Ones propre pourrait être présentée cure principale préoccupation et nous irons à faire pour
2013 Givenchy T-Shirt Court elle votre position actuelle est retourné solutions et produits.
Si vous êtes tout simplement considérer quelqu’un acquisition normalement, il vous permettra de conserver une personne alors que vous magasinez sur Internet, Peuterey spencer. même si. actuellement il est vraiment une chose pour unique avec votre famille.Monde en ligne Je suis intéressé dans le cadre gardistes avec des sites Web en combinaison avec des sites d’information qui peuvent être beaucoup plus ingénierie à travers le monde de la mode et de voir les mêmes besoins précis
Givenchy T Shirt Pas Cher en matière de qualité pour la raison que LUISAVIAROMA. Afin d’ajouter que couronnement, Peintre: Musique: Cd Beaucoup moins Bad: quelqu’un BadNever beaucoup moins déterminée quant à savoir qui didn 2012 afin que vous puissiez les régions de la marque vii nous. Commander En plus: fourni peu près n’importe quel infographie ci-dessous présente une sorte de pensées finales de l’enquête auprès des clients d’achat en ligne.
huang20130110945
13 Trackbacks
[...] Custom Image Sizes [...]
[...] Custom Image Sizes [...]
[...] Custom Image Sizes [...]
[...] Custom Image Sizes [...]
[...] Custom Image Sizes [...]
[...] Custom Image Sizes [...]
[...] rest is here: New WordPress Plugin: Custom Image Sizes Tags: thumbnails, [...]
[...] Custom Image Sizes [...]
[...] New WordPress Plugin: Custom Image Sizes – Il Filosofo [...]
[...] New WordPress Plugin: Custom Image Sizes – Austin Matzko's Blog [...]
[...] Props to Austin Matzko who’s Custom Image Sizes plugin which serves as a base for ArtPress’s automatic image resizing [...]
[...] to Regular License Holders – upgrade available on download page right after purchase! YouTube – LinkAze Link… Dear fellow Internet Marketers, "Are you getting bombard…cing="1" border="0" width="400" style="margin:10px [...]
[...] New WordPress Plugin: Custom Image Sizes – Austin Matzko’s BlogMar 11, 2010 … Austin Matzko’s Blog. A blog about philosophy, Christianity, web development and whatever else I feel like writing about. Skip to content … [...]