¿Maneras de manejar la representación SVG en wordpress?

9

Con el avance de los navegadores de Internet, me siento cada vez más cómodo utilizando SVGS al codificar sitios web ... especialmente para iconos, y gráficos simples que pueden ser reemplazados al instante por pngs.

Parece que WordPress casi soporta SVGS. Digo casi porque:

  1. No es por defecto un tipo de archivo permitido en wordpress. Por lo tanto, debe agregar eso antes de cargar SVG

  2. No puede ver una miniatura de SVG en la galería de medios. (ver imagen abajo)

  3. A veces, cuando lo agrega al editor (mediante el botón de agregar medios), el editor no conoce el tamaño de svg, por lo que aunque agrega el svg como imagen, tiene un ancho y una altura de cero.

  4. Al hacer clic en "editar imagen" desde la ventana emergente de carga de medios, aparece un mensaje que dice "la imagen no existe". Ver imagen a continuación.

Estoy bien con el elemento 1 en esta lista, pero ¿alguien ha descubierto cómo un elemento fijo 2 3 y 4?

Actualización sobre el artículo 1:

Para permitir un nuevo tipo de mime (como SVG) puedes agregar un gancho en functions.php

function allow_new_mime_type($mimes) {

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

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

Ahora deberías poder subir SVGs. Puede encontrar más información en este tutorial . Esto solo resuelve el elemento 1, que, como mencioné anteriormente, no es un problema para mí (aunque creo que debería estar permitido de forma predeterminada).

Actualización sobre el elemento 2:

Hice algunas excavaciones y localicé la función que decide si un adjunto es una imagen o no. Parece que todo se reduce a esta función en wp-includes / post.php

/**
 * 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;
}

Como puede ver, hay una serie de extensiones de imagen válidas definidas en esta función. No veo ningún filtro que pueda usarse para modificar esa matriz. Pero eso es un comienzo ...

No estoy seguro de por qué la última sentencia if devuelve false para svgs. Incluso si no agrego la extensión svg a la matriz $ image_exts, la primera condición debería ser verdadera, ¿no?

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

Esto comprueba si 'image /' es equivalente a los primeros seis caracteres del tipo mime, que para svg es image / svg + xml (los primeros seis son "image /").

ACTUALIZAR

Tras una investigación adicional, parece que el problema no es en absoluto con wp_attachment_is_image, sino porque el tamaño de la imagen (ancho y alto) no se agrega a los metadatos del archivo adjunto cuando se carga el SVG. Esto se debe a que la función para calcular la imagen utilizada es la función php getimagesize (), que no devuelve un tamaño de imagen para SVG. Encontré una respuesta en stackoverflow sobre la función getimagesize y sobre cómo se comportan los svgs. Véalo aquí.

    
pregunta gdaniel 12.08.2014 - 00:20

3 respuestas

9

Eche un vistazo a wp_prepare_attachment_for_js() , que es lo que recopila los metadatos de los adjuntos para su uso en las páginas de medios. El filtro homónimo nos permite agregar o modificar metadatos.

El siguiente ejemplo se puede colocar en functions.php. Nota: esto requiere el soporte de SimpleXML en PHP.

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);
    
respondido por el Josh 09.04.2016 - 19:50
2

Esto no es algo que pueda "piratear" fácilmente con un complemento o algún pequeño conjunto de código.

En resumen, los SVG, en general, no son "imágenes" en el sentido de todas las imágenes anteriores. Los SVG son imágenes basadas en vectores, y las primeras en obtener una tracción real en la web.

Todas las imágenes anteriores se han basado en mapas de bits. El sistema de manejo de imágenes de WordPress fue escrito específicamente para tratar con ellos, y este diseño inherente se encuentra en cada punto del sistema.

Es una suposición subyacente de que las imágenes tienen anchos y alturas, por ejemplo. Los SVG no tienen ninguno, pueden ser de cualquier tamaño. Hay un "editor" básico para las imágenes integradas en WordPress, ninguna de las funcionalidades de las cuales puede aplicarse realmente a los SVG.

El sistema multimedia se está reconstruyendo lentamente, con el énfasis aquí en "lentamente". Hay una gran cantidad de compatibilidad hacia atrás para mantener y nuevos diseños para ser implementados. Además, la mayoría de las personas están mucho más interesadas en el soporte de video, audio y listas de reproducción. A medida que se realiza este trabajo de rediseño, y las secciones de la biblioteca se vuelven más abstractas, este tipo de cosas será más fácil de soportar con el tiempo. Pero aún no ha llegado, y no será por un tiempo. Esta es la razón por la que no se admite el tipo mime SVG, porque agregar ese tipo mime hasta que todas las piezas subyacentes funcionen sería un camino a la rotura.

Para los SVG, wp_attachment_is_image debería devolver falso, porque wp_attachment_is_image se usa para determinar si se muestra el botón del editor y si o no image_downsize intenta cambiar el tamaño de la imagen a las miniaturas. Ninguno de los cuales funcionaría para SVGs de todos modos. Para admitir correctamente los SVG, necesitaría escribir un nuevo sistema para agregar metadatos para esas imágenes por completo, y luego agregar soporte para todos los lugares donde se puedan usar los metadatos. Como puedes imaginar, no es un trabajo pequeño.

    
respondido por el Otto 19.10.2014 - 20:46
1

Solo al leer la fuente (no las pruebas), puedo ver que la extensión debe coincidir:

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

que se lee como (pseudo código)

si      image/ son los primeros 6 caracteres en la propiedad $ post object post_mime_type     O hay una extensión     O import es la propiedad $ post objetos post_mime_type     Y la extensión del archivo actual es uno de (Array)

Y eso significa que la última declaración siempre decidirá si el if resulta verdadero o no.

Por lo que puedo leer en get_attached_file() , hay un filtro que permitiría falsificar la extensión:

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

En otras palabras, podría intentar devolver el mismo archivo pero con una extensión diferente. No entraría en conflicto con otras partes, ya que wp_attachment_is_image() solo devuelve bool .

    
respondido por el kaiser 19.10.2014 - 18:12

Lea otras preguntas en las etiquetas