Remove Dimension from wp_get_attachment_image

Question

I am having some issue removing the width and height from my attachment images when using wp_get_attachment_image. This is what I am using to display the image

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

How it looks the the source code

 <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" />

I would like it to display like this

 <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" />

The image is getting pulled from an repeatable file field with an entry with an id of slide_image_id. I am have been looking around and have notice to use wp_get_attachment_image_url but when I use it with my above code the image does not display. Is there something I am doing wrong?

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

Side note: $entry['slide_image_id'] is what is being used to call my repeatable file field.

Answer 1

Your arguments for both wp_get_attachment_image_url() and wp_get_attachment_image() are in the wrong order - check the linked documentation for details. Additionally, wp_get_attachment_image_url() returns a URL - not an actual image element.

Removing the width and height attributes from <img> elements is inadvisable: if the layout of the page is in any way influenced by the size of the image, the layout will "glitch" as soon as the CSS which specifies the image's dimensions, or the image itself loads.

Unfortunately, the wp_get_attachment_image() function is currently (as of WordPress 4.4.1) hard-coded to output the width and height <img> attributes (see ticket #14110), so you'll need to build the image markup yourself. This can be done by taking cues from wp_get_attachment_image()'s source:

<?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( '/>' );
  }
?>

Answer 2

Workaround

I did some core digging/testing and found a workaround through the wp_constrain_dimensions filter:

// 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' );

This seems to allow us to remove the height and width attributes from the generated image html of wp_get_attachment_image(), without getting out the reg-ex canons. We could also use the wp_get_attachment_image_src filter in a similar way to remove the width/height but keep the url.

Notes

This workaround will remove the srcset and sizes attributes as well. But it's also possible to set the srcset and sizes attributes through the fourth $attr input argument.

As mentioned by @bosco, you've switched the icon and size input arguments in:

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

Use this instead:

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

Answer 3

I simply used CSS for this one. It doesn't work in all scenario's, but often enough it will. Let's take a 300px x 300px image:

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

This constrains the dimensions of the image without losing its width to height ratio. Otherwise you can also use REGEX:

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

These were some alternatives. Good luck.

Answer 4

Regex approach

After retrieving the raw image output that will include the width and height attributes, simply remove them with a regex replace of an empty string:

<?php
$raw_image = wp_get_attachment_image( $entry['slide_image_id'], true, 'full');
$final_image = preg_replace('/(height|width)="\d*"\s/', "", $raw_image);
echo $final_image;
?>

In the future, it would be great if WordPress supplied a filter to get suppress these attributes.