Wordpress'te SVG oluşturmanın üstesinden gelmenin yolları?

İnternet tarayıcılarının ilerlemesiyle, web sitelerini kodlarken SVGS'yi kullanarak kendimi gittikçe daha rahat buluyorum ... özellikle simgeler ve anında png ile değiştirilebilen basit grafikler için.

Wordpress neredeyse SVGS'yi destekliyor gibi görünüyor. Neredeyse söylüyorum çünkü:

1. Wordpress'te varsayılan olarak izin verilen bir dosya türü değildir. Bu nedenle, SVG'leri yüklemeden önce bunu eklemeniz gerekir

2. Medya galerisinde bir SVG küçük resmi göremezsiniz. (aşağıdaki resme bakın)

3. Bazen editöre eklediğinizde (medya ekle düğmesi aracılığıyla) düzenleyici svg boyutunu bilmez, bu nedenle svg'yi bir görüntü olarak eklese de genişliği ve yüksekliği sıfır olur.

4. Medya yükleme açılır penceresinden "resmi düzenle" yi tıkladığınızda "görüntü mevcut değil" şeklinde bir mesaj alırsınız. Aşağıdaki resme bakın.

Bu listedeki madde 1 ile iyiyim, ama kimse nasıl bir düzeltme öğesi 2 3 ve 4 anladı?

1. madde hakkında güncelleme:

Yeni bir mime türüne (SVG gibi) izin vermek için function.php dosyasına bir kanca ekleyebilirsiniz.

function allow_new_mime_type($mimes) {

    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
}
add_filter( 'mime_types', 'allow_new_mime_type' );

Şimdi SVG'leri yükleyebilmeniz gerekir. Bu eğiticide daha fazla bilgi bulabilirsiniz . Bu sadece daha önce de belirttiğim gibi, benim için bir sorun değil madde 1'i çözer (her ne kadar varsayılan olarak izin verilmesi gerektiğini düşünüyorum).

2. madde hakkında güncelleme:

Biraz kazma yaptım ve bir ekin görüntü olup olmadığına karar veren işlevi izledim. Her şey wp-include / post.php içinde bu işleve geliyor gibi görünüyor

/**
 * Check if the attachment is an image.
 *
 * @since 2.1.0
 *
 * @param int $post_id Attachment ID
 * @return bool
 */
function wp_attachment_is_image( $post_id = 0 ) {
    $post_id = (int) $post_id;
    if ( !$post = get_post( $post_id ) )
        return false;

    if ( !$file = get_attached_file( $post->ID ) )
        return false;

    $ext = preg_match('/\.([^.]+)$/', $file, $matches) ? strtolower($matches[1]) : false;

    $image_exts = array( 'jpg', 'jpeg', 'jpe', 'gif', 'png' );

    if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )
        return true;
    return false;
}

Gördüğünüz gibi, bu işlevde tanımlı bir dizi geçerli resim uzantısı var. Bu diziyi değiştirmek için kullanılabilecek herhangi bir filtre göremiyorum. Ama bu bir başlangıç ​​...

Neden son if deyimi svgs için yanlış döndürür emin değilim. Svg uzantısını $ image_exts dizisine eklemesem bile, ilk koşul true değerini döndürmeli, değil mi?

