bot_image_upload: upload, sort, edit, show images in ‘write' tab

redbot · 2010-06-03 11:22:46

This plugin allows to upload, sort, edit and preview images within the ‘write’ tab.
Similar in concept to my other plugin bot_file_upload it uses a modal window to add and edit images. Moreover it shows a preview of the article image directly in the ‘write’ tab thus incorporating someway my previous ‘bot_show_image’.

The plugin does not alter texpattern natural behavieur, it just operates at a visual level hiding the field and replacing it with an interface. Under the skin, images are still stored normally as comma separated values.

Features:

Multiple fields (“article image” or any other custom field) can be set for the plugin to operate.
A field can be set to accept single or multiple images
Images associated with an article are shown alongside the article itself
Drag’n‘drop support for easy images sorting in the ‘write’ tab’

For example you may want to set the “article image” field to accept only one image, custom field 2 to accept a list of them for a gallery, custom field 3 for another gallery and so on

If you are associating a lot of images with an article I suggest to use my other plugin bot_wtc to move the field in the central colum for a nicer look

It has no configuration interface. If you want to change some default settings you must configure the plugin directly in the plugins code. Go to plugins > edit and search for ‘Global preferences – Configuration’ in the first lines. Read instructions for more help.

Installation

Just install the plugin the normal way. If you want to sort images (optional) you must upload the jquery ui script which comes with the plugin. Default location is in ‘textpattern’ directory. If you choose another you must change the path in the plugins preferences (bot_iu_ui_path)

Info and download

Last edited by redbot (2011-03-25 11:01:42)

aswihart · 2010-06-03 16:25:23

Awesome redbot, I’m always interested in new image uploading plugins. I’m especially looking forward to what you might plan to do with multiple image uploading. I wonder if you might bump heads with this guy, who already has multiple image upload working on the Image tab, but right now it’s not working when I tried it in the mini-window your new plugin provides.

Clicking “Choose Image” (which replaces the Article image text box) on the Write tab, you get a little popup browser within a browser of the Image tab. Unfortunately, I am often being asked to sign into Textpattern again in this little window. It would be much better if was possible that this never happened.

Image tab content should be better optimized for display in the little popup browser. For instance, the navigation bar at the top should not even be displayed I think. And after uploading normal (large) size photos, you have to use the horizontal and vertical scrollbars to move around the window until you finally notice the “Save” button off in the lower right corner. Forcing a width with CSS might work, but that would also likely have to affect the normal Image tab. Same goes for editing images, it’s simply not practical for images larger than the little browser window. Is there any room for customization here or is it required to be a carbon copy of the normal Image tab in a little browser window?

Currently, using the normal Image tab along with upm_img_popper gives a somewhat similar user experience without the above usability issues.

For me, lam_image_uploader, jmd_image_selector, and bot_show_image together approximate what I need the best. I just wish lam_image_uploader and bot_show_image had multiple image uploading / display support.

I’m guessing the current single article image limitation of your plugin is due to reusing the old bot_show_image code. I’m eagerly looking forward to this plugin being able to support multiple article images and displaying all of them on the Write tab!

redbot · 2010-06-03 16:58:20

aswihart wrote:

… I wonder if you might bump heads with this guy, who already has multiple image upload working on the Image tab, but right now it’s not working when I tried it in the mini-window your new plugin provides.

Hi,
I’ve tried it and it sort of works for me. The problem is that this plugin also uses javascript/jquery to add items on an existing html document, so – while I can interact with html items present in the original document (the images tab) – I find it difficult to manipulate items added by javascript… I hope I’ve been clear enough…

….Clicking “Choose Image” (which replaces the Article image text box) on the Write tab, you get a little popup browser within a browser of the Image tab. Unfortunately, I am often being asked to sign into Textpattern again in this little window. It would be much better if was possible that this never happened.

Er… this shouldn’t be happening and never happened to me. I’ll check it.

…Image tab content should be better optimized for display in the little popup browser. For instance, the navigation bar at the top should not even be displayed I think.

Er… again… I think something is not working properly then… the navigation bar and a lot of other items should be hidden

…And after uploading normal (large) size photos, you have to use the horizontal and vertical scrollbars to move around the window until you finally notice the “Save” button off in the lower right corner.

You’re Right, I’ll see to add another save button to the top

