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?

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?

• media
• attachments
• gallery

Share Improve this question asked Mar 16, 2020 at 17:56 tylorreimertylorreimer 6511 silver badge88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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"