if ( 'image/' == substr($post->post_mime_type, 0, 6)

Bu, svg için image / svg + xml (ilk altı "image /") olan "image /" öğesinin mime türündeki ilk altı karakterle eşdeğer olup olmadığını kontrol eder.

GÜNCELLEME

Daha fazla araştırma yapıldığında, sorunun hiç wp_attachment_is_image ile ilgili olmadığı, ancak SVG yüklendiğinde görüntü boyutunun (genişlik ve yükseklik) ek meta verilerine eklenmediği anlaşılıyor. Bunun nedeni, kullanılan görüntüyü hesaplama işlevinin, SVG için bir görüntü boyutu döndürmeyen php işlevi getimagesize () olmasıdır. Stackimagesflow ve getimagesize işlevi ve svgs nasıl davrandığı hakkında bir cevap buldum. Bakın burada.

wp_prepare_attachment_for_js()Medya sayfalarında kullanılmak üzere ek meta verilerini toplayan şeye bir göz atın . Adsız filtre, meta veriler eklememize veya değiştirmemize olanak tanır.

Aşağıdaki örnek function.php dosyasına bırakılabilir. Not: Bu, PHP'de SimpleXML desteği gerektirir.

function common_svg_media_thumbnails($response, $attachment, $meta){
    if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement'))
    {
        try {
            $path = get_attached_file($attachment->ID);
            if(@file_exists($path))
            {
                $svg = new SimpleXMLElement(@file_get_contents($path));
                $src = $response['url'];
                $width = (int) $svg['width'];
                $height = (int) $svg['height'];

                //media gallery
                $response['image'] = compact( 'src', 'width', 'height' );
                $response['thumb'] = compact( 'src', 'width', 'height' );

                //media single
                $response['sizes']['full'] = array(
                    'height'        => $height,
                    'width'         => $width,
                    'url'           => $src,
                    'orientation'   => $height > $width ? 'portrait' : 'landscape',
                );
            }
        }
        catch(Exception $e){}
    }

    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'common_svg_media_thumbnails', 10, 3);

Bu, bir eklenti veya küçük bir kod kümesi ile kolayca "hackleyebileceğiniz" bir şey değildir.

Kısacası, SVG'lerin büyük ölçüde, ondan önce gelen tüm görüntüler anlamında "görüntü" olmamasıdır. SVG'ler vektör tabanlı görüntülerdir ve web üzerinde gerçek bir çekiş sağlayan ilk görüntülerdir.

Bundan önceki tüm görüntüler bitmap tabanlıdır. WordPress'in görüntü işleme sistemi bunlarla başa çıkmak için özel olarak yazılmıştır ve bu doğal tasarım sistemin her noktasında bulunmaktadır.

Örneğin, görüntülerin genişlik ve yüksekliklere sahip olduğu temelde bir varsayımdır. SVG'lerin hiçbiri yoktur, herhangi bir boyutta olabilirler. WordPress'e yerleştirilmiş görüntüler için, işlevselliği hiçbiri SVG'lere gerçekten uygulanamayan tüm temel bir "editör" vardır.

Multimedya sistemi yavaş yavaş, "yavaş" vurgulanarak yeniden geliştirilmektedir. Korunması gereken çok sayıda geriye dönük uyumluluk ve yeni tasarımlar uygulanacaktır. Ayrıca, çoğu insan video, ses ve oynatma listelerini desteklemekle çok daha fazla ilgileniyor. Bu yeniden tasarım çalışması yapıldıkça ve kütüphanenin bölümleri daha soyut hale geldikçe, bu tür şeylerin zaman içinde desteklenmesi daha kolay hale gelecektir. Ama henüz orada değil ve bir süre olmayacak. Bu nedenle SVG mime türü desteklenmez, çünkü tüm mimik türlerini tüm temel parçalar çalışana kadar eklemek kırılmanın bir yolu olacaktır.

SVG'lerde, wp_attachment_is_imagefalse wp_attachment_is_imagedeğeri döndürülmelidir, çünkü editör düğmesinin gösterilip gösterilmeyeceğini image_downsizeve görüntüyü küçük resimlere yeniden boyutlandırıp boyutlandırmaya çalışıp çalışmadığını belirlemek için kullanılır . Her ikisi de SVG'ler için işe yaramaz. SVG'leri düzgün bir şekilde desteklemek için, bu görüntülere tamamen meta veri eklemek için yeni bir sistem yazmanız ve ardından meta verilerin kullanılabileceği tüm yerlerde destek eklemeniz gerekir. Tahmin edebileceğiniz gibi, bu küçük bir iş değil.

Sadece kaynak okumadan (test değil), uzantının eşleşmesi gerektiğini görebiliyorum:

if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )

hangi okur (sözde kod)

eğer image/$ sonrası nesne post_mime_type özelliğinde ilk 6 karakter OR bir uzantısı vardır VEYA importolan $ sonrası post_mime_type özelliğini VE geçerli dosya uzantısını biri (Dizi) olduğu nesneleri

Ve bu, son ifadenin her zaman ifdoğru olup olmadığına karar vereceği anlamına gelir .

Ne okuyabilir itibaren , uzantı taklitget_attached_file() izin verecek bir filtre var :

return apply_filters( 'get_attached_file', $file, $attachment_id );

Başka bir deyişle, aynı dosyayı farklı bir uzantıyla döndürmeyi deneyebilirsiniz. Geri wp_attachment_is_image()döndüğü gibi, diğer parçalarla çelişmez bool.