I've been trying to find a simple and elegant solution to append the media/attachment IDs to my [gallery] shortcode html output. I've seen various functions to rewrite the whole output of the [gallery] html markup but none of them are very succinct and I'm convinced there's a hook or filter that can accomplish this.

The idea is to include the IDs as either HTML IDs (id=) or as data attributes (data-id=) and then use JS to keep track of the view count on the images—in this case I'm not looking for help on the JS portion.

Can anyone suggest the best way to accomplish this?

1 Answer 1


WordPress already does this, in at least 2 ways

For example, here is an <img> tag from a standard gallery block on my local test install:

<img src="http://one.wordpress.test/wp-content/uploads/2020/03/80694475_10220097889178767_6336534537924771840_n.jpg" alt="" data-id="15" data-full-url="http://one.wordpress.test/wp-content/uploads/2020/03/80694475_10220097889178767_6336534537924771840_n.jpg" data-link="http://one.wordpress.test/?attachment_id=15" class="wp-image-15" srcset="http://one.wordpress.test/wp-content/uploads/2020/03/80694475_10220097889178767_6336534537924771840_n.jpg 750w, http://one.wordpress.test/wp-content/uploads/2020/03/80694475_10220097889178767_6336534537924771840_n-300x229.jpg 300w" sizes="(max-width: 750px) 100vw, 750px">
  • There is a data attribute: data-id="15"
  • A HTML class: class="wp-image-15"
  • A link to the attachment admin page: data-link="http://one.wordpress.test/?attachment_id=15", though this may only appear when logged in

As an aside, did you know when you upload an image, it creates a post of type attachment and those posts have their own templates pages and URLs? You might be able to get what you're hoping for just by adding analytics snippets to those attachment pages, and making sure the images always link to their "media page"

  • Thanks @Tom J Nowell, I'll have to dig into it a bit as to why my WordPress isn't outputting the class and data-id. My page template is just outputting the_content and I didn't think there were any hooks existing in the theme that would remove that but I'll take another look and update once I have. Mar 16, 2020 at 18:40
  • it may be that you're using the old legacy classic editor, rather than the normal editor
    – Tom J Nowell
    Mar 16, 2020 at 18:49
  • I am using the Classic Editor. I don't suppose there's a way to include the data-attribute or HTML class easily on the Classic Editor is there? Mar 16, 2020 at 19:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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