Görüntü işleme, onu düzeltmekten daha fazla soruna neden olur
GÜNCELLEME 2017-03-07: Şimdi görüntü işleme için hemen daha iyi bir çözüm sunuyoruz. Görüntüler web’den ekmek ve tereyağıdır. Görüntüler ve diğer medya olmadan, web çok farklı olacak ve zorlukla zenginleşecek; Odayı gerçekten birleştiren halılar gibidirler. Bununla birlikte, WordPress topluluğunda görüntü işleme kütüphanesini anında (OTF) kullanma konusunda endişe verici bir eğilim vardır. Kaçınılabilecek uyumluluk sorunu, temalar ve eklentiler, OTF işleme kitaplığı için WordPress’in doğuştan gelen görüntü boyutunu değiştirme işlevselliğini göz ardı ettiğinde ortaya çıkar. Bu makalede, WordPress’teki OTF işlemenin etkilerini, standart görüntüyü takip etmenin faydalarını ve WordPress ortamındaki görüntülerle (ve daha sonra diğer geliştiricilerle) nasıl geçinileceğini tartışacağım.
Mevcut görüntü işleme nedir? Çok derin dalış yapmadan önce, OTF görüntü işlemesinin ne olduğunu, nasıl bulacağınızı ve genellikle WordPress projesinde nerede bulabileceğinizi kısaca açıklamalıyım. Doğrudan kesme olarak da bilinen OTF görüntü işleme, geliştiricilerin URL parametreleri (eski okullar) veya manipülasyon sınıfları (bugün daha genel yaklaşımlar) kullanılarak görüntüleri yeniden şekillendirmesine, kesmesine ve filtrelemesine olanak tanır. OTF işleme kullanmak, geliştiricilerin gerektiğinde bir kez, özel boyutlar ve görüntü manipülasyonunu belirlemelerini sağlar.
Birçok geliştirici, kullanım kolaylığı ve uygulama nedeniyle OTF işlemeyi kullanır. PHP tabanlı herhangi bir CMS’de OTF işlemeyi kullanmaya başlamak için genellikle WordPress eklentileri eklemek veya yalnızca dosyaları içerir. Buna ek olarak, ön uç geliştiriciler basit ve özlü sözdizimleri nedeniyle birçok OTF kütüphanesini kullanabilirler. Bu esneklik nedeniyle, geliştiriciler ekipman kutusunu projeden projeye ince tutabilir ve tasarım (ön uç) ve geliştirme (arka uç) arasında daha fazla örtüşebilirler. Kulağa hoş geliyor mu? WordPress’te OTF işlemeyi bulabileceğiniz iki genel alan bir eklenti/özel tema ve çözümde. Tema geliştiricilerinin ve eklentilerinin Aqua, VT, Timthumb veya akıllı görüntü yeniden boyutlandırması gibi manipülasyon sınıflarına güvenmesi yaygındır (eklentinin veya temanın OTF işlemesini kullanıp kullanmadığından emin değilseniz, aqua_repanizer adlı bir sınıfın kaynak koduna bakın, VT, Timthumb, smart_resize_image vb.). Ayrıca, tasarım/reklamcılık bürosunda çok fazla müşteri çalışması yapan özel bir kesme çözümü buldum. Geliştiriciler genellikle zaman için basılır ve bulabilecekleri kısayolları ararlar-Önceki yıllarda bundan suçlu olduğumu biliyorum.
Belki bu sadece senin fikrin, adamım şimdi birçoğunuzun sorabileceğini hayal ediyorum … “Sorun nedir? Resmimi OTF işlemeyi kullanarak amaçlandığı gibi çıktıya alabilirim, karmaşık bir WordPress görüntü boyutu kullanmam gerekmiyor ve çok hızlı. Neden umursayayım? Belki standart WordPress görüntüsü sadece sizin fikrinizdir, dostum! ”
Cevap, başkalarıyla takılmak kadar basit. Tüm eklentiler ve temalar aynı kuralları/kalıpları izlerse, uyumluluk sorunu minimum olacaktır. Bununla birlikte, bir eklenti saparsa, diğer eklentiler/temalar ve WordPress’in çekirdeği ile etkileşime girerken birçok soruna neden olabilir. Akla gelen örneği, WP boşaltma S3’ün genel bir OTF işleme kütüphanesi ile eşleştirilmesidir (eklentilerde bulunur veya temalar). WP boşaltma S3, tüm medya kitaplıklarınızı (ve uygulanabilir tüm görüntü boyutlarınızı) S3’e yerleştirmenize ve CDN üzerinden sunmanıza olanak tanır. Tahmin edilen sonuçları sağlamak için, görüntüleri ve medya kütüphanelerini işlemek için standart WordPress kuralına çok bağımlıyız. Böyle bir standart kodu hedefliyoruz çünkü özel bir çözümü karşılamak kaybeden savaştır. WP boşaltma S3 ile, kesilmiş OTF olan görüntüler genellikle yüklenmez, çünkü veritabanında (posta veya postmeta verileri şeklinde) görüntü kaydı olmadığı için görüntünün ayrıntılarını belirlemenin bir yolu yoktur. OTF işleme kütüphanesi bu bilgileri veritabanında saklarsa, genellikle postmeta olarak saklanır, ancak standart bir ek meta veri yerine özel bir anahtar kullanır. ‘Meta veri yok’ senaryosunun nihai sonucu, kayıp bir görüntü veya S3’e indirgenemeyen ve son kullanıcı için yüklenmeyen görüntülere neden olabilecek bir görüntü olabilir. OTF işlemenin diğer bazı büyük bilet sonuçları …
Performans-her zaman resim yazdırılır, OTF işleme kütüphaneleri içerir. 100’lerin görüntüsü olan sayfada, bu sunucu kaynaklarında ciddi dalgalanmalara neden olabilir. Şimdi 1000 kullanıcının sayfayı aynı anda ziyaret ettiğini hayal edin. Gelecekteki Rubers-WordPress görüntüleri her bir sonraki sürümde daha iyidir. Örneğin, V4.7’de PDF artışları daha iyi bir önizleme dahil medya kütüphanesine gelir; Ne kadar serin! Bu tek sürüme eklenen diğer birçok özellikten bahsetmiyorum bile. OTF görüntü işleme kütüphanesi neredeyse aynı geliştirici kaynaklarına sahip değildir.
Güvenlik – Bu kütüphanenin çoğu güvenlik sorunlarından rahatsız oluyor. Dosya katılımının sömürülmesi, birçok OTF işleme kütüphanesi için halka açık bir yerdir ve bu bir çocuk oyunudur. Örneğin Timthumb, yıllar boyunca güvenlik sömürüsü ile birçok kez etkilenmiştir ve bu da milyonlarca sitenin sorun yaşamaya neden olmuştur.
Duyarlı Görüntü – OTF kütüphanesi, duyarlı görüntülerle çalışırken uygulamasının doğrudan uygulanmasını hızla kaybeder, çünkü OTF kütüphanesinin farklı bir boyut ürettiği her örnek için kodun uzunluğu gereklidir. WordPress Core işlevselliği (kutunun dışında) güçlü duyarlı görüntü desteği içerir.
Geçmişten öğrenelim ve temel işlevsellik ile birlikte inşa edelim. Görüntü doğru yapılır, tüm eklentilerin birlikte çalışabilmesini sağlamak için WordPress’teki görüntüleri işlemenin daha iyi bir yolu vardır. Bugün OTF işleme kütüphanesini kullanıyorsanız ve mevcut kabus yeniden düzenleme konusunda endişeleniyorsanız, endişelenmemeye çalışın çünkü WordPress görüntüleri doğru bir şekilde ele almayı kolaylaştırır. Görüntü boyutları ekleme v2.9’dan beri WordPress özel görüntü boyutları için desteğe sahiptir. Zamanla, görüntü boyutu özellikleri pişirilmiştir ve tema bağlamında özel görüntü boyutu gereksinimini en çok desteklemelidir. Add_image_size işlevini ve After_tup_theme Action’ı kullanarak php dosyası. Kısa örneğe bakalım … if (! Function_exists (‘bigLebowski_theme_image_seses’ ‘)) {function bigLeBowski_theme_image_seses () {add_image_size (‘ besleme-copped-Thumb ‘, 300, 150, true); // kırpılmış, 300 x 150 add_image_size (‘besleme başlığı’, 600); // 600 x sınırsız} add_ace (‘After_seup_theme’, ‘bigLebowski_theme_image_SISES’); } Bu basit işlevle, çelişkili kodu kontrol ettik, iki yeni görüntü boyutu kaydettik ve After_setup_theme eylemine bağlandık. Görüntünün boyutu WordPress’te kaydedildiğinden, şimdi Intermediate_Image_Seses gibi filtreleri ve eylemleri kullanabiliriz.
Görüntüler için varsayılan WordPress işlevinin kullanımı çok kolay olduğunda, neden kullanmıyorsunuz?Uyarılar ve araçlar sık sık görüntünün boyutunu kullanırken, yeni bir görüntü boyutu kaydettiğiniz veya var olanı değiştirdiğiniz için bir örnek almanız/yeniden oluşturmanız gereken etkinlikler yaşayacaksınız.Burası bazı pratik araçların oynayabileceği yerdir.Regenate küçük resimler, görüntünüzü tüm aktif görüntü boyutlarıyla yeniden oluşturmanıza izin veren basit ve hafif eklentilerdir.Bu araç medya kütüphanesi için kullanışlıdır, ancak daha büyük bir kütüphanede tamamlanması uzun zaman alabilir.WP CLI, şu anda Daniel Bachhuber tarafından yönetilen WordPress için bir komut satırıdır;
Takip etmek isteyeceğiniz keskin bir adam. WP Media Regenerate ve yeniden uygulanan tüm görüntü boyutlarına göre ortamı komut satırı üzerinden yeniden oluşturabilirsiniz. Bu araç, daha büyük medya kütüphaneleri ve erişim hattı erişiminiz olduğu ortam için kullanışlıdır. CSS 2000’li yılların başından beri hızla geliştiği ve tarayıcı standardı için yarıştığı için çok sayıda belirli görüntü yapmanız gerekmediğine dikkat edilmelidir (Teşekkürler, Bay Zeldman). Genellikle daha büyük görüntüler kullanabilir ve DOM’daki boyutlarını geleneksel CSS ile hafifçe değiştirebilirsiniz. Gelecekte, klip-yolu ve yeniden boyutlandırma gibi CSS3 özelliklerine destek, bir tarayıcı tarafından daha fazla desteklenir ve kitlenize bağlı olarak ihtiyaçlarınız için uygun olabilir. Asansör Sanırım zamanın% 99’u add_image_size, geliştirici ihtiyaçlarının çoğunu karşılayabileceğini düşünüyorum. Imageick veya GD gibi güçlü görüntü manipülasyon araçlarına ihtiyaç duyanlar için, medya ve medya kütüphaneleri çevresinde temel işlevselliği kullanmanızı şiddetle tavsiye ederim. Ancak, PHP Görüntü Kütüphanesi’ne girmeniz gerekiyorsa, lütfen wp_image_editor sınıfını seçin. V3.5’ten bu yana, bu sınıf GD ve Imageick’te birçok işlevi özetler ve görüntüleri (su izleri veya renk filtreleri gibi) manipüle ederken daha ağır bir sunucu tarafını kaldırmak için bir araçtır. WP_IMAGE_EDITER’ı güvenli bir şekilde (resmi yansıtmak/tersine çevirmek için), ek kimlik 42’ye sahip olan mevcut bir WordPress eki ile güvenli bir şekilde (resmi yansıtmak/tersine çevirmek için) bakalım. “WP-Tescludes/Class-WP-image-editor.php”;
// temel görüntü/ek $ ekli_id = ’42’;$ image_path = get_attached_file ($ attachment_id);// Düzenleyiciyi yükle $ modifiye_image = wp_get_image_ditor ($ image_path);// wp_image_ditor yüklerken herhangi bir hatayı kontrol edin (! Is_wp_error ($ modifiye_image)) {// görüntüyü çevirin, $ modifiye_image-> flip (false, true) kalitesini krank;$ modifiye_image-> set_quality (100);// görüntü dosyasını kaydet, meta veriyi güncelleyin $ sailed_image = $ modifiye_image-> sate ();$ meta_data = wp_generate_attachment_metadata ($ ekli_id, $ saved_image [‘yol’]));wp_update_attachment_metadata ($ ekli_id, $ meta_data);
Mevcut görüntü işleme nedir? Çok derin dalış yapmadan önce, OTF görüntü işlemesinin ne olduğunu, nasıl bulacağınızı ve genellikle WordPress projesinde nerede bulabileceğinizi kısaca açıklamalıyım. Doğrudan kesme olarak da bilinen OTF görüntü işleme, geliştiricilerin URL parametreleri (eski okullar) veya manipülasyon sınıfları (bugün daha genel yaklaşımlar) kullanılarak görüntüleri yeniden şekillendirmesine, kesmesine ve filtrelemesine olanak tanır. OTF işleme kullanmak, geliştiricilerin gerektiğinde bir kez, özel boyutlar ve görüntü manipülasyonunu belirlemelerini sağlar.
Birçok geliştirici, kullanım kolaylığı ve uygulama nedeniyle OTF işlemeyi kullanır. PHP tabanlı herhangi bir CMS’de OTF işlemeyi kullanmaya başlamak için genellikle WordPress eklentileri eklemek veya yalnızca dosyaları içerir. Buna ek olarak, ön uç geliştiriciler basit ve özlü sözdizimleri nedeniyle birçok OTF kütüphanesini kullanabilirler. Bu esneklik nedeniyle, geliştiriciler ekipman kutusunu projeden projeye ince tutabilir ve tasarım (ön uç) ve geliştirme (arka uç) arasında daha fazla örtüşebilirler. Kulağa hoş geliyor mu? WordPress’te OTF işlemeyi bulabileceğiniz iki genel alan bir eklenti/özel tema ve çözümde. Tema geliştiricilerinin ve eklentilerinin Aqua, VT, Timthumb veya akıllı görüntü yeniden boyutlandırması gibi manipülasyon sınıflarına güvenmesi yaygındır (eklentinin veya temanın OTF işlemesini kullanıp kullanmadığından emin değilseniz, aqua_repanizer adlı bir sınıfın kaynak koduna bakın, VT, Timthumb, smart_resize_image vb.). Ayrıca, tasarım/reklamcılık bürosunda çok fazla müşteri çalışması yapan özel bir kesme çözümü buldum. Geliştiriciler genellikle zaman için basılır ve bulabilecekleri kısayolları ararlar-Önceki yıllarda bundan suçlu olduğumu biliyorum.
Belki bu sadece senin fikrin, adamım şimdi birçoğunuzun sorabileceğini hayal ediyorum … “Sorun nedir? Resmimi OTF işlemeyi kullanarak amaçlandığı gibi çıktıya alabilirim, karmaşık bir WordPress görüntü boyutu kullanmam gerekmiyor ve çok hızlı. Neden umursayayım? Belki standart WordPress görüntüsü sadece sizin fikrinizdir, dostum! ”
Cevap, başkalarıyla takılmak kadar basit. Tüm eklentiler ve temalar aynı kuralları/kalıpları izlerse, uyumluluk sorunu minimum olacaktır. Bununla birlikte, bir eklenti saparsa, diğer eklentiler/temalar ve WordPress’in çekirdeği ile etkileşime girerken birçok soruna neden olabilir. Akla gelen örneği, WP boşaltma S3’ün genel bir OTF işleme kütüphanesi ile eşleştirilmesidir (eklentilerde bulunur veya temalar). WP boşaltma S3, tüm medya kitaplıklarınızı (ve uygulanabilir tüm görüntü boyutlarınızı) S3’e yerleştirmenize ve CDN üzerinden sunmanıza olanak tanır. Tahmin edilen sonuçları sağlamak için, görüntüleri ve medya kütüphanelerini işlemek için standart WordPress kuralına çok bağımlıyız. Böyle bir standart kodu hedefliyoruz çünkü özel bir çözümü karşılamak kaybeden savaştır. WP boşaltma S3 ile, kesilmiş OTF olan görüntüler genellikle yüklenmez, çünkü veritabanında (posta veya postmeta verileri şeklinde) görüntü kaydı olmadığı için görüntünün ayrıntılarını belirlemenin bir yolu yoktur. OTF işleme kütüphanesi bu bilgileri veritabanında saklarsa, genellikle postmeta olarak saklanır, ancak standart bir ek meta veri yerine özel bir anahtar kullanır. ‘Meta veri yok’ senaryosunun nihai sonucu, kayıp bir görüntü veya S3’e indirgenemeyen ve son kullanıcı için yüklenmeyen görüntülere neden olabilecek bir görüntü olabilir. OTF işlemenin diğer bazı büyük bilet sonuçları …
Performans-her zaman resim yazdırılır, OTF işleme kütüphaneleri içerir. 100’lerin görüntüsü olan sayfada, bu sunucu kaynaklarında ciddi dalgalanmalara neden olabilir. Şimdi 1000 kullanıcının sayfayı aynı anda ziyaret ettiğini hayal edin. Gelecekteki Rubers-WordPress görüntüleri her bir sonraki sürümde daha iyidir. Örneğin, V4.7’de PDF artışları daha iyi bir önizleme dahil medya kütüphanesine gelir; Ne kadar serin! Bu tek sürüme eklenen diğer birçok özellikten bahsetmiyorum bile. OTF görüntü işleme kütüphanesi neredeyse aynı geliştirici kaynaklarına sahip değildir.
Güvenlik – Bu kütüphanenin çoğu güvenlik sorunlarından rahatsız oluyor. Dosya katılımının sömürülmesi, birçok OTF işleme kütüphanesi için halka açık bir yerdir ve bu bir çocuk oyunudur. Örneğin Timthumb, yıllar boyunca güvenlik sömürüsü ile birçok kez etkilenmiştir ve bu da milyonlarca sitenin sorun yaşamaya neden olmuştur.
Duyarlı Görüntü – OTF kütüphanesi, duyarlı görüntülerle çalışırken uygulamasının doğrudan uygulanmasını hızla kaybeder, çünkü OTF kütüphanesinin farklı bir boyut ürettiği her örnek için kodun uzunluğu gereklidir. WordPress Core işlevselliği (kutunun dışında) güçlü duyarlı görüntü desteği içerir.
Geçmişten öğrenelim ve temel işlevsellik ile birlikte inşa edelim. Görüntü doğru yapılır, tüm eklentilerin birlikte çalışabilmesini sağlamak için WordPress’teki görüntüleri işlemenin daha iyi bir yolu vardır. Bugün OTF işleme kütüphanesini kullanıyorsanız ve mevcut kabus yeniden düzenleme konusunda endişeleniyorsanız, endişelenmemeye çalışın çünkü WordPress görüntüleri doğru bir şekilde ele almayı kolaylaştırır. Görüntü boyutları ekleme v2.9’dan beri WordPress özel görüntü boyutları için desteğe sahiptir. Zamanla, görüntü boyutu özellikleri pişirilmiştir ve tema bağlamında özel görüntü boyutu gereksinimini en çok desteklemelidir. Add_image_size işlevini ve After_tup_theme Action’ı kullanarak php dosyası. Kısa örneğe bakalım … if (! Function_exists (‘bigLebowski_theme_image_seses’ ‘)) {function bigLeBowski_theme_image_seses () {add_image_size (‘ besleme-copped-Thumb ‘, 300, 150, true); // kırpılmış, 300 x 150 add_image_size (‘besleme başlığı’, 600); // 600 x sınırsız} add_ace (‘After_seup_theme’, ‘bigLebowski_theme_image_SISES’); } Bu basit işlevle, çelişkili kodu kontrol ettik, iki yeni görüntü boyutu kaydettik ve After_setup_theme eylemine bağlandık. Görüntünün boyutu WordPress’te kaydedildiğinden, şimdi Intermediate_Image_Seses gibi filtreleri ve eylemleri kullanabiliriz.
Görüntüler için varsayılan WordPress işlevinin kullanımı çok kolay olduğunda, neden kullanmıyorsunuz?Uyarılar ve araçlar sık sık görüntünün boyutunu kullanırken, yeni bir görüntü boyutu kaydettiğiniz veya var olanı değiştirdiğiniz için bir örnek almanız/yeniden oluşturmanız gereken etkinlikler yaşayacaksınız.Burası bazı pratik araçların oynayabileceği yerdir.Regenate küçük resimler, görüntünüzü tüm aktif görüntü boyutlarıyla yeniden oluşturmanıza izin veren basit ve hafif eklentilerdir.Bu araç medya kütüphanesi için kullanışlıdır, ancak daha büyük bir kütüphanede tamamlanması uzun zaman alabilir.WP CLI, şu anda Daniel Bachhuber tarafından yönetilen WordPress için bir komut satırıdır;
Takip etmek isteyeceğiniz keskin bir adam. WP Media Regenerate ve yeniden uygulanan tüm görüntü boyutlarına göre ortamı komut satırı üzerinden yeniden oluşturabilirsiniz. Bu araç, daha büyük medya kütüphaneleri ve erişim hattı erişiminiz olduğu ortam için kullanışlıdır. CSS 2000’li yılların başından beri hızla geliştiği ve tarayıcı standardı için yarıştığı için çok sayıda belirli görüntü yapmanız gerekmediğine dikkat edilmelidir (Teşekkürler, Bay Zeldman). Genellikle daha büyük görüntüler kullanabilir ve DOM’daki boyutlarını geleneksel CSS ile hafifçe değiştirebilirsiniz. Gelecekte, klip-yolu ve yeniden boyutlandırma gibi CSS3 özelliklerine destek, bir tarayıcı tarafından daha fazla desteklenir ve kitlenize bağlı olarak ihtiyaçlarınız için uygun olabilir. Asansör Sanırım zamanın% 99’u add_image_size, geliştirici ihtiyaçlarının çoğunu karşılayabileceğini düşünüyorum. Imageick veya GD gibi güçlü görüntü manipülasyon araçlarına ihtiyaç duyanlar için, medya ve medya kütüphaneleri çevresinde temel işlevselliği kullanmanızı şiddetle tavsiye ederim. Ancak, PHP Görüntü Kütüphanesi’ne girmeniz gerekiyorsa, lütfen wp_image_editor sınıfını seçin. V3.5’ten bu yana, bu sınıf GD ve Imageick’te birçok işlevi özetler ve görüntüleri (su izleri veya renk filtreleri gibi) manipüle ederken daha ağır bir sunucu tarafını kaldırmak için bir araçtır. WP_IMAGE_EDITER’ı güvenli bir şekilde (resmi yansıtmak/tersine çevirmek için), ek kimlik 42’ye sahip olan mevcut bir WordPress eki ile güvenli bir şekilde (resmi yansıtmak/tersine çevirmek için) bakalım. “WP-Tescludes/Class-WP-image-editor.php”;
// temel görüntü/ek $ ekli_id = ’42’;$ image_path = get_attached_file ($ attachment_id);// Düzenleyiciyi yükle $ modifiye_image = wp_get_image_ditor ($ image_path);// wp_image_ditor yüklerken herhangi bir hatayı kontrol edin (! Is_wp_error ($ modifiye_image)) {// görüntüyü çevirin, $ modifiye_image-> flip (false, true) kalitesini krank;$ modifiye_image-> set_quality (100);// görüntü dosyasını kaydet, meta veriyi güncelleyin $ sailed_image = $ modifiye_image-> sate ();$ meta_data = wp_generate_attachment_metadata ($ ekli_id, $ saved_image [‘yol’]));wp_update_attachment_metadata ($ ekli_id, $ meta_data);
} Görüntümüzü yükledik ve manipülasyon için wp_image_editor sınıfımıza devam ettik. Sonra görüntü dosyasını kaydeder ve onunla ilişkili meta verileri güncelleriz. Görüntünün, görüntü dosyası boyutunun vb. Boyutlarını değiştirirseniz, meta verileri güncelleyen bu son adım oldukça önemlidir. Ek meta verilerini güncellerken, önemli bilgileri, başkalarının (ve kendinizin) ekle daha fazla erişmesine ve daha fazla çalışmasına izin veren veritabanına saklarsınız. Bu, doğru görüntünün kaldırılmasını içerir. İlgili bir görüntü meta verilerine sahip olmak, görüntünün medya kütüphanesinden silindiğinde ve geride kalan yetimlerin boyutu olmadığında değiştirilen tüm görüntülerin silinmesini sağlayacaktır. Yeni bir resim yüklerseniz (WordPress veya API gibi harici kaynaklar aracılığıyla), daha karmaşık görüntü manipülasyonu için wp_image_editor sınıfını kullanabilirsiniz. İlk yükleme için Media_handle_upload’ı kilitlediğinizden emin olmalısınız, çünkü yükleme işlemlerinin çoğunu (dosya depolama, meta veri çıkarma, vb.) Tek bir işlevde işler. Daha fazla güce ihtiyacınız olduğu nadiren gerçekleşen durumlarda umut vardır;