… Forcing a width with CSS might work, but that would also likely have to affect the normal Image tab. Same goes for editing images, it’s simply not practical for images larger than the little browser window. Is there any room for customization here or is it required to be a carbon copy of the normal Image tab in a little browser window?

This is the problem with iframes – afaik they must have a fixed width. Notwithstanding you can easily edit its size configuring the plugin.

BTW which browser are you using?

aswihart · 2010-06-03 17:07:30

Thanks for the rapid reply, using Firefox 3.6.3

redbot · 2010-06-03 17:18:08

aswihart wrote:

… using Firefox 3.6.3

Hmm.. me too… And I’ve tested it also in all major browsers.

Here are two screenshots of what it should look like.

BTW thanks to help me with testing

Last edited by redbot (2010-06-03 18:05:06)

aswihart · 2010-06-03 18:14:42

Yeah everything looks like you are showing except I still get the navigation bar. I wonder if this has anything to do with using Remora instead of Classic admin themes? I switched back to classic, but I still get the Remora nav bar in the iframe.

Also, I get a horizontal scrolling bar in the iframe that is seemingly useless (just empty white space in the scrolled area)

redbot · 2010-06-03 18:47:37

aswihart wrote:

… I wonder if this has anything to do with using Remora instead of Classic admin themes?

Good point, haven’t thought of that. I’ll test it asap

… Also, I get a horizontal scrolling bar in the iframe that is seemingly useless (just empty white space in the scrolled area)

Yes, these are typical iframe issues.
The fact is the scrollbar will appear depending on it’s content (the image tab) width. I’ll see if this can be changed – anyway this is the reason why I put most of the plugin-generated css in customizable variables under ‘configuration’. Try increasing the iframe width.
The plugin is actually intended to be slightly adapted to the site css, if you are not using a standard textpattern admin.

redbot · 2010-06-03 18:59:58

Ok, you were right. The plugin was built using the classic theme so has some little problems with remora.
I’ll fix in the next version.
For now this will fix two problems together (navabar + scrollbar): around line 113 add these two lines:

iframe.find("#nav").hide(); // hide nav in remora
iframe.find("#messagepane").hide(); // hide messagepane in remora

This won’t solve the login problem though.

aswihart · 2010-06-03 21:35:45

Sweet, that also took care of the horizontal scroll bar issue.

Noticing that only the most recently uploaded pics will display immediately on the Write tab after being added with the plugin. Other pics are hidden, and it looks like this.

Once you save the article with the selection made (even though you can’t really tell that it’s been made), the thumbnail displays fine.

redbot · 2010-06-04 00:41:26

First of all, thank you for helping me to test the plugin.
Of course this shouldn’t happen… I’ll have a look asap, now it’s too late here.

candyman · 2010-06-04 06:48:08

On my site I have a js.gallery which loads different images called by image ID separated by a comma.
I’ve tried your latest plugin and I’ve got this:

Errore nel caricare il plug-in: bot_image_upload -> User_Warning: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ’71,77,73,75,76’ at line 1
select ext from txp_image where id = 72,71,77,73,75,76 on line 85

may bot_image_upload not support this method?

BTW: bot_show_image should be turned off when you install bot_image_upload or can they live together?

Last edited by candyman (2010-06-04 06:53:29)

sacripant · 2010-06-04 11:03:45

Hello, sorry for my bad english

Thanks for your plugin. It’s a good ergonomy.

In my locale install, I have no checkbox .add.

In your code, you add checkbox after "td:nth-child(9)" but in my table I’m only 7 nth-child.
For the checkbox I need to change the code : iframe.find("#list td:nth-child(7)") at line 125.

And I can’t checked multiple checkbox for add multiples images ID to the image field.

Textpattern CMS

Textpattern CMS support forum

#1 2010-06-03 11:22:46

bot_image_upload: upload, sort, edit, show images in ‘write' tab

#2 2010-06-03 16:25:23

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#3 2010-06-03 16:58:20

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#4 2010-06-03 17:07:30

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#5 2010-06-03 17:18:08

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#6 2010-06-03 18:14:42

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#7 2010-06-03 18:47:37

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#8 2010-06-03 18:59:58

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#9 2010-06-03 21:35:45

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#10 2010-06-04 00:41:26

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#11 2010-06-04 06:48:08

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

#12 2010-06-04 11:03:45

Re: bot_image_upload: upload, sort, edit, show images in ‘write' tab

Board footer