Eliminar Dimension de wp_get_attachment_image


10

Tengo problemas para eliminar el ancho y la altura de mis imágenes adjuntas cuando uso wp_get_attachment_image. Esto es lo que estoy usando para mostrar la imagen

 <?php echo $image = wp_get_attachment_image( $entry['slide_image_id'], true, 'full'); ?>

Cómo se ve el código fuente

 <img width="150" height="108" src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

Me gustaría que se muestre así

 <img src="http://website:8888/wp-content/uploads/2015/12/cupcakes-and-cosmetics-logo.png" class="attachment-1 size-1" alt="cupcakes-and-cosmetics-logo" />

La imagen se extrae de un campo de archivo repetible con una entrada con un id de slide_image_id. He estado mirando alrededor y he notado que debo usar wp_get_attachment_image_url, pero cuando lo uso con mi código anterior, la imagen no se muestra. ¿Hay algo que estoy haciendo mal?

 <?php echo $image = wp_get_attachment_image_url( $entry['slide_image_id'], true, 'full'); ?>

Nota al margen: $ entry ['slide_image_id'] es lo que se usa para llamar a mi campo de archivo repetible.


wp_get_attachment_image_url()devuelve una URL, no un elemento de imagen.
bosco

¿Cuál será la mejor solución en lo que estoy buscando @bosco
User3756781

Wow, qué molesto es que cada atributo de la salida img se pueda filtrar, add_filter('wp_get_attachment_image_attributes' ...excepto que solo la altura y el ancho están codificados.
squarecandy

Respuestas:


9

Sus argumentos para ambos wp_get_attachment_image_url()y wp_get_attachment_image()están en el orden incorrecto: consulte la documentación vinculada para obtener más detalles. Además, wp_get_attachment_image_url()devuelve una URL, no un elemento de imagen real.

No es aconsejable eliminar los atributos widthy heightde los <img>elementos: si el diseño de la página está influenciado de alguna manera por el tamaño de la imagen, el diseño "fallará" tan pronto como el CSS que especifica las dimensiones de la imagen, o la imagen en sí se cargue.

Desafortunadamente, la wp_get_attachment_image()función está actualmente (a partir de WordPress 4.4.1) codificada para generar los atributos widthy height <img>(vea el ticket # 14110 ), por lo que deberá construir el marcado de la imagen usted mismo. Esto se puede hacer tomando señales de wp_get_attachment_image()la fuente de :

<?php
  $attachment = get_post( $entry['slide_image_id'] );

  if( $attachment ) {
    $img_size_class = 'full';
    $img_atts = array(
      'src'   => wp_get_attachment_image_url( $entry['slide_image_id'], $img_size_class, false ),
      'class' => 'attachment-' . $img_size_class . ' size-' . $img_size_class,
      'alt'   => trim(strip_tags( get_post_meta( $entry['slide_image_id'], '_wp_attachment_image_alt', true) ) )
    );

    //If an 'alt' attribute was not specified, try to create one from attachment post data
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_excerpt ));
    if( empty( $img_atts[ 'alt' ] ) )
      $img_atts[ 'alt' ] = trim(strip_tags( $attachment->post_title ));

    $img_atts = apply_filters( 'wp_get_attachment_image_attributes', $img_atts, $attachment, $img_size_class );

    echo( '<img ' );
    foreach( $img_atts as $name => $value ) {
      echo( $name . '="' . $value . '" ';
    }
    echo( '/>' );
  }
?>

Seguí el enlace que me enviaste y pude generar la imagen sin problemas, así como utilizar tu solución. El único problema que tengo es cómo con la etiqueta alt. Con el enlace que me envió, no se genera una etiqueta alt y con la suya es estática (por eso pensé que wp_get_attachment_image sería la mejor opción). ¿Cómo generaría una etiqueta alt con el ejemplo que está mostrando? @bosco
user3756781

El problema resultó ser más complicado de lo que esperaba. Actualicé mi respuesta para incluir los <img>bits de generación de atributos wp_get_attachment_image(), aunque omití las partes srcsety sizesutilizadas para las imágenes receptivas. Si es necesario, get_sizeless_attachment_image()sería aconsejable crear una función .
bosco

gracias esto funcionó perfecto. Hubo un error en el código que hace a un echo de caracteres faltante ($ name. '= "'. $ Value. '"'; Debe ser echo ($ name. '= "'. $ Value. '"') ;. Gracias nuevamente por su ayuda @bosco
user3756781

12

Solución alterna

Hice algunas excavaciones / pruebas centrales y encontré una solución a través del wp_constrain_dimensionsfiltro:

// Add filter to empty the height/width array
add_filter( 'wp_constrain_dimensions', '__return_empty_array' );
// Display image html
echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );
// Remove filter again
remove_filter( 'wp_constrain_dimensions', '__return_empty_array' );

Esto parece permitirnos eliminar los atributos de altura y anchura de la imagen generada html de wp_get_attachment_image(), sin sacar los cánones reg-ex. También podríamos usar el wp_get_attachment_image_srcfiltro de manera similar para eliminar el ancho / alto pero manteniendo la url .

Notas

Esta solución se eliminará el srcsety sizesatributos también. Pero también es posible configurar los srcset y tamaños atributos a través del cuarto $attrargumento de entrada.

Como mencionó @bosco, ha cambiado los argumentos de entrada de icono y tamaño en:

echo wp_get_attachment_image( $entry['slide_image_id'], true, 'full' );

Use esto en su lugar:

echo wp_get_attachment_image( $entry['slide_image_id'], 'full', true );

1

Simplemente usé CSS para este. No funciona en todos los escenarios, pero a menudo lo hará. Tomemos una imagen de 300px x 300px:

max-height: 300px;
max-width: 300px;
width: auto;

Esto restringe las dimensiones de la imagen sin perder su relación de ancho a alto. De lo contrario, también puede usar REGEX:

$html = preg_replace(array('/width="[^"]*"/', '/height="[^"]*"/'), '', $html);

Estas fueron algunas alternativas. Buena suerte.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.