Forums

Choose image dialog callback function?

Permalink 1 user found helpful
Hello,

I'm creating a block that has an image selection dialog, just like the basic image block, for example. However, I'm looking for a way to fire some certain javascript functions immediately after the user has selected the image. I tried searching the forum but found only something remotely related, not solving the problem...

So, any ideas how to add callback functions to the image select dialog?
 
andrew replied on at Permalink Best Answer Reply
andrew
We just added this in 5.4.2. It's pretty undocumented and we've only used it in a couple places, but you can do this:

First, use the asset library helper to place an image select widget in the page:
<?php echo $al->image('ccm-b-image', 'fileID', t('Choose Image'), $bf); ?>

Then, define this javascript:
<script type="text/javascript">
ccm_triggerSelectFileComplete = function(fID, af) { 
   // af = ccm-b-image
   ccm_alGetFileData(fID, function(data) {
      crop = false;
      td.html('');
      dw = data[0].width;
      dh = data[0].height;
   });
}
</script>


The function will run, with the selected file ID as its first argument, and the ID of the selector that was active as the second parameter. Then you can use the ccm_alGetFileData (which takes a file ID) to retrieve information about the file. Run a console.log on the data parameter that gets passed to the ccm_alGetFileData function to see what properties are available about the selected file.
Ale replied on at Permalink Reply
Whoa, that's awesome! Nice to hear that it's a built-in feature now.

Thanks.
melat0nin replied on at Permalink Reply
melat0nin
Hi Andrew

Is there an equivalent for when a file selection is cleared from the popup menu? The function isn't triggered in that scenario.
nerdess replied on at Permalink Reply
nerdess
Is there also an equally clever way build-in to add >>>multiple<<< images within a block? i had a look at the slideshow plugin and if not i will get my inspiration from there...
jordanlev replied on at Permalink Reply
jordanlev
Unfortunately there is no built-in system helper for handling multiple images -- you need to do it yourself. I've done so myself, but am never happy with the complexity of the code involved (I have always taken the built-in slideshow block as a starting point).

Some day in the distant future I hope to build a cleaner implementation of this editing functionality, and maybe even do it in a way that it becomes a system helper that can be used as easily as the single image selector. But that day is a long way off (if it ever even comes), so in the meantime you're going to have to wade through the slideshow block code (or do it yourself from scratch -- which might be easier depending on how different from the slideshow block you want your own editing interface to be).
nerdess replied on at Permalink Reply
nerdess
Ah, aren't you the guy who built the very nice "Designer Content" plugin?!

I wanted to use it for the block I am writing atm but didn't, just because it doesn't allow multiple images so I am writing it from scratch now :-/

The complexity comes from having to add another table that holds the images and then having to customise the controller to deal with it it.

Maybe one solution would be instead of having this extra table to simply store the information about the image(s) (fID, width, height, position....) in a serialised array that gets chucked into the "master" block table alongside all the other data. Though it is a bit naughty to code like that........hmmmmm.....plus there is the Javascript that needs tweaking......I don't know. I will code my block with an extra table now.
jordanlev replied on at Permalink Reply
jordanlev
I sure am the Designer Content guy -- glad you like it.

Shoot me an email at concrete@jordanlev.com, I have something that might be of help to you.