Czy ciągle przełączasz się między WordPressem a edytorem zdjęć, aby przekonwertować obrazy do skali szarości przed ich przesłaniem? Edytowanie każdego zdjęcia indywidualnie z góry jest żmudnym i nieefektywnym procesem.
Na szczęście, dzięki wieloletnim eksperymentom z WordPressem, odkryliśmy prosty sposób na automatyczne skalowanie obrazów podczas przesyłania, co oszczędza cenny czas.
W tym artykule pokażemy Ci, jak przekształcić obrazy w skali szarości w WordPressie podczas ich przesyłania na Twoją stronę, krok po kroku.
Kiedy należy używać obrazów w skali szarości w WordPressie?
Obrazy w skali szarości usuwają wszystkie informacje o kolorze, pozostawiając kolory obrazu, aby pokazać tylko odcienie szarości, wariujące między czernią a bielą.
W pewnych sytuacjach używanie obrazów w skali szarości może być korzystne dla Twojej witryny WordPress. Na przykład, możesz jej użyć, aby poprawić czytelność obiektów pokazanych na obrazie.
Lub po prostu możesz chcieć użyć obrazów w skali szarości, aby nadać swojej witrynie ponadczasowy, klasyczny wygląd.
Z drugiej strony, obrazy w skali szarości są również powszechnie używane do przetwarzania obrazów ze względu na ich niewielki rozmiar. Pozwala to programistom na wykonywanie złożonych operacji w krótszym czasie.
Mając to na uwadze, zobaczmy, jak możesz konwertować swoje obrazy do skali szarości w WordPressie podczas ich przesyłania.
Skalowanie obrazów do skali szarości podczas przesyłania w WordPressie
Jeśli chodzi o dodawanie obrazów w WordPressie, musiałbyś je edytować przed przesłaniem za pomocą oprogramowania do edycji zdjęć, takiego jak Photoshop, i konwertować kolorowe zdjęcia do skali szarości.
Jeśli masz setki lub tysiące obrazów do przesłania, edycja każdego obrazu ręcznie może zająć dużo czasu. edytować każdy obraz ręcznie.
Możesz jednak automatycznie przekształcać je w obrazy w skali szarości po przesłaniu. Aby zacząć, wystarczy dodać następujący kod do pliku functions.php swojego motywu:
add_filter('wp_generate_attachment_metadata','rb_bw_filter');
function rb_bw_filter($meta) {
$path = wp_upload_dir(); // get upload directory
$file = $path['basedir'].'/'.$meta['file']; // Get full size image
$files[] = $file; // Set up an array of image size urls
foreach ($meta['sizes'] as $size) {
$files[] = $path['path'].'/'.$size['file'];
}
foreach ($files as $file) { // iterate through each image size
// Convert image to grayscale credit to http://ottopress.com/2011/customizing-wordpress-images/
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
}
return $meta;
}
Prosty sposób na dodawanie kodu do plików motywu to użycie wtyczki WPCode dla WordPressa.
To najlepsza wtyczka do fragmentów kodu, która pomaga uruchamiać fragmenty kodu bez konieczności ręcznej edycji pliku functions.php motywu. W ten sposób nie musisz się martwić o zepsucie swojej strony.
Najpierw musisz pobrać i zainstalować darmową wtyczkę WPCode na swojej stronie. Jeśli potrzebujesz pomocy, postępuj zgodnie z naszym przewodnikiem jak zainstalować wtyczkę WordPress.
Uwaga: Darmowa wersja WPCode oferuje wszystko, czego potrzebujesz, aby łatwo dodawać niestandardowy kod w WordPressie. Aby uzyskać bardziej zaawansowane funkcje, takie jak prywatna biblioteka fragmentów w chmurze, zaplanowane fragmenty, piksele konwersji i inne, możesz przejść na WPCode Pro.
Po aktywacji możesz przejść do Fragmenty kodu » + Dodaj nowy z panelu administracyjnego WordPressa.
Następnie przejdź do opcji „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment”.
Następnie musisz wybrać „PHP Snippet” jako typ kodu z wyświetlonych opcji.
Teraz, na stronie Utwórz niestandardowy fragment, wprowadź nazwę dla swojego fragmentu. Może to być cokolwiek, co pomoże Ci zapamiętać, do czego służy kod.
Następnie wklej powyższy kod w obszarze „Podgląd kodu”.
Po wprowadzeniu kodu możesz przewinąć w dół do sekcji „Wstawianie”.
Tutaj możesz pozostawić zaznaczoną opcję „Automatyczne wstawianie”. Spowoduje to automatyczne wstawienie i wykonanie kodu.
Na koniec wróć na górę ekranu i przełącz przełącznik z pozycji „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment”.
Następnie możesz przetestować kod, edytując lub dodając nową stronę. Będąc w edytorze WordPress, kliknij przycisk „+” i dodaj blok Obraz.
Teraz możesz przesłać dowolny obraz na swojego bloga WordPress, a zostanie on automatycznie przekonwertowany na obraz w skali szarości.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak konwertować obrazy do skali szarości w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania trybu ciemnego do swojej witryny WordPress oraz naszymi ekspertyzami dotyczącymi najlepszego oprogramowania do projektowania stron internetowych.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Tomas Kapler
Świetna wskazówka, chciałbym tylko wspomnieć, że w wielu zastosowaniach lepiej jest po prostu zrobić to za pomocą filtru CSS, np.
img.bw {
filter: grayscale(1);
}
można nawet np. domyślnie pokazywać czarno-białe, a kolorowe po najechaniu myszką, lub można zrobić animację od skali szarości do pełnego koloru i z powrotem, np.
img.bw {
filter: grayscale(0);
}
img.bw.grey { filter: grayscale(1); transition-property: filter; transition-duration: 1s; }
Nie sądzę również, że filtr wp_generate_attachment_metadata jest właściwy, ponieważ jest wywoływany przy tworzeniu metadanych, a nie tylko przy tworzeniu obrazu, i wykonuje drugą manipulację obrazem, ale właściwe rozwiązanie byłoby znacznie dłuższe, więc rozumiem, dlaczego tak to jest zrobione.
rok
Działa dobrze, ale podczas przesyłania WP 4.3 zgłasza błąd w bibliotece mediów.
Myślę, że zastosowałem wszystkie poprawki napisane w komentarzach, ale nadal występuje błąd.
mój kod wygląda tak:
add_filter(‘wp_generate_attachment_metadata’,’themename_bw_filter’);
function themename_bw_filter($meta) {
$time = substr( $meta[‘file’], 0, 7); // <- pobierz prawidłowy czas przesłania
$file = wp_upload_dir( $time ); // <- zlokalizuj prawidłowy katalog przesłania
$file = trailingslashit($file[‘path’]).$meta['sizes']['slide-pic']['file'];
if( $file ) {
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
}
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
return $meta;
}
Kim
Czy to zmieni wszystkie zdjęcia w WordPressie na skalę szarości, czy tylko te nowo dodane?
Tomaž Zaman
Wiem, że trochę się spóźniam z dyskusją, ale miałem właśnie ten sam problem z błędem (o którym informują inni):
imagefilter() oczekuje zasobu jako parametru 1, otrzymano ciąg znakówDzieje się tak, gdy próbujesz przesłać obraz za pomocą okna multimediów podczas edycji posta starszego niż bieżący miesiąc, co najwyraźniej myli WordPressa co do tego, w którym katalogu znajduje się oryginalny obraz i w którym katalogu powinien zapisać obraz w skali szarości.
Oto rozwiązanie:
<?php
add_filter('wp_generate_attachment_metadata','themename_bw_filter');
function themename_bw_filter($meta) {
$time = substr( $meta['file'], 0, 7); // <- pobierz prawidłowy czas przesłania
$file = wp_upload_dir( $time ); // <- zlokalizuj prawidłowy katalog przesłania
$file = trailingslashit($file['path']).$meta['sizes']['themename-bw-image']['file'];
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
return $meta;
}
endul
jak zmienić, wynikowy filtr obrazu do określonego folderu/katalogu
geertvdheide
Jedno uzupełnienie: dodałem kilka linii, aby obejść problem posiadania dwóch obrazów o tej samej nazwie pliku, spowodowany dwoma wywołaniami add_image_size z tym samym rozmiarem. Dodatkowy kod znaleziono tutaj:
http://bavotasan.com/2011/create-black-white-thumbnail-wordpress/
mklemme
@geertvdheide
Jeśli chcesz dodać obsługę wielu rozmiarów, spróbuj tego, czego ja używam:
if ( function_exists( ‘add_theme_support’ ) ){
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 50, 50, true );
add_image_size( ‘medium-thumb’, 660, ”, true );
add_image_size( ‘large-thumb’, 960, ”, true );
add_image_size( ‘small-thumb’, 100, ”, true );
}
(Wysokość nie jest zdefiniowana, tylko szerokość.)
musiałbyś dodać różne nazwy, aby funkcja miała zastosowanie do wszystkich z nich:
[‘medium-thumb’ , ‘large-thumb’ , ‘small-thumb’] w kodzie filtru.
Wywołanie miniatury w Twoim motywie jest takie samo, jak wymienione w artykule:
Mike Logan
Doskonały pomysł, prawie 10 lat później jest to nadal przydatne.
geertvdheide
Dzięki za udostępnienie tego kodu! Z wyjątkiem tego, że napotykam dziwny problem podczas próby jego wdrożenia. Dotyczy on rozmiaru przesłanego obrazu (rozmiar w pikselach, czyli jego wymiary). Skopiowałem kod dosłownie do pliku functions.php mojego motywu i działa świetnie z obrazami większymi niż rozmiar określony w wywołaniu add_image_size. Ale przy użyciu obrazu mniejszego lub równego określonemu rozmiarowi, program do przesyłania w WordPressie zgłasza błędy i nie przetwarza rozmiaru obrazu (ani z sekcji mediów w środowisku administracyjnym, ani z konkretnego posta lub strony). Błąd:
Ostrzeżenie: imagefilter() oczekuje parametru 1 typu resource, a otrzymano string.
Ssome other stuff in the error as well, but this seems to be the main cause. The image data given to the imagefilter function must not be valid or doesn’t exist?
Masz pomysł, co może być przyczyną? Jedyna prawdziwa różnica między moją sytuacją a czystą instalacją jest taka, że dodałem również kilka innych wywołań add_image_size do innych celów na mojej stronie. Dodaję również ten sam rozmiar dwukrotnie (jeden czarno-biały, jeden zwykły), ale to nie wydaje się być problemem z większymi obrazami.
Ed Nailor
@GEERTVDHEIDE
i dla innych, którzy tego potrzebują:
Kiedy skrypt konwertuje obraz do skali szarości, a przesłany plik nie spełnia wymagań dotyczących rozmiaru pliku, powoduje to awarię skryptu. Aby temu zapobiec, wystarczy dodać szybki warunek if(), aby upewnić się, że masz $file.
$file = trailingslashit($file[‘path’]).$meta[‘sizes’][‘themename-bw-image’][‘file’];
if( $file ) {
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
——– remainder of code until ——–
return $meta;
}
Sprawdzi to, czy żądany rozmiar pliku istnieje, zanim spróbuje go przekonwertować.
Mam nadzieję, że to pomoże!
frankiegershwin
@Otto42 Dziękuję za propozycję. Zrobię to.
Otto42
@frankiegershwin szkoda! Śmiało napisz do mnie bezpośrednio, jeśli potrzebujesz pomocy z kodem. otto@wordpress.org
frankiegershwin
@Otto42 thank you! I had a bit of a hard time, actually and had to undoe it
will pick it up tomorrow. It’s a good way to mix it up onsite
Otto42
@frankiegershwin Daj znać, jeśli potrzebujesz pomocy. Dodałem też sposób na sepię w moich komentarzach do oryginalnego posta: http://t.co/avDNNEX
rodhk
@rodriguezhernan vaya idiotez de truco…. madremua tocar el codigo para eso
wpbeginner
@Otto Thanks for the comment Otto. Updated the post as well
Otto
Pamiętaj, że ludzie powinni zmienić „nazwatemat” na nazwę swojego motywu.