Küçük resimlerin kullanıcı dostu bir şekilde kırpılması?


32

Kullanıcılarımın bir yazı küçük resminin kırpma alanını tanımlamasına izin vermenin bir yolu var mı? Küçük resimler her zaman ekler halindedir, küçük resim başına ek bir ek oluşturmak istemem.

Küçük resimler 200x100 piksel olmalı ve yayında kullanılan görüntülerden birinden gelmelidir. Bu yüzden, ideal dünyamda "Sunulan Resmi Ayarla" bağlantısını tıkladığınızda, önceden dahil edilmiş resimlere genel bir bakış elde edersiniz ve bunlardan birine tıkladığınızda, kırpma alanını kendiniz tanımlayabilirsiniz (taşıyarak veya yeniden boyutlandırarak, ancak 2x1 en boy oranı). "Tamam" ı tıklattığınızda, yeni yayın minik resmi, _wp_attachment_metadata['sizes']['post-thumbnail']yeni ek olarak değil , orijinal ekle (örneğin meta veri alanına) kaydedilir. Başka bir gönderi için zaten küçük resim olarak kullanılan bir resmin kullanılmasına izin verilmemeli veya en azından bir uyarı verilmelidir.

Eklenen resim düzenleyicinin ihtiyaçlarıma uygun olmayacağına inanıyorum, çünkü görüntünün tüm sürümlerini veya normal minik resmi düzenlemeyi seçebilirsiniz, ancak yalnızca post minik resmi değil. Ayrıca hangi sürümleri düzenlediğimi bilmek biraz kafa karıştırıcı buluyorum, bu nedenle kullanıcılarımın daha fazla sorun yaşayacağını düşünüyorum.

İstediğimi yapan veya ihtiyaçlarımı kolayca karşılayabileceğim bir eklenti var mı?

Güncelleme: Örnek UI

Mac OS X Adres Defteri görüntü seçicisinin arabirimini çok beğendim: bir görüntü seçip kaydırıcı aracılığıyla sabit oranlı bir küçük resim kırpıcısını yeniden boyutlandırıyorsunuz. Temel görüntüyü etrafına da sürükleyebilirsiniz. Birden resim boyutları bu fikri genişletebilirsiniz (Ben var post-thumbnailve post-thumbnail-1/2bu örneğin yarısı büyüklüğünde). Kullanıcının şu anda düzenlediği boyutları onay kutularıyla seçmesine izin verin ve ekranda uygun kırpma dikdörtgenlerini çizin.

Adres Defteri resmi kırpıcı çalışıyor


1
@Jan Fabry - İlk ödeme yapan WordPress projem, kırpmadan önce WordPress'e gelmeden önce görüntüleri kırpmak için kullanılan bir eklentiydi. İstediğinden çok farklıydı, yoksa cevap olarak eklerdim. Fakat motive iseniz, ne yazmak istediğinizi yazmak çok zor olmamalı ...
MikeSchinkel

1
@Mike: Bir keresinde web sitenizde gördüm ve bir yerlerde kullanılabilir olacağını umuyordum. (Kapsamlı) istek listemin tüm öğelerini işaretlemese bile, iyi bir başlangıç ​​sağlayabilir.
Jan Fabry,

@Mike - Resim kırpmayla ilgili olarak oluşturduğunuz veya değiştirdiğiniz tüm kodları da incelemek isterim. Umutsuzca, dahili wordpress medya galerisini kullanırken görüntü eklemeye ve kırpmaya olanak tanıyan özel bir meta kutuya jcrop eklemek istiyordum.
NetConstructor.com

Hey @Jan Fabry ve @ NetConstructor.com - Kodu yeni gözden geçirdim ve WP için ilk eklentim olduğundan, serbest bırakmak için çok utanıyorum, o kadar kötü. Burada serbest bırakılması için daha yeni bir çözüm üzerinde çalışmak isterdim ama bu bir süre olabilir ...
MikeSchinkel

Utanma Mike, yazarın kendi gözünde eski kod her zaman kötüdür. Bu sadece ilerleme :). @Jan - UI örneğinizde bana küçük resim boyutunun bir şekilde önceden tanımlanmış olduğunu gösteriyor. Bunun hakkında daha fazla şey söyleyebilir misin?
hakre

Yanıtlar:


11

Kod hala bir karışıklık, ancak IE 8'de bile çalışıyor gibi görünüyor. Depoda serbest bırakmayı planlıyorum, ancak bu arada şu anki sürümümle oynayabilirsiniz . Bir görüntüyü eklerken veya düzenlerken "Görüntüyü Düzenle" yi tıkladığınızda, normal görüntü düzenleyicinin yerini alır (birleştirilmesi çok zordur). Yönetici alanının çoğu normal küçük resmi kullandığından ve geçerli sürümüm küçük resmi düzenlerse, kodun etkisi görünmeyebilir, ancak küçük resmi göstererek deneyin ve değişmiş olduğunu görmelisiniz.

