Fire a hook/event when an attachment is selected?

A quick brief of how I use Attachments so you can understand my needs easiar...

I use this amazing plugin for my Portfolio CPT to attach any number of screenshots to a project.

1 of the meta fileds I have on each attachment is a dropdown selection to pick the placement position of the image,

The options are:

Description in LEFT column and screenshot in RIGHT column
Description in RIGHT column and screenshot in LEFT column
Description in CENTER above the screenshot where both desc and screenshot are full width
Screenshot in a "Full Height" mode where it is shown inside of a "Browser" image and have a scroll-bar to scroll down and see the whole webpage as if it was in a browser. For example if the screenshot is 2000px tall and the preview browser windows image is 800px tall. Then you scroll down inside the browser image to see the whole page screenshot!
Animated GIF - When this is selected, it wraps in special code and also has some JS that makes the animated GIF act as a movie where the user can start and stop the GIF from "playing" It does this by showing a static image and pre-loading the GIF as well as switching them out for ach other each time the image is clicked on! Many sites are using this method now, including Twitter and hundreds of others!

As you can see, my portfolio is super flexible thanks to the use of Attachments! I love it!

In the spirit of making good things even better, I do not really like the selection filed being used for what I describe above.

My better solution is a little bit of JavaScript to hide the selector field and clone it and then assign a background image to each selection option.

The user can then see a more descriptive style image and click on it to select that item. Clicking the image will then select the hidden selectors option that matches up to the image!

Probably would make more sense by me simply showing you a mockup image...

Looking at the image above you can probably have a better idea of what I am tryig to do. SImply replace a certain selection field, with a more user friendly UX/UI clickable image to selects option.

When done a better image will be used also that will somewhat show what each option means at a quick glance!

My biggest headache and hurdles so far....

Problem 1)

On page load, my pre-exist6ing attachments are on the edit screen already so they are all converted to my image pickers.

When I click to add new attachments, they are injected into the DOM and my image picker code is never ran!

I need to figure out some sort of hook so I can hook into when an attachment is selected so that my code can run on new attachments,

Any ideas on a solution here? I didn't see anything in the docs yet for the plugin?

Problem 2)

This is what mI see generated in the DOM for each selector....

<select name="attachments[my_project_photos][55eca98a4c246369797634][fields][position]" id="attachments[my_project_photos][55eca98a4c246369797634][fields][position]55eca98a4c246369797634" class="attachments attachments-field attachments-field-attachments[my_project_photos][55eca98a4c246369797634][fields][position] attachments-field-attachments[my_project_photos][55eca98a4c246369797634][fields][position]55eca98a4c246369797634">
    <option value="1" selected="">Image Right of Text </option>
    <option value="2">Image Left of Text</option>
    <option value="3">Image Center w/Text on Top</option>
    <option value="4">Full Height Image Right of Text in Scrollable Browser</option>
    <option value="5">Animated GIF Image Right of Text with a Play/Pause Button</option>
</select>

The only CSS CLass I can maybe use here...

attachments and attachments-field and they are so generic that if I have multiple selection fields on each attachment record, then it targets all of them!!!!

Of course there our modern day browser hacks to get around and perhaps get the first item, etc...

But this is really not a good way for this...all im asking is in the options for a field to allow a CSS Class/ID to be passed in. If not that, at least generate a unique class name per field so that all fields of that type can easily be targeted.

So issue is my main concern right now. I need to somehow hook into when an attachment item is added so I can run my code again!

Any help greatly appreciated. The plugin is amazing for my usage.

jchristopher / attachments

Fire a hook/event when an attachment is selected? #154