I need to manipulate the <img> string returned by get_the_post_thumbnail().

I know I can add the $attr = "stuff here".

But how do I inject the source for the full size image into the one of the smaller sizes ('thumbnail', 'medium') strings.

I get this (simplified):

<img src="url/to/thumbnail_image" />

And need to end up with this (simplified):

<img src="url/to/thumbnail_image" data-zoom-image="url/to/large/image" />

I've tried to inject the larger images source path by trying to concatenate strings ...

$large_image_url = the_post_thumbnail_url( 'full' );

get_the_post_thumbnail( $the_post_id, 'medium', $attr = 'data-zoom-image=' . $large_image_url . '' );

But it gets stripped out. Anyone fought this before?

NOTE: I intentionally left out the wrapping quotation marks, as WP doubled them ... so that part of the output is working just fine.

  • $attr is an array of attributes, so you will need to pass your data to it as an array, too.
    – Johansson
    Jun 10, 2017 at 12:17

1 Answer 1


You need to use get_the_post_thumbnail_url (the one you're using echo's the URL).

get_the_post_thumbnail( $the_post_id, 'medium', [
    'data-zoom-image' => get_the_post_thumbnail_url( $the_post_id, 'full' ),
  • Thanks, according to the documentation: string|array $attr = '' could be used. Obviously not. Unless it should be read as »an array of strings«. Query string or array ... hmm.
    – Sam
    Jun 10, 2017 at 12:52
  • Your string version would also work with the get_ function, I just find array syntax clearer. Jun 10, 2017 at 12:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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