Bu eklenti gerçek yeniden boyutlandırma yapmak için hala bir karışıklık olan On-Demand Image Resizer'ı gerektirir .

Kırpıcıdaki örnek resim


kodu henüz piyasaya sürülmeye hazır mı? belki onu github? Bunun gibi işlevselliği kazanıma entegre etmek için can atıyorum
Mild Fuzz

Bunu nasıl yaptığınızla da çok ilgileniyorum! Lütfen kodu paylaşın. Kodunuz varsayılan wordpress medya kitaplığını kullanarak çalışıyor mu ve düzenleme sonrası ekranda belirli bir görüntüyü arayabileceğiniz basit bir meta kutusu oluşturmanıza olanak tanıyor mu ve sadece "new_thumb" gibi tanımladığınız belirli bir boyuta kopyalamanıza izin veriyor mu? add_image_size ('new_thumb', 200, 100, doğru); İdeal durum, tanımlanmış her boyut için ayrı ayrı meta kutulara dayanarak tanımlanmış her bir görüntü boyutunu değiştirme becerisine sahip olan başlık görüntü yaratıcısı gibi bir şeye sahip olmak olacaktır.
NetConstructor.com

@JanFabry bu kodu henüz Eklenti olarak yayımladınız mı? Bu işlevselliğe ihtiyacı olan birine tavsiye etmeyi çok isterim!
Chip Bennett,

@ jan-fabry Bu fonksiyon nasıl gitti? Herhangi bir başarı?
Steven

4

En iyi bahis, javascript tabanlı bir görüntü kırpma ve ardından ImageMagick veya Image GD ile birlikte php kullanmaktır.

İşlevlerinize veya bir eklenti olarak yazılmış olması gerekir; çünkü şaşırtıcı olan hiçbir şey, kelime eklentisi dışında kullanılamaz.

Php tabanlı kaydetme seçeneği ile YUI görüntü kırpma var http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Php http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/ ile jquery cropper kullanımı hakkında farklı bir eğitim

Aynı jquery cropper'ı, ancak farklı kodu kullanan yukarıdaki bağlantıya çok benzeyen üçüncü bir seçenek. http://www.leonkessler.com/blog/?p=132

İşte bunun yerine jquery'nin jprop'unu kullanarak başka bir adres var: http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Yeni bir eklenti için kim, bu kesinlikle popüler olurdu :)


WordPress çekirdeğinde görüntü kırpma kodu (HTML, JS ve PHP) zaten var. Bence iyi bir eklenti bunu tekrar kullanır. Bir zorunluluk değil, sadece söyleyerek. Jan tarafından çizilen örnek UI'nin böyle bir şeye ihtiyacı olduğu konusunda haklısın.
hakre

@hakre, son bağlanan Wyck , wp çekirdeğine 2.8'de geri dönen jcrop'tur . O zamanlar hakkında okuduğumu hatırlıyorum, ancak depodaki tüm hesapların kırdığı bir eklenti dışında kullanıldığına dair hiçbir bilgi bulamıyorum .
mat

@ matt: Eğer çekirdeğe entegre edilmişse (şu anda orada olan çekirdek içindeki UI ile ilgili tüm özellikleri bilmiyorum) Çekirdek UI özelliği için kullanıldığını kabul ediyorum. Bu özellik her zaman kullanılamaz ancak yalnızca belirli PHP veya sistem resim kitaplıkları varsa kullanılabilir. Belirsiz olduğum için üzgünüm ama bu ana kadar çekirdek uygulamaya girmedim. Ama bir tane olduğunu biliyorum;)
hakre

1

"Sunulan Görüntü" seçeneğinden bahsederken, küçük resimler için zaten destek eklediğinizi varsayalım.

Öyleyse, seçeneklerden biri, yükleme dizisine yeni bir resim boyutu eklemenizi sağlar. Bu nedenle, varsayılan olarak, küçük, orta, büyük. Aşağıdaki kod bitinde, istediğiniz boyuta bağlı olarak, bu ürün grubuna 4. görüntü ekler. Bu kod parçası functions.php dosyasına eklenir.

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

"new-thumb" = yeni özel görüntünün adı
"200" = genişlik
"100" = yükseklik
"true" = sert kırpma seçeneği. Bu, görüntüyü tanımlanmış genişlik / yüksekliğe kırpmaya zorlar. Olmadan, sadece orantılı ölçeklenir.

Şimdi, yeni küçük resmi bir sayfada veya yazı dizisinde görüntülemek için aşağıdakileri HTML’nize eklersiniz

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

