Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: TEDER - Popup radio bar
photonomad wrote:
I do have one big question: How do you use bot_image_upload to associate an image with each content box?
Thanks glad to hear you are using it :)
For your question -
1.
Just for you and others to know – I wrote a code that grabs the images URLs from bot_image_upload and insert them where you want to:
http://forum.textpattern.com/viewtopic.php?pid=265441#p265441
(It really has nothing to do with “hak_tinymce”, it can be use everywhere)
2.
But here’s a code for your custom “content boxes” UI
First here how it works:
You click on an image in a content-box
you set a class name to that image (“selected”)
it opens bot_image_upload
a setInterval function start
you upload & select an image
when detects that your bot_image_upload field (article-image) value is not empty
(contains images IDs that you selected)
it will get that value with the image ID
with that ID will look for an element name “bot_iu_image_container” with another class name “id” with the image ID – for example:
.bot_iu_image_container.id123
that element contains the image with the url which we want to get.
Do a search to find the content-box with an image with the “selected” class, and change it “src” attribute.
Then to finish – remove the class from the image, remove the images from bot_image_upload, clear the setInterval function.
The function :
var get_bot_image_check;
function get_bot_image(){
// Your bot_image_upload field to be used
var from_field = '#article-image';
// Open bot_image_upload
$(from_field).parent().find('.bot_add_image').click();
// Create setInterval to check for any value every 1 second
get_bot_image_check = setInterval(function(){
if($(from_field).val() != ''){
// Get image ID
var image_id = $(from_field).val().split(',');
// Get image URL
var image_url = $('.bot_iu_image_container.id'+image_id[0]+' img').attr('src').split('?');
// Set the new image URL
$('.content_box img.selected').attr('src',image_url[0]).removeClass('selected');
// Clear images from bot_image_upload
$(from_field).parent().find('.bot_image_delete').click();
// Clear the checking of every second
clearInterval(get_bot_image_check);
}
},1000);
}The call :
(insert it somewhere after the creation of your content-boxes)
$('.content_box img').click(function(event){
event.preventDefault();
$('.content_box img').not(this).removeClass('selected');
$(this).addClass('selected');
get_bot_image();
return false;
});That’s all.
Last edited by THE BLUE DRAGON (2012-10-02 18:38:12)
Offline
Re: TEDER - Popup radio bar
Thank you so much! I’ve got it working as you instructed above. I also took some hints from your Youtube example in the tutorial and did the following in my custom_ui.js code:
added: var cbx_default_image = 'txp_img/add_image.png';
Under “// Set the HTML structure”, added:
+'<div class="cbx_image"><img src="'+cbx_default_image+'" alt="" /></div>'
And under “// Get the content from the items”, added:
var cbx_img = $(this).find('.cbx_image img').attr('src');
content_boxes_data += cbxf1+'~|~'+cbxf2+'~|~'+cbxf3+'~|~'+cbx_img+'~||~';
When I add an image and save the article, the full src to the thumbnail is saved in the Body:
field1data~|~field2data~|~field3data~|~http://www.mydomain.com/images/10t.jpg~||~
Two questions:
1) how do I strip the url so that I save only the image ID# in the data?
EDIT: also, any box with no image selected, saves “txp_img/add_image.png” in the data. Is there a way to not save any data for the field if an image hadn’t been picked?
2) How do I re-inject the image back into the thumbnail placeholder when I return to edit the article?
Thank you again for your help!
Last edited by photonomad (2012-10-02 20:27:44)
Offline
Re: TEDER - Popup radio bar
photonomad wrote:
Two questions:
1) how do I strip the url so that I save only the image ID# in the data?
You should not save only the ID#, because each image can have a different extension (jpg/png/gif)
That’s why you should save the image ID# with the extension.
So if you don’t want to save the full url, you can still save the ID# with the extension ~|~123.jpg~|~
or to save both separated 123~|~jpg
For that just modify the code to be like this:
// Get image ID
var image_id = $(from_field).val().split(',');
// Get image URL
var image_url = $('.bot_iu_image_container.id'+image_id[0]+' img').attr('src').split('?');
// Get image extension
var image_ex = image_url.split('.');
// Set the new image URL
$('.content_box img.selected').attr('src','/images/'+image_id[0]+'.'+image_ex[1]).removeClass('selected');Then you can just play with image_id[0] and image_ex[1] as you want to.
And for saving only the ID# with/without the extension you can do the same:
var cbx_img = $(this).find('.cbx_image img').attr('src').replace('\/images\/','');
cbx_img = cbx_img.split('.');
var cbx_img_id = cbx_img[0].replace('t','');
var cbx_img_ex = cbx_img[1];
content_boxes_data += cbxf1+'~|~'+cbxf2+'~|~'+cbxf3+'~|~'+cbx_img_id+'~|~'+cbx_img_ex+'~||~';photonomad wrote:
EDIT: also, any box with no image selected, saves “txp_img/add_image.png” in the data. Is there a way to not save any data for the field if an image hadn’t been picked?
Yes and no – you can filter out the default image url, but you must at least leave it blank ~|~~|~
if(my_image_variable == 'add_image.png'){
my_image_variable = '';
}photonomad wrote:
2) How do I re-inject the image back into the thumbnail placeholder when I return to edit the article?
Just the same as you do with any of the other data you save from your content-boxes.
If for text input fields we do this:
(from the tutorial)
// Insert each item content to it's place
$(cbx).find('.cbx_field.cbxf1').val(cbx_data[0]);
$(cbx).find('.cbx_field.cbxf2').val(cbx_data[1]);
$(cbx).find('.cbx_field.cbxf3').val(cbx_data[2]);then you can insert the image id/url to the image placeholder
// For full URL
$(cbx).find('.cbx_image img').attr('src',cbx_data[3]);
// For ID# together with an extension
$(cbx).find('.cbx_image img').attr('src','http://example.com/images/'+cbx_data[3]);
// For ID# + extension separated
$(cbx).find('.cbx_image img').attr('src','/images/'+cbx_data[3]+'.'+cbx_data[4]);Last edited by THE BLUE DRAGON (2012-10-02 22:13:34)
Offline
Re: TEDER - Popup radio bar
Thanks, Gil. I’ve been working through your answer and the good news is that my original problem was solved by replacing $(cbx).find('.cbx_image').val(cbx_data[3]); with $(cbx).find('.cbx_image img').attr('src',cbx_data[3]); (as you suggested above). Now the thumbnail images show up in the article when I reopen the article to edit!
However, I’m having a problem when I use the code below to try to isolate the image id:
var cbx_img = $(this).find('.cbx_image img').attr('src').replace('\/images\/','');
cbx_img = cbx_img.split('.');
var cbx_img_id = cbx_img[0].replace('t','');
var cbx_img_ex = cbx_img[1];
content_boxes_data += cbxf1+'~|~'+cbxf2+'~|~'+cbxf3+'~|~'+cbx_img_id+'~|~'+cbx_img_ex+'~||~';It is cutting up the url into sections with http://www and mydomain, etc. separated by ~|~ And it removes t’s in other parts of the url, including the ‘t’ in txp_img I’m sure it is something I am doing wrong!
Really I all I want to do is to be able to easily output the full size image on the front end of the site. I’m not sure how to do that when the full url in the body contains the thumbnail t.ext. Maybe there is a way to use txp tags or another plugin to strip out the t in the page/article template instead of going to the trouble in the custom ui script.
Thanks again for your help in guiding me through this process!
Offline
Re: TEDER - Popup radio bar
photonomad wrote:
It is cutting up the url into sections with http://www and mydomain, etc. separated by ~|~ And it removes t’s in other parts of the url, including the ‘t’ in txp_img I’m sure it is something I am doing wrong!
Good morning Stacey,
The code I posted above it is just an example, you need to change it to fit for you,
If you didn’t used the code I posted that let you save only the ID# and the extension, and you DO still save the full URL, then you need to change the value in the .replace() function.
For example if your full URL is: http://example.com/images/123t.jpg
then your replace function will be: .replace('http://example.com/images/','');
we are replacing your site domain URL with nothing, which means that we delete it.
(You can also use a split function instead if you like to.)
now what you got it is 123t.jpg which is the ID# and extension,
so we split it into 2 parts cbx_img = cbx_img.split('.');
now you got cbx_img[0] = 123t, and cbx_img[1] = jpg
we create to vars using them just for it to be pretty
var cbx_img_id = cbx_img[0].replace('t',''); which is the ID# and we are removing the t from it to get only the number.
var cbx_img_ex = cbx_img[1]; = extension (jpg/png/gif)
So now you can use these two in the output of content_boxes_data as long with the others.
Yes you don’t need the extension at all for your site code, that’s why we got TXP for, but you do need it to load it back in your custom UI when editing.
photonomad wrote:
Maybe there is a way to use txp tags or another plugin to strip out the t in the page/article template instead of going to the trouble in the custom ui script.
Sure there is – rah_replace is what you are after.
<txp:rah_replace from="http://example.com/images/,t,.jpg" to=""><txp:variable name="my_image_full_url" /></txp:rah_replace>
(or just only replace the “t” if that what you like to do)
You can wrap that line with a variable for it will be more comfortable to work with and then use <txp:image /> to output the image.
<txp:variable name="my_image_id"><txp:rah_replace from="http://example.com/images/,t,.jpg" to=""><txp:variable name="my_image_full_url" /></txp:rah_replace></txp:variable>
<txp:image id='<txp:variable name="my_image_id" />' />Offline
Re: TEDER - Popup radio bar
If one of the fields contains html characters (for instance, a chunk of Flickr embed code), the data is converted to entities at some point via (I think) rah_repeat. I am having trouble figuring out how to convert the data for the field/variable back to actual html characters. Hints/tips greatly appreciated. I’ve tride using html_entity_decode in the customui.js without results (I’m probably using it wrong). Or, I’m wondering if there is a more simple way to convert back to html characters using txp tags in the page/article? I’ve searched for plugins, but most seem to only convert html characters to entities. Thanks in advance for any hints/tips.
EDIT: I’ve ruled out involvement from rah_repeat.
Last edited by photonomad (2012-10-10 02:06:57)
Offline
Re: TEDER - Popup radio bar
Ok. My brain kicked in. Just needed to escape=”“ for the custom field. duh
<txp:rah_repeat value='<txp:custom_field name="customui" escape="" />' delimiter="~||~">
Offline
Offline