Przyjazne dla użytkownika przycinanie miniatur postów?

32

Czy istnieje sposób, aby umożliwić moim użytkownikom zdefiniowanie obszaru kadrowania miniatury postu? Miniatury zawsze są istniejącymi załącznikami postów, wolałbym nie tworzyć dodatkowego załącznika dla miniatury.

Miniatury postów powinny mieć wymiary 200 x 100 pikseli i powinny pochodzić z jednego z obrazów użytych w poście. Tak więc w moim idealnym świecie po kliknięciu łącza „Ustaw wyróżniony obraz” uzyskuje się przegląd już dołączonych obrazów, a po kliknięciu jednego z nich można samodzielnie zdefiniować obszar przycinania (przenoszenie lub zmianę rozmiaru, ale zachowanie współczynnik kształtu 2x1). Po kliknięciu przycisku „OK” nowa miniatura postu jest zapisywana z oryginalnym załącznikiem ( _wp_attachment_metadata['sizes']['post-thumbnail']na przykład w polu metadanych), a nie jako nowy załącznik. Używanie obrazu, który jest już używany jako miniatura posta dla innego postu, nie powinno być dozwolone, a przynajmniej ostrzegać.

Uważam, że dołączony edytor obrazów nie będzie odpowiadał moim potrzebom, ponieważ możesz edytować wszystkie wersje obrazu lub zwykłą miniaturę, ale nie tylko miniaturę postu. Trochę kłopotliwe jest też wiedzieć, które wersje edytuję, więc myślę, że moi użytkownicy będą mieli z tym jeszcze więcej problemów.

Czy istnieje wtyczka, która robi to, co chcę, lub którą mogę z łatwością rozszerzyć na moje potrzeby?

Aktualizacja: przykładowy interfejs użytkownika

Naprawdę podoba mi się interfejs selektora obrazów Książki adresowej Mac OS X: wybierasz obraz i zmieniasz rozmiar miniaturowego narzędzia do przycinania miniatur za pomocą suwaka. Możesz także przeciągnąć obraz podstawowy. Możesz rozwinąć ten pomysł do wielu rozmiarów obrazu (mam na przykład post-thumbnaili post-thumbnail-1/2to o połowę mniejszy rozmiar). Pozwól użytkownikowi wybrać rozmiary, które teraz edytuje, za pomocą pól wyboru i narysuj odpowiednie prostokąty kadrowania na ekranie.

Narzędzie do przycinania obrazu z książki adresowej w akcji

plugin-recommendation images post-thumbnails Jan Fabry
źródło
1
@Jan Fabry - Mój pierwszy płatny projekt WordPress był wtyczką do przycinania obrazów, zanim przycinanie pojawiło się w WordPress. Różniło się to znacznie od tego, o co prosisz, w przeciwnym razie podałbym to jako odpowiedź. Ale to, czego chcesz, nie powinno być trudne do napisania, jeśli masz motywację ...
MikeSchinkel,
1
@Mike: Widziałem to raz na twojej stronie i miałem nadzieję, że gdzieś będzie dostępna. Nawet jeśli nie odznacza wszystkich elementów mojej (obszernej) listy życzeń, może zapewnić dobry początek.
Jan Fabry
@ Mike - Byłbym również bardzo zainteresowany, aby przejrzeć każdy kod, który mogłeś utworzyć lub zmodyfikować w związku z kadrowaniem obrazu. Desperacko szukałem dodania jcrop do niestandardowego metaboksu, który pozwoliłby na dodawanie i kadrowanie zdjęć przy jednoczesnym korzystaniu z wbudowanej galerii multimediów wordpress.
NetConstructor.com
Hej @Jan Fabry i @ NetConstructor.com - właśnie przejrzałem kod, a ponieważ była to moja pierwsza wtyczka do WP, jestem zbyt zawstydzony, aby ją wydać, jest tak źle. Chciałbym pracować nad nowszym rozwiązaniem do wydania tutaj, ale to może chwilę potrwać ...
MikeSchinkel,
Nie wstydź się, Mike, starszy kod zawsze jest zły w oczach autora. To tylko postęp :). @Jan - w twoim przykładzie interfejsu użytkownika wydaje mi się, że rozmiar miniatury postu jest jakoś wstępnie zdefiniowany. Czy możesz powiedzieć coś więcej na ten temat?
hakre

Odpowiedzi:

11

Kod nadal jest bałaganem, ale wydaje się, że działa, nawet w IE 8. Planuję wypuścić go w repozytorium, ale w międzyczasie możesz grać z moją bieżącą wersją . Aby uzyskać do niego dostęp, klikasz „Edytuj obraz” podczas dodawania lub edycji obrazu, zastępuje on zwykły edytor obrazów (bardzo trudno je połączyć). Ponieważ większość obszaru administracyjnego używa zwykłej miniatury, a moja bieżąca wersja edytuje miniaturę postu, może się wydawać, że kod nie ma żadnego efektu, ale wypróbuj go, wyświetlając miniaturę postu i powinieneś zobaczyć, jak się zmienia.