@cnix: Bu cevap için teşekkürler, ama aradığım şey bu değil. Son kullanıcı için kesilecek alanı tanımlamanın bir yolunu istiyorum, ben sitenin tasarımcısı olarak değil. Böylece alan görüntüden görüntüye değişebilir.
Jan Fabry

1

Büyük esnekliğe sahip olmak, temanızdaki küçük resimleri düzeltmek (isteniyorsa) ve dosya karmaşasından kaçınmak için CSS kullanmak isteyebilirsiniz:

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

Tüm görüntünün yükleneceğini unutmayın, bu nedenle 3 MB orijinallerinizi bunun için kullanmayın.

Jan'in isteğine göre güncelle: Dinamik kırpma istiyorsanız, aşağıdakileri göz önünde bulundurun:

  • Kullanıcı için = yönetici, PHP ile CSS oluşturun; sadece uygun ayarları okuyan php ile bağlantı kurabilir ve kırpma parametrelerini buna göre ayarlayabilirsiniz.
  • Kullanıcı = ziyaretçi için, görüntünün stil özniteliğindeki kırpma parametrelerini değiştirmek için JavaScript kullanın.
  • Daha az invaziv bir çözüm olarak, [thumb w = ?? h = ??] url [/ thumb] inline CSS ile uygun HTML etiketine çevirebilirsiniz.

Gerçekten de, çoklu boyutlardan kaçınmak için CSS üzerinden kırpma yapabilirsiniz, ancak kullanıcının (gönderinin yazarı) gösterilmesi gereken kırpma alanını tanımlamasına nasıl izin verdiniz?
Jan Fabry,

Lütfen yukarıdaki düzenlemelere bakın.
Raphael,

Açıklaman için teşekkürler. Bu, kullanıcının istenen kırpma alanının piksel konumlarını bildiğini varsayar? Aslında daha grafik bir yol arıyorum (mevcut görüntü düzenleyici gibi, ancak küçük resimler göndermeyi ve normal küçük resimler göndermeyi hedeflemedim).
Jan Fabry,

Umarım bu bir eklenti olmak niyetinde, bazı kesmek değil. Çoğu durumda uygun olan bazı varsayılan seçenekler sunabilirsiniz: köşeler, merkez, kenarlarda merkezlenmiş vb. (Hepsi kolayca hesaplanabilir). Ücretsiz giriş yapmaktan kaçınırdım çünkü insanlar pisliğe girerlerse sitenin akışını bozabilirler. Grafiksel bir klip belirleyici önermek (uygulama için Zenphoto'ya bakınız) iyidir, sanırım, ancak elde edilen değerlerin nasıl kullanılacağına ilişkin prensipler aynı kalıyor; Sadece GUI'yi oluşturmak zorundasınız. Bu size yardımcı olamam.
Raphael


1

Bunu aradığına inanıyorum: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

Bunu denemedim, ancak aradığınız işlevselliği size sunmalıdır.

Buradaki orijinal eklenti sayfası. http://wordpress.org/extend/plugins/scissors/

Üzerinde çalıştığım bir proje için buna ihtiyacım var.


Önerin için teşekkürler. Makas'a baktım (ve birinin 3.0'a yükselttiğini biliyordum), ancak istediğim şey için çok esnek olduğunu düşünüyorum : önceden tanımlanmış bir boyuta kadar kırpılacak bir kırpıcı gerekir. Makas çok daha fazlasını yapabilir ve bu nedenle son kullanıcılarımı şaşırtabilir.
Jan Fabry

1

Bu sorunun nihai çözümünün, eklentiyi http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/ adresinden değiştirmek olduğunu düşünüyorum.

ve özelleştirin, böylece, add_image_size( 'new_thumb', 200, 100, true );bir resim değiştirmek istediğinizde, "edit" bağlantısını değiştirmek (ya da genişletmek) için kodu () kullanarak otomatik olarak kullanılır ve ardından kodunuzu alırsınız.

Bu yaklaşımı kullanmak wordpress normalde olduğu gibi uygulanabilir görüntü boyutlarını oluşturmaya devam edebilir, ancak belirli bir görüntünün kırpılmış alanını özel olarak değiştirmek isterseniz, bu boyut için otomatik olarak oluşturulan görüntünün yerine geçecek şekilde yapma yeteneğine sahip olursunuz. Hmmm ... her ne kadar bu, tekrar okuduğumda kafa karıştırıcı çıksa da, hissettiğim eksik.

Şu anda eklentinin, bu özel resim boyutlarını, uygulanabilir bir resim için bir gönderi yerine bir gönderi içindeki özel bir alana kaydettiğine inanıyorum.


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.