TEDER - Popup radio bar

THE BLUE DRAGON · 2012-09-05 17:55:35

TEDER is a pop-up radio bar and design shop based in Tel Aviv, Israel.
This year TEDER is also extending to Tokyo, Japan for 21 days.

TEDER Tel Aviv – http://teder.fm/home
TEDER Tokyo – http://teder.fm/tokyo

Watch the Tokyo CMS tutorial – http://teder.fm/tokyo/tutorial
(The Schedule is what you want to take a look at)

(Tel Aviv CMS got more features but I didn’t made a video of it yet.)

TXP 4.4.1

Plugins:

Plugins	Version
adi_calc	1.1
bot_image_upload	0.6.2
bot_write_tab_customize	0.7.1
ebl-image-edit	2.0
glz_custom_fields	1.3.0
hak_tinymce	1.0.2.1
jbx_multiple_image_upload	0.4
rah_external_output	1.0
rah_repeat	0.7
rah_replace	0.3
rah_urltolink	0.4.4
rss_auto_excerpt	0.5
smd_faux_role	0.20
smd_user_manager	0.11
upm_insert_tab	0.3
zem_contact_lang	4.0.3.6
zem_contact_reborn	4.0.3.20
zem_nth	0.1

.

As usual – huge thanks for all these who free some time and help me here in the forums :)

Last edited by THE BLUE DRAGON (2012-09-05 17:59:10)

sebatorresi · 2012-09-05 18:28:03

Oh it looks so amazing. Great work.

I have to work in a radio website soon, this is so helpful for me :)

photonomad · 2012-09-05 18:53:54

Wow! This is awesome. Great work and thank you for sharing!

colak · 2012-09-06 03:42:30

Yet another great work Gil. I hope that your approach to the admin UI will help in the development of future txp versions.

THE BLUE DRAGON · 2012-09-06 08:09:10

Thanks :)
It was fun working on it,
I only wish I had more time to make the code more clean, but never mind.

I will soon gonna publish a tip with the full code of how to make that kind of schedule UI as I did, in which it’s principle can be used for many other purposes.
And I will record a video that will explain what’s going on there behind the scene.

If you got any questions about what’s going on there (on any part of the site), so feel free to ask.
So I will be able to contribute back something to our lovely TXP community :)

One thing I can say for sure is never try to get a UTF-8 clean URLs for like Hebrew/Japanese languages,
just use /section/id , without any title.
Otherwise you will get bunch of errors on social media sites and it’s a pain in the ass!

I’m also gonna make a tutorial video page for the Tel-Aviv site TXP in which got one or two more features.

Last edited by THE BLUE DRAGON (2012-09-06 08:09:59)

tye · 2012-09-06 12:00:03

Looks great :)

haven’t had chance to go through the site in detail, but love the design :)

vk · 2012-09-07 19:03:02

Super Awesome! Thanks for sharing the video tutorial :)

THE BLUE DRAGON · 2012-09-07 20:10:46

Thanks :)
BTW: I haven’t designed site itself, only developed, the design made by another cool dude that I worked with on this project name Yonil as you can see in the credits at the bottom of the site.

Again, in case and you would like to see any piece of code, then let me know and I will share it.
(regarding the back-end or the front-end)

milosevic · 2012-09-08 08:12:24

Wow, nice works, congratulations! incredible customization of admin theme, I will have one thousand questions about “how did you made that thing…”.

THE BLUE DRAGON · 2012-09-13 15:37:09

Thanks :)
I wrote a tutorial for creating a custom Write UI, including 3 examples.
I shipped it over to Jonathan and it will be on TXPtips.com in a day or two :)

THE BLUE DRAGON · 2012-09-16 11:17:53

Here it is – my new tutorial for creating your own custom UI in the Write-tab.
TXPtips: http://txptips.com/create-your-own-custom-ui-in-the-write-tab
Youtube: http://www.youtube.com/watch?v=Vm6TkgfWXLA
Download video (HQ): https://dl.dropbox.com/u/49598471/projects/txptips/txptip_-_custom_ui.avi

Please share your thoughts with me on this one, thanks :)

photonomad · 2012-10-02 15:07:16

Gil! Thanks so much for posting these tutorials!!! I’ve really enjoyed watching/reading them. I would never have thought to use rah_repeat and javascript to blow open the possibilities for arranging content in the write tab. You make it easy to understand. I’ve already implemented the basic content boxes on my site and now I’m starting to manipulate it a little for my own purposes.

I do have one big question: How do you use bot_image_upload to associate an image with each content box?

EDIT: somehow I wasn’t subscribed to the thread with your response regarding my tinymce question!
I’ve studied the subsequent conversation and code to see if maybe I can figure out how to implement this within content boxes (like you do in your video at 17:55-18:50). Unfortunately, I’m having trouble making the leap to put it into practice.

Last edited by photonomad (2012-10-02 18:12:18)

THE BLUE DRAGON · 2012-10-02 18:36:17

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)

photonomad · 2012-10-02 19:58:40

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)

THE BLUE DRAGON · 2012-10-02 22:11:23

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)

Textpattern CMS

Textpattern CMS support forum

#1 2012-09-05 17:55:35

TEDER - Popup radio bar

#2 2012-09-05 18:28:03

Re: TEDER - Popup radio bar

#3 2012-09-05 18:53:54

Re: TEDER - Popup radio bar

#4 2012-09-06 03:42:30

Re: TEDER - Popup radio bar

#5 2012-09-06 08:09:10

Re: TEDER - Popup radio bar

#6 2012-09-06 12:00:03

Re: TEDER - Popup radio bar

#7 2012-09-07 19:03:02

Re: TEDER - Popup radio bar

#8 2012-09-07 20:10:46

Re: TEDER - Popup radio bar

#9 2012-09-08 08:12:24

Re: TEDER - Popup radio bar

#10 2012-09-13 15:37:09

Re: TEDER - Popup radio bar

#11 2012-09-16 11:17:53

Re: TEDER - Popup radio bar

#12 2012-10-02 15:07:16

Re: TEDER - Popup radio bar

#13 2012-10-02 18:36:17

Re: TEDER - Popup radio bar

#14 2012-10-02 19:58:40

Re: TEDER - Popup radio bar

#15 2012-10-02 22:11:23

Re: TEDER - Popup radio bar

Board footer