Ta wtyczka wymaga mojego programu Image Resizer Image Resizer , który nadal jest bałaganem, aby dokonać rzeczywistej zmiany rozmiaru.

Przykładowy obraz w maszynie

Jan Fabry
źródło
kod jest już gotowy do wydania? może to github? Zamierzam zintegrować taką funkcjonalność z moim kotłem
łagodny Fuzz
Jestem również bardzo zainteresowany tym, co / jak to zrobiłeś! Udostępnij kod. Czy Twój kod działa przy użyciu domyślnej biblioteki multimediów Wordpress i czy pozwala na utworzenie prostego metaboksu na ekranie edycji postów, w którym możesz wywołać określony obraz ORAZ skopiować go tylko dla określonego rozmiaru, który utworzyłeś, np. „New_thumb” zgodnie z definicją poprzez coś takiego jak add_image_size ('new_thumb', 200, 100, true) ;? Idealną sytuacją byłoby posiadanie czegoś takiego jak twórca obrazu nagłówka z możliwością zmiany każdego zdefiniowanego rozmiaru obrazu w oparciu o indywidualne metaboksy dla każdego zdefiniowanego rozmiaru.
NetConstructor.com,
@JanFabry wydałeś już ten kod jako wtyczkę? Chciałbym polecić go komuś, kto potrzebuje tej funkcjonalności!
Chip Bennett
@ jan-fabry Jak poszła ta funkcja? Jakieś sukcesy?
Steven
4

Najlepszym rozwiązaniem jest użycie przycięcia obrazu opartego na javascript, a następnie php w połączeniu z ImageMagick lub Image GD.

Musiałby zostać zapisany w twoich funkcjach lub jako wtyczka, ponieważ nie znam od razu żadnych gotowych wtyczek wordpress, co jest zaskakujące.

Istnieje przycięcie obrazu YUI z opcją zapisu opartą na php http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Oto inny samouczek na temat używania jquery cropper z php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

Trzecia opcja bardzo podobna do powyższego linku z użyciem tego samego narzędzia do przekierowywania, ale innego kodu. http://www.leonkessler.com/blog/?p=132

Oto inny z użyciem jcrop jquery zamiast: http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Kto jest gotowy na nową wtyczkę, to z pewnością będzie popularne :)

Wyck
źródło
W rdzeniu Wordpress znajduje się już kod przycinania obrazu (HTML, JS i PHP). Myślę, że dobra wtyczka użyłaby go ponownie. Mówiąc tak, nie jest to koniecznością. Masz rację, że przykładowy interfejs użytkownika narysowany przez Jana potrzebuje czegoś takiego.
hakre
@hakre, ostatnim połączonym z Wyckiem jest jcrop, który został zintegrowany z wp wp w wersji 2.8 . Pamiętam, że wtedy o tym czytałem, ale nie mogę znaleźć w repozytorium żadnej innej informacji o tym, że jest używana, oprócz jednej wtyczki, która przez wszystkie konta jest zepsuta.
mat
@matt: jeśli został zintegrowany z rdzeniem (nie znam wszystkich szczegółów na temat interfejsu użytkownika przycinania w rdzeniu, który tam jest), zakładam, że jest on używany do funkcji interfejsu obrazu podstawowego. Ta funkcja nie jest dostępna przez cały czas, ale tylko wtedy, gdy dostępne są określone biblioteki obrazów PHP lub systemowe. Przepraszam, że jestem tak niespecyficzny, ale po prostu nie wdrożyłem do tej pory rdzenia. Ale wiem, że jest jeden;)
hakre
1

Zakładając, że dodałeś już obsługę miniatur postów, gdy mówisz o opcji „Polecane zdjęcie”.

Jeśli tak, jedną z dostępnych opcji jest dodanie nowego rozmiaru obrazu do tablicy przesyłania. Tak więc domyślnie masz miniaturę, średnią, dużą. W poniższym fragmencie kodu dodaje to czwarty obraz do tego asortymentu, w zależności od pożądanego rozmiaru. Ten fragment kodu zostałby dodany do pliku functions.php.

add_image_size( 'new_thumb', 200, 100, true );

„new-thumb” = nazwa nowego niestandardowego obrazu
„200” = szerokość
„100” = wysokość
„true” = opcja twardego przycinania. Wymusi to przycięcie obrazu do zdefiniowanej szerokości / wysokości. Bez tego po prostu skaluje się do proporcji.

Teraz, aby wyświetlić nową miniaturę na tablicy strony lub postu, wstawisz następujące elementy do kodu HTML

<?php the_post_thumbnail('new_thumb'); ?>

źródło
@cnix: Dzięki za tę odpowiedź, ale nie tego szukam. Chcę, aby użytkownik określił obszar, który powinien zostać przycięty, a nie ja jako projektant strony. Tak więc obszar może się różnić w zależności od obrazu.
Jan Fabry
1

Możesz użyć CSS, aby mieć dużą elastyczność, naprawić miniaturki w swoim motywie (jeśli chcesz) i uniknąć bałaganu plików:

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Pamiętaj, że cały obraz zostanie załadowany, więc nie używaj do tego swoich 3 MB oryginałów.

Zaktualizuj zgodnie z żądaniem stycznia: jeśli chcesz dynamicznego obcinania, rozważ:

  • Dla user = administrator utwórz CSS przez PHP; możesz po prostu połączyć się z php, który czyta odpowiednie ustawienia i odpowiednio dostosować parametry przycinania.
  • W przypadku użytkownika = gość użyj JavaScript, aby zmienić parametry przycinania w atrybucie stylu obrazu.
  • Jako mniej inwazyjne rozwiązanie rozważ utworzenie krótkiego kodu (za pomocą świetnej wtyczki Shortcode Exec PHP), na przykład [thumb w = ?? h = ??] url [/ thumb], który możesz przetłumaczyć na odpowiedni tag HTML za pomocą wbudowanego CSS.
Raphael
źródło
Rzeczywiście, możesz przycinać za pomocą CSS, aby uniknąć wielu rozmiarów, ale w jaki sposób pozwoliłbyś użytkownikowi (autorowi postu) zdefiniować obszar przycinania, który powinien zostać wyświetlony?
Jan Fabry,
Zobacz zmiany powyżej.
Raphael,
Dzięki za wyjaśnienie. Zakłada się, że użytkownik zna lokalizacje pikseli żądanego obszaru uprawy? W rzeczywistości szukam bardziej graficznego sposobu (jak obecny edytor obrazów, ale ukierunkowany na publikowanie miniaturek, a nie zwykłych miniatur).
Jan Fabry,
Mam nadzieję, że zamierzasz być wtyczką, a nie jakimś hackowaniem. Możesz podać domyślne opcje, które w większości przypadków powinny wystarczyć: narożniki, środek, wyśrodkowany na krawędziach i tak dalej (wszystkie łatwe do obliczenia). Powstrzymałbym się od oferowania darmowego wkładu, ponieważ ludzie mogą źle zepsuć przepływ witryny, jeśli wejdą w bzdury. Zapewnienie graficznego definiowania klipów (patrz implementacja Zenphoto) jest w porządku, ale zasady korzystania z wartości, niezależnie od tego, jak otrzymano, pozostają takie same; musisz tylko zbudować GUI. Nie mogę ci w tym pomóc.
Raphael,
1

Wierzę, że szukasz tego: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Nie wypróbowałem tego, ale powinno ono zaoferować funkcjonalność, której szukasz.

Oryginalna strona wtyczki tutaj. http://wordpress.org/extend/plugins/scissors/

Potrzebuję tego również do projektu, nad którym pracuję.

tomcat23
źródło
Dzieki za sugestie. Patrzyłem na nożyczki (i wiedziałem, że ktoś uaktualnił go do wersji 3.0), ale myślę, że jest on zbyt elastyczny na to, czego chcę: musi przycinacz, który będzie przycinał do określonego rozmiaru. Nożyczki mogą zrobić znacznie więcej i dlatego mogą mylić moich użytkowników końcowych.
Jan Fabry
1

Myślę, że najlepszym rozwiązaniem tego problemu byłaby modyfikacja wtyczki z http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

i dostosuj go tak, aby wszelkie niestandardowe rozmiary obrazów zdefiniowane w pliku functions.php (za pomocą add_image_size( 'new_thumb', 200, 100, true );) automatycznie zostały użyte, a następnie uzyskaj kod zastępujący (lub rozszerzający) link „edytuj”, gdy chcesz zmodyfikować obraz.

Korzystając z tego podejścia, wordpress może nadal tworzyć odpowiednie rozmiary obrazów, jak zwykle, ale jeśli chcesz specjalnie zmodyfikować przycięty obszar dowolnego określonego obrazu, możesz to zrobić, co z kolei zastąpiłoby automatycznie generowany obraz dla tego rozmiaru. Hmmm ... chociaż to znowu mylące czytanie, to dokładnie to, czego według mnie brakuje.

Obecnie uważam, że wtyczka zapisuje te niestandardowe rozmiary obrazów w niestandardowym polu wewnątrz postu zamiast postu dla odpowiedniego obrazu.

NetConstructor.com
źródło