Czy chcesz utworzyć dodatkowe rozmiary obrazków w WordPress?
Za każdym razem, gdy przesyłasz obrazek, WordPress automatycznie tworzy kilka kopii tego obrazka w różnych rozmiarach. Niektóre motywy i wtyczki WordPress również tworzą własne kopie w różnych rozmiarach.
W tym artykule pokażemy ci, jak łatwo utworzyć dodatkowe rozmiary obrazków w WordPressie i wykorzystać je na twojej witrynie internetowej.
Po co tworzyć dodatkowe rozmiary obrazków w WordPress?
Zazwyczaj popularne motywy i wtyczki WordPress automatycznie tworzą dodatkowe rozmiary obrazków. Na przykład, twój motyw może tworzyć różne rozmiary do wykorzystania jako miniaturki na stronach archiwum lub własnej stronie głównej.
Czasami jednak obrazki te mogą nie spełniać idealnie twoich wymagań. Na przykład, możesz chcieć użyć różnych rozmiarów obrazków w motywie potomnym lub układzie siatki.
Aby to zrobić, musisz utworzyć dodatkowe rozmiary obrazków w WordPressie, a następnie wywołać odpowiedni obrazek, gdy go potrzebujesz.
Mając to na uwadze, przyjrzyjmy się, jak utworzyć dodatkowe rozmiary obrazków w WordPress.
Rejestrowanie dodatkowych rozmiarów obrazków dla twojego motywu
Większość motywów WordPress obsługuje wyróżniające się obrazki, znane również jako miniaturki wpisów.
Jeśli jednak tworzysz własny motyw WordPress, musisz dodać obsługę wyróżniających się obrazków, dodając następujący kod do pliku functions.php twojego motywu:
add_theme_support( 'post-thumbnails' );
Po dodaniu obsługi miniaturek wpisów można zarejestrować dodatkowe rozmiary obrazków za pomocą funkcji add_image_size().
Funkcja add_image_size będzie używana w następującym formacie:
add_image_size( 'name-of-size', width, height, crop mode );
Oto kilka przykładów tego, jak może wyglądać pełna funkcja:
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
Tutaj określiliśmy trzy różne rozmiary obrazków. Każdy z nich ma różne tryby, takie jak twarde przycinanie, miękkie przycinanie i nieograniczona wysokość.
Przyjrzyjmy się, jak możesz wykorzystać każdy z tych trybów na twoim blogu lub witrynie internetowej WordPress.
1. Tryb twardego kadrowania
W powyższym przykładzie użyliśmy wartości „true” po wysokości. Mówi to WordPressowi, aby przyciął obrazek do dokładnie zdefiniowanego przez nas rozmiaru, który w tym przypadku wynosi 120px na 120px.
Funkcja ta automatycznie przycina obrazek z boków lub z góry i z dołu, w zależności od rozmiaru. W ten sposób możesz upewnić się, że wszystkie twoje obrazki są proporcjonalne i wyglądają dobrze na twojej witrynie internetowej WordPress.
2. Tryb miękkiego przycinania
Jak widać w naszym przykładzie miękkiego przycinania, nie dodaliśmy wartości „true” po wysokości:
add_image_size( 'homepage-thumb', 220, 180 );
Dzieje się tak, ponieważ tryb miękkiego przycinania jest domyślnie włączony.
Miękkie kadrowanie zmienia rozmiar obrazka proporcjonalnie, bez zniekształcania go, więc możesz nie uzyskać dokładnych wymiarów. Zazwyczaj miękkie kadrowanie dopasowuje wymiary szerokości, ale wymiary wysokości mogą być różne w zależności od proporcji każdego obrazka.
Oto przykład tego, jak może to wyglądać:
3. Tryb nieograniczonej wysokości
Czasami możesz mieć długie obrazki, które chcesz wykorzystać na swojej witrynie internetowej, jednocześnie ograniczając ich szerokość. Na przykład, mogłeś stworzyć infografikę dla twojej biznesowej witryny internetowej. Infografiki są zwykle bardzo długie i zazwyczaj szersze niż szerokość treści.
Tryb nieograniczonej wysokości pozwala określić szerokość, która nie zepsuje twojego układu, bez ograniczania wysokości.
Wyświetlanie dodatkowych rozmiarów obrazków w twoim motywie WordPress
Po dodaniu większej liczby rozmiarów obrazków do twojej witryny internetowej, nadszedł czas, aby wyświetlić je w twoim motywie WordPress.
Po prostu otwórz plik motywu, w którym chcesz użyć innego rozmiaru obrazka, a następnie dodaj następujący kod wewnątrz pętli wpisu:
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
Możesz dodać trochę stylizacji, aby obrazek idealnie pasował do reszty twojej witryny. Jest to jednak wszystko, czego potrzebujesz, aby wyświetlać dodatkowe rozmiary obrazków w twoim motywie.
Regenerowanie dodatkowych rozmiarów obrazków
Funkcja add_image_size() tworzy dodatkowe rozmiary tylko po przesłaniu nowego obrazka. Oznacza to, że wszystkie obrazki przesłane przed utworzeniem funkcji add_image_size() nie będą miały nowych rozmiarów.
Aby poprawić ten problem, musisz zregenerować miniaturki swojej witryny internetowej WordPress za pomocą Perfect Images. Wtyczka ta zregeneruje twoje wyróżniające się obrazki, obrazy Retina i zaktualizuje metadane mediów.
Najpierw należy zainstalować i włączyć wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.
Po włączaniu przejdź do Media „ Perfect Images. Perfect Images przeskanuje teraz twoją bibliotekę multimediów WordPress, więc może być konieczne odczekanie kilku chwil na zakończenie.
Po zakończeniu otwórz menu rozwijane, które domyślnie pokazuje „Działania zbiorcze”, a następnie wybierz „Regeneruj wszystkie wpisy”.
Perfect Images zregeneruje teraz wszystkie twoje miniaturki.
Więcej informacji na ten temat można znaleźć w naszym artykule na temat łatwej regeneracji nowych rozmiarów obrazków.
Włączanie dodatkowych rozmiarów obrazków dla treści twojego wpisu
Mimo dodania kilku nowych rozmiarów obrazków, obecnie można ich używać tylko w motywie WordPress, a nie w treści wpisów.
Aby udostępnić te nowe rozmiary w edytorze treści WordPress, musisz dodać następujący kod do pliku functions.php twojego motywu:
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' );
Nie zapomnij zapisać swoich zmian po dodaniu kodu.
Teraz, po przesłaniu obrazu do WordPressa, wszystkie konfiguratory będą widoczne w sekcji „Rozmiar obrazka”. Możesz teraz zmienić rozmiar obrazka podczas pracy nad dowolną stroną lub wpisem.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak tworzyć dodatkowe rozmiary obrazków w WordPress. Zachęcamy również do zapoznania się z naszą ekspercką listą najlepszych wtyczek WordPress do Instagrama oraz przewodnikiem na temat wyboru najlepszego oprogramowania do projektowania stron internetowych.
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/
Administrator
B Toro says
Very simple and helpfull
WPBeginner Support says
Glad our guide was helpful
Administrator
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()Administrator
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.
Administrator
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.