How to create an image picker
Permalink
I'm working on expanding the Customize Theme dashboard to allow the selection of a background image, but I'm new to concrete5 development (sooo much better than Drupal!) and I'm falling short in one critical area: how does one create an image picker?
For example, the code that allows concrete5 to create the color picker is:
<div hex-color="<?php echo $st->getValue()?>" style="background-color: <?php echo $st->getValue()?>"></div>
I'm guessing the rest is done in javascript, although that may not be the case for image pickers. How does one create an image picker in concrete5?
For example, the code that allows concrete5 to create the color picker is:
<div hex-color="<?php echo $st->getValue()?>" style="background-color: <?php echo $st->getValue()?>"></div>
I'm guessing the rest is done in javascript, although that may not be the case for image pickers. How does one create an image picker in concrete5?
Thanks Jordan! You're leading me down the right path. I've got everything working, except I don't know how to get an file ID from a URL when parsing the stylesheet. Any idea how to do that?
E.g. my css looks like this:
background-image:url('http://mysite.com/file/5513/7303/2983/myimage.png');
and I need to figure out what the corresponding concrete5 image ID is for myimage.png'.
I've been looking athttp://www.concrete5.org/documentation/developers/files/files-and-f... with no luck yet.
E.g. my css looks like this:
background-image:url('http://mysite.com/file/5513/7303/2983/myimage.png');
and I need to figure out what the corresponding concrete5 image ID is for myimage.png'.
I've been looking athttp://www.concrete5.org/documentation/developers/files/files-and-f... with no luck yet.
I don't think there's an "official" way to get the file ID from a path, but you can hack something together by searching the "FileVersions" table in the database. The "fvPrefix" field contains 12 numbers, which make up the numbered portion of the file path (so in your example,http://mysite.com/file/5513/7303/2983/myimage.png... corresponds to a fvPrefix of 551373032983), and the "fvFilename" field is the filename (myimage.png in your example).
However, note that this is probably not a great idea, because if the user modifies the file in the file manager (edits/resizes it, replaces it with a new upload, etc.) then the file version you're referring to is no longer valid.
I'm not sure how you're going about this, but I would step back and think how you can do this so that you're only ever dealing with file id numbers, and then when it's time to display an image you retrieve the file by its ID and display it -- but never should you go in the other direction and try to get to a file ID by starting with a path or URL.
Good luck!
However, note that this is probably not a great idea, because if the user modifies the file in the file manager (edits/resizes it, replaces it with a new upload, etc.) then the file version you're referring to is no longer valid.
I'm not sure how you're going about this, but I would step back and think how you can do this so that you're only ever dealing with file id numbers, and then when it's time to display an image you retrieve the file by its ID and display it -- but never should you go in the other direction and try to get to a file ID by starting with a path or URL.
Good luck!
Then, for each image picker, use this code:
Note that the "$fID" variable will need to be changed to whatever you're using for the File ID. Also, the two instanced of 'fID' in quotes on the second line need to be changed to whatever the variable name is as well (this is what the control will POST the chosen file id to). The word 'Image' is a label, so you can change that to something more appropriate (like 'Background Image' in your case).
Also note that this code is just for the display of the image picker. You'll need some code on the back-end to receive the POST'ed file ID(s) and save them in the database somewhere.
-Jordan