Remove Dimension from wp_get_attachment_image

by user3756781   Last Updated November 09, 2018 01:08 AM

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.



Answers 3


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( '/>' );
  }
?>
bosco
bosco
January 06, 2016 20:45 PM

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 );
birgire
birgire
January 06, 2016 22:22 PM

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.

JMRC
JMRC
November 09, 2018 00:21 AM

Related Questions


Updated March 26, 2015 11:02 AM

Updated June 30, 2015 20:03 PM

Updated October 03, 2017 11:08 AM

Updated April 15, 2016 08:03 AM

Updated January 01, 2017 08:03 AM