WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
    
wp_get_attachment_image_url() returns a URL - not an image element. – bosco Jan 6 at 20:27
    
What will be the best solution in what I am looking for @bosco – user3756781 Jan 6 at 20:28
up vote 8 down vote accepted

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( '/>' );
  }
?>
share|improve this answer
    
I did follow the link you sent me and was able to generate the image without problem as well as using your solution. The only problem I am having how is with the alt tag. With the link you sent me an alt tag is not generated and with yours it is static (which is why I thought wp_get_attachment_image would be the best option). How would I generate an alt tag with the example you are displaying? @bosco – user3756781 Jan 6 at 20:52
    
The issue turned out to be more complicated than I anticipated. Updated my answer to include the <img> attribute generation bits from wp_get_attachment_image() - though I left out the srcset and sizes parts used for responsive images. If these are needed, creating a function get_sizeless_attachment_image() would be advisable. – bosco Jan 6 at 21:34
    
thank you this worked perfect. There was an error within the code do to a miss character echo( $name . '="' . $value . '" '; should be echo( $name . '="' . $value . '" ');. Thank you again for your help @bosco – user3756781 Jan 7 at 14:26

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 );
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.