Varje gång du uploadar en image skapar WordPress automatiskt flera kopior av den bilden i olika storlekar. Your WordPress themes and plugins may also create their own copies at various sizes, but sometimes these defaults are not quite what you’re looking for.
Kanske är de för stora och saktar ner din website, eller kanske är de för små och tappar sin effekt. På WPBeginner vet vi hur viktigt det är med beautiful images som passar din website perfekt.
Med detta sagt visar vi dig i den här artikeln hur du enkelt kan skapa ytterligare storlekar på images i WordPress och använda dem på din website.
Varför skapa ytterligare storlekar på images i WordPress?
Vanligtvis skapar populära themes och tillägg till WordPress ytterligare storlekar på images automatiskt. Till exempel kan ditt theme skapa olika storlekar för att använda som thumbnails på dina archive pages eller custom home page.
Men ibland kanske dessa images inte helt uppfyller yours obligatoriska krav. Du kanske till exempel vill använda olika storlekar på images i ett barntema eller i en grid layout.
För att göra detta måste du skapa ytterligare bildstorlekar i WordPress och sedan anropa rätt image när du behöver den.
Med detta i åtanke, låt oss ta en titt på hur du skapar ytterligare storlekar på images i WordPress.
Registrering av ytterligare storlekar på images för your Theme
De flesta teman i WordPress stöder featured images, även kända som inläggsminiatyrer.
Men om du skapar ett custom WordPress-tema måste du lägga till stöd för utvalda bilder genom att lägga till följande kod i temats functions.php-fil:
add_theme_support( 'post-thumbnails' );
När du har lagt till support för inläggsminiatyrer kan du registrera ytterligare storlekar på bilderna med funktionen add_image_size().
Du kommer att använda funktionen add_image_size i följande format:
add_image_size( 'name-of-size', width, height, crop mode );
Här är några exempel på hur den fullständiga funktionen kan se ut:
add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
Här har vi angett tre olika storlekar på WordPress-images. Var och en har olika lägen som hård crop, mjuk crop och obegränsad höjd.
Låt oss titta på hur du kan använda varje läge på din egen blogg eller website i WordPress.
1. Hårt läge för crop
I exemplet ovan använde vi ett ”true”-värde efter höjden. Detta säger till WordPress att cropa imagen till den exakta storlek vi definierade, vilket är 120px x 120px i det här fallet.
Den här funktionen cropar bilden automatiskt antingen från sidorna eller från högst upp och längst ner beroende på storlek. På så sätt kan du se till att alla dina images är proportionerliga och ser bra ut på din WordPress website.
2. Mjukt läge för crop
Som you kan se i vårt exempel med mjuk crop har vi inte add to ett ”sant” värde efter höjden:
add_image_size( 'homepage-thumb', 220, 180 );
Detta beror på att soft cropping-läget är aktiverat som standard.
Soft cropping resizes the image proportionally without distorting it, så det är inte säkert att du får exakt de dimensioner du vill ha. Vanligtvis matchar soft crop bredddimensionerna, men höjddimensionerna kan vara olika beroende på varje images proportion.
Här är ett exempel på hur det kan se ut:
3. Obegränsad höjdläge
Ibland kan du ha långa images som du vill använda på din website, samtidigt som du limitar deras bredd. You kanske till exempel har skapat en infografik för your business website. Infografik tenderar att vara mycket lång och vanligtvis bredare än bredden på innehållet.
Unlimited height mode allows you to ange a width that won’t break your layout, without limiting the height.
Displaying additional image sizes in your WordPress theme
När du har addat fler storlekar på images till din website är det dags att visa dem i ditt WordPress theme.
Öppna helt enkelt filen i temat där du vill använda en annan storlek på image och add to följande kod i postens loop:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
You may want to add some styling so the image perfectly fits with the rest of your site. Detta är dock all du behöver för att visa ytterligare storlekar på images i ditt theme.
Återskapa ytterligare storlekar på images
Funktionen add_image_size() skapar bara extra storlekar när du uploadar en new image. Detta innebär att alla images som du har uploadat innan du skapade add_image_size()-funktionen inte kommer att ha de nya storlekarna.
För att fixa detta problem måste du återskapa din WordPress-webbplats thumbnails med hjälp av Perfect Images. Detta plugin kommer att återskapa dina featured images, retina images, och update dina media metadata.
Först måste du installera och aktivera pluginet. Om du behöver hjälp kan du vänligen läsa vår guide om hur du installerar ett plugin för WordPress.
Efter aktivering, gå till Media ” Perfect Images. Perfect Images kommer nu att skanna ditt mediabibliotek WordPress så du kan behöva vänta en stund tills det är slutfört.
När den är slutförd öppnar du dropdown-menyn som visar ”Bulk Actions” som standard och väljer sedan ”Återskapa alla Entrys”.
Perfect Images kommer nu att återskapa alla dina thumbnails.
För mer information om detta ämne, vänligen se vår artikel om hur du enkelt återskapar nya storlekar på images.
Aktivera ytterligare storlekar på images för innehållet i dina posts
Även om du har lagt till några new image-storlekar kan du för närvarande bara använda dem i WordPress theme, och ej i postens content.
För att göra dessa nya storlekar tillgängliga i WordPress content editor, måste du add to följande kod till ditt temas functions.php-fil:
function wpb_custom_image_sizes( $size_names ) {
$new_sizes = array(
'homepage-thumb' => 'Homepage Thumbmail',
'singlepost-thumb' => 'Infographic Single Post'
);
return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );
Glöm inte att save dina ändringar efter att du har lagt till koden.
När du nu uploadar en image till WordPress kommer du att se all customize-storlekar under ”Image size”. Du kan nu ändra storleken på imagen när du arbetar på en page eller post.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ytterligare storlekar på images i WordPress. Du kanske också vill se vårt expertval av de bästa WordPress-tilläggen för att hantera images, eller se vår guide om hur man bulk-resize stora bilder.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Thanks for the tutorial, I’m trying to do the same thing using another tutorial but it didn’t work. This works perfectly.
axel says
That was easy, thanx.
Something harder:
How do i get rid of old, unused thumbnail sizes?
(best without a plugin)
Kind regards
axel
WPBeginner Support says
We cover how you can remove the unused image sizes in our article below:
https://www.wpbeginner.com/wp-tutorials/how-to-prevent-wordpress-from-generating-image-sizes/
We recommend plugins to simplify the process, if you’re worried about the number of plugins on your site, we would recommend taking a look at our article below:
https://wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Administratör
B Toro says
Very simple and helpfull
WPBeginner Support says
Glad our guide was helpful
Administratör
JKLYN says
Quite helpful tutorial. But how to set class for image??
Kim says
Thanks WPBeginner, this worked a treat!
Thiago says
Hi,
Great article! However, I still do not understand the usefulness of hard crop tool; I uploaded an image with 306×165, and after that I created two custom sizes: 256×148 (Soft Crop) and 256×148 (Hard Crop), however, as you can see in this print taken from the post: [http://prnt.sc/eromp3] both Options remain the same. I created a file in Photoshop containing 256×148 and I dragged the original image without resizing anything, and the result you can see in example 4 of the image above. So, my question is this: should image 2 not look like the image generated by Photoshop?
Follows below the code used on functions.php:
//Soft Crop used in example 2
if ( function_exists( ’add_image_size’ ) ) {
add_image_size( ’new-size8’, 256, 148 );
}
add_filter(’image_size_names_choose’, ’my_image_sizes8’);
function my_image_sizes8($sizes) {
$addsizes = array(
”new-size8” => __( ”New Size8”)
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}
////Hard Crop used in example 3
if ( function_exists( ’add_image_size’ ) ) {
add_image_size( ’new-size9’, 256, 148, true, array( ’center’, ’center’ ) ); //(cropped)
}
add_filter(’image_size_names_choose’, ’my_image_sizes9’);
function my_image_sizes9($sizes) {
$addsizes = array(
”new-size9” => __( ”New Size9”)
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}
Thanks in advance!
Kevin says
This works great, but on thing that always bothers me is that if someone uploads an image that is smaller than one of your cropped sized then that image will not be created, which ruins the layout if you wanted equal height images
Matt Rock says
Struggling with the same issue, Kevin (uploading smaller image does not create cropped size). I understand why this might make sense (system will not produce unnecessary images), but a low/poor resolution would look better than an ill-cropped one…
gonza says
Thanks for the info
you help me so much!
Sakshi says
I write this code can.
Actually i want to set the post thumbnail size for the banner image.Which i was uploading through featured image in the background please suggest me.
Aakash says
Hi,
I m new in wordpress,and accept i have many problems,and the first is,i created lot of post in wordpress,suppose A B C D,and when i update this in my website they look like first is D and then c and then b and then a means when i upload first they are show in last.if any solution that first they look in series not DCBA like ABCD…plz help
Daniel Knoflicek says
awsome… so helpfull for a lot of gallery plugins…
Lavinia Manzanarez says
Excellent! I read the use of this function on the Codex of WordPress but sometimes I need a step by step thing, thank you!
WPBeginner Staff says
Yes it is possible.
Farmer John says
I too want to do the same as Ali Rohan wants to do. can you kindly elaborate pleas.. ’coz i tried to implement the method explained by you but could not succeed. I can’t understand where I am doing wrong. How do I link the text of resolution to image file?
Ali Rohan says
Thanks for nice article.
I wanna start a wallpapers website in wordpress so is it possible that when i upload one big wallpaper then it auto resized to many resolutions for users. For example when i upload 1920×1280 wallpaper then it must be resized to 1024×768, 800×600 etc resolution … so users can easily view and download desired size wallpaper ?
Aayush says
Hi Dear. i need your urgent help. i have a problem with the images size. actually i am using a plugin WP Gallery Custom Links. i have uploaded lot of images in a post but every images has a different height and width so they are appearing with different different sizes. i want to set them with the same size which i want to set. please tell me any idea to solve this problem.
Here says
I just needed to say thanks for saying this. You’re right on.|
Shoaib says
Excellent explanation
Andrew says
I’ve set this up and it’s working splendidly minus the suggestion MIKE LITTLE made above – the thumbnail is changed and it shows up that way in the backend in the media gallery – but on the frontend where my loop is – the image thumb is still what WP defaults to – i’ve even run REGEN THUMBS and it still doesn’t fix the issue – anyone else having this problem or know the fix???
WPBeginner Support says
Look at your loop and use
<?php the_post_thumbnail('your-specified-image-size'); ?>instead ofthe_post_thumbnail()Administratör
Tomasz says
Nice tutorial!
Please check out the plugin which allows to manually crop the registered image sizes:
http://wordpress.org/plugins/manual-image-crop
WPBeginner Support says
Thanks, looks like a nice plugin. We will look into it.
Administratör
Marc C says
Good tutorial – many thanks WPBEGINNER.
I too was having the problem of not being able to crop the new registered image sizes but the plugin posted by TOMASZ does the job nicely – thanks TOMASZ!
Robbe Clerckx says
Still helpfull after all this time :). Thank you.
Danny says
Thank you for this very clear and helpful tutorial. It saved me a lot of time since the WP documentation is very cryptic.
lydia karanja says
I have a wordpress account but I did not know how to manage it but now I know all thanks to this tutorial, thank you very much for helping people understand more on how to create and manage their websites.
andy19at says
@jezThomp Great if your images work
jezThomp says
@andy19at Link…?
andy19at says
@jezThomp A link? I didn’t post it cos it didn’t work.
jezThomp says
@andy19at http://t.co/YvmiX9hR
mikelittle says
You say: ”The downside of hard cropping is that you cannot control which part of the image is displayed.” Not true.
When you have uploaded an image and before you insert into post, you can click on ’edit image’ and from there change the thumbnail or the whole image, scale, rotate, or flip the image , and for the thumbnail select the exact portion of the image you want.
wpbeginner says
@mikelittle Thanks for the correction Mike. Just edited the article
clelandillustration says
I can’s seem to get the custom crop to work for new image sizes. The custom crop will work for the default ”thumbnail” size version, but that crop won’t apply to new image sizes. It seems the crop is still uncontrollable for custom image sizes.
Brent Norris says
good insight into the edit flow…
TdGon says
Good article ..and photos to go along with it too…nice. I saw in a few places how to do this but they did not explain it as well as you do here. I am off to try it out.
Thanks a lot ! (0.o)
PaulDeWoutersd'Oplinter says
excellent explanation for a confusing topic. and very useful plugin
mssbee says
Great tutorial! Thanks for explaining the different crop options. It really helped me to understand how they work.
tjhakan says
Nice tutorial. good job
defries says
Nice round up of what can be done with just the default featured image feature. One extra tip: you can also set the width of your content area as a featured image and define that same width in Settings > Media. This way you can select a featured image to use in your theme and it will be automatically the maximum size of the content area.
Also great having those values in there for <a href=”http://codex.wordpress.org/Embeds”>oEmbed</a>.
Ordinary Randomness says
Thanks for this tutorial, I was wondering why sometimes I had images that were not cropping to the size I had coded.