This is to discuss and coordinate work on the manage images screen in NG3.
I'd like also like to express my wish of an additional imagecache preset for admin thumbnails, because for example I most often use a gallery thumbnail size of 150 or 200, which is not really handy for tables like that (I think it should use 100x100 at most).
IMHO it would also be an option to have an optional integration with jQuery UI to get a draggable Grid: http://jqueryui.com/demos/sortable/#display-grid
Lists stop being practical when you have a lot of images (e.g. i have galleries with around 400 images).
I'm not good at doing interfaces, so I'll leave that task to someone who's better at it. I just wanted to have a place where I can express my wishes and where we can discuss the feature.
| Comment | File | Size | Author |
|---|---|---|---|
| #69 | manage_images.patch | 36.4 KB | justintime |
| #66 | manage_images.patch | 26.03 KB | justintime |
| #48 | ng-sort-images.patch | 18.06 KB | scroogie |
| #42 | Screen shot 2010-05-21 at 6.51.34 AM.png | 78.69 KB | kmonty |
| #39 | elevenen _ ng3.png | 47.61 KB | dbeall |
Comments
Comment #1
dbeall commentedan additional image cache preset for admin would be neat,, you could set it to 50x50(or any#) and compact the page some, neat. and then you could impose imagecache actions on those too depending on your theme.
EDIT: sorry, I meant image cache_effects
Comment #2
justintime commentedWe discussed via that a grid would be optimal, but unfortunately we have one jQuery wizard in the group, and he's been swamped. I'll ping him and see if he's got any bandwidth available.
Comment #3
scroogie commentedSo how do we start with this?
I changed my mind on VBO, it's quite cool. I played around a bit with the Manage Images screen as it is now, and as it is in 2.x and came to the following conclusions:
2.x good:
- It's nice to be able to edit caption and title
2.x bad:
- The rows are way too big, making it hard to manage galleries with many pictures
- It's irritating that you can sort here, because we have a 'sort images' screen.
- there should be a better way to move pictures between galleries
- Why is there a delete button in the "Sort" screen?
3.x good:
- It's nice to be able to search the images
- The interface is very clean and drupalish, as it works like the admin content screen
3.x bad:
- Again, the rows are way too big.
- Editing the capture and title is now 2 clicks per node away
- "Set an image as Cover" is not a bulk operation
Ideas:
- Add an node-gallery-admin-thumb imagecache preset for administrative operations, that is smaller
(to make the tables more compact, but also so that users can change their frontend thumbnail size without breaking the admin screens)
- Rename the screen image mass operations or image actions or something like that, and add only real bulk operations
- Remove the "Set image as Cover" action from the bulk screen, or hide it if you want to keep the action for trigger / actions
- Add a dedicated "Sort images" (before mass operations) screen with a very compact image representation to sort images
- Add a dedicated "Choose Cover" (before mass operations) screen which shows a Grid with thumbnails, choosing the Cover image by an onClick() handler on the image
What do you say?
Comment #4
justintime commented@scroogie, can you send me your email address via my d.o contact form? I'd like to fill you in on some back-emails we've had discussing some of this.
Comment #5
justintime commentedAlso relevant, the author of VBO didn't really see his module being used in this way, so it's likely going to involve getting our hands dirty in the views objects to make this work: http://drupal.org/node/708510.
Comment #6
scroogie commentedI sent you a mail. I think the sort images screen could be handcoded. It's indeed completely different than the other screens. Lets just fetch the views results, or query the database directly, and output our own code.
Comment #7
justintime commentedI'm really sold on the jQuery Sortable Grid as a means to sort. That would be a killer feature that would really set us apart from other gallery modules. I'm sure if you and I hacked on it hard enough we could get it working. Let's set sorting aside for now.
Comment #8
kmontySome back emails we discussed pulling this screen out of views entirely and custom coding the page. Might be the best approach, especially with Sortable Grid integration.
Comment #9
scroogie commentedWith jquery.ui, it's quite easy to just use a view and attach the sorting behaviour with javascript. I have a proof of concept locally. I don't know yet how to submit the form, though. :D
Comment #10
justintime commentedWe'll want to use node_gallery_change_image_weight_action_submit() and friends with batch API I would think. You can see in hook_form_alter() how I hacked up the tabledrag on the VBO view - maybe you can do something similar to interface into VBO? If nothing else, you can mimic VBO by setting the $context variable properly when calling those actions.
Comment #11
scroogie commentedHere is a rough proof of concept patch for image sorting by a Grid, using the http://drupal.org/project/jquery_ui module. It needs an additional view and an additional imagecache preset (should both be created on install). Still needs a lot of work, but it's a beginning, and it seems to work, too. ;)
I do not know the API for Actions and VBO and stuff, so I implemented it with the native Batch API.
Besides a lot of other stuff, it's missing the fallback path for when jquery_UI is not installed, so it probably fails miserably when it's not.
Comment #12
scroogie commentedForgot to actually attach the patch. Here it is.
Comment #13
justintime commented@scroogie, I've installed this to two different ng3 installs. I get the same result in both cases. The patch applies cleanly, and I get no errors, but I'm certainly not getting any jQuery hotness. I just get a series of images and links with no draggable features. Can you try applying the patch to a clean ng3-dev install and see if you can get it to work?
I have installed the jquery ui, and have it installed correctly with jquery.ui from google code. NOthing in the watchdog log, nor apache error logs.
Comment #14
scroogie commentedSo I probably just forgot to add a file, or something like that. I'll have a look later.
Comment #15
scroogie commentedjustintime: Do you get a ul list, or a Grid of images? And if you use Firefox, can you have a look if there is a message in the error console?
Comment #16
justintime commentedI get just a ul list of image titles and thumbnails. No errors in the console. A quick scan of the source html looks to me like there's no jquery/sort js being called anywhere. Is it possible for you to setup a fresh install of ng3.x-dev and test your patch? I'm pretty sure you'll be able to reproduce my issue.
Also, I just committed in code in .install to create a imagecache scale and crop of 50 pixels named node-gallery-admin-thumbnail.
Comment #17
scroogie commentedThe jquery/sort js is called by attaching the right CSS id from the javascript behaviour that gets added through drupal_add_js(). I don't know what the error could be at the moment. I'll try it out again (hopefully tomorrow).
Comment #18
dbeall commentedI can verify that the drag sorting works with NG3 cvs from today and the patch supplied.
It's neat!
Fresh install of node gallery on D6 wamp.
I had an extra admin thumbnail preset in image cache,, don't know, may have been left over..
Comment #19
dbeall commentedoh, btw, it did take a few moments for the images to appear,, they were all file names until image cache kicked in
Off Topic.. the default relationship did not get created at install time.
Comment #20
dbeall commentedmaybe a bug.. It drag sorts fine, but it will only show me 10 images on the sort page.
I checked the view and it is set to unlimited.
Comment #21
scroogie commenteddbeall: I've seen this bug, and thought it was only a local bug. Perhaps we should report this to Views. You can overcome this through adding the line
between the build() and execute() of the view.
Now it would be interesting why it worked for you, and not for justin... It looks as if I will be pretty busy for the rest of the week, but I hope I'll find a bit of time tomorrow to look into the issue.
Comment #22
dbeall commented@scroogie, Your on it!
The fix in #21 does the trick.
edit: it does take imagecache a few moments to execute (testers give a second or two.)
Justintime and 'crowd' will be the most popular people in the photography community...
This module is quickly approaching Awesome, NG3.. woot woot
The upload is so cool, and this drag sort is just plain FUN..
Just about time for a listed dev and beta
Comment #23
dbeall commentedI speak too soon, the images all load up now, and drag-n-drop sorting works, all as exspected,
but it won't keep the changes. Drupal/node_gallery message(The order of the images was left unchanged.)
Comment #24
dbeall commentedscratch that,, it seems that it won't save image moves with or without the added
$view->set_items_per_page(0);I guess I may have something set wrong or a bug..
Comment #25
justintime commentedI got mine working. JQuery UI wasn't getting enabled properly from drush. I just had to disable/re-enable via the GUI. My sort operation works properly, but I get the 10 image limit issue too.
Comment #26
justintime commentedJust a quick update before I call it a night - the views live preview doesn't limit the count to 10, so it's got to be something happening in the module.
Comment #27
scroogie commentedI think I'm going to refactor this a bit, to be able to have proper graceful degradation.
The form will be a "normal" form with a tree element with all the image ids and titles and a custom theme function. In the theme function I'll render the form accordingly, for jQuery UI and tabledrag (tabledrag degrades automatically).
The code will get more complicated, but it will be more accessible.
Stay tuned.
Comment #28
scroogie commentedMajor update:
It took some time getting used to drupal's tabledrag, but now I can present the sorting screen with graceful degradation! If jquery.ui is not enabled, it will create a tabledrag, if javascript is disabled, it should present weight dropdowns. Bonus: the Grid version now uses the same mechanism as the tabledrag. No more string processing. It updates the hidden weight fields, which made the submit function much easier.
TODO:
- styling of the whole screen (help message?), grid and table. I'm not the right person to ask for that.
- testing
Comment #29
scroogie commentedAnd no more problem with the image limit by the way.
Comment #30
scroogie commentedAnd changing status.
Comment #31
scroogie commentedDon't be alienated by the patch size by the way, more than half of it is the exported view. We actually don't need the second display anymore, by the way. You could eliminate it if you want.
Of course, we could also replace the view completely by a hand-coded query, but I guess we want to leave the View in, so the user can customize (and break) it more easily?
Comment #32
dbeall commentedI might not be doing this right..
apply the new patch to a fresh download of the 6.x-3.x-dev
if yes, the sorting not workin 4 me
but all the images show up on sort page.
Comment #33
justintime commented@scroogie - the bigger the patch, the less code I have to write :)
I'm working on 2.x as of late, and haven't had time to even apply the patch yet. I'll try to get some time to go over it before Monday.
Comment #34
scroogie commenteddbeall: are they appearing as a Grid, or as a table? If as a table, do they appear as a tabledrag table, or a table with dropdowns?
Comment #35
dbeall commentedThey are in a grid, it is a views page, all looks normal, just won't allow drag
EDIT,, that's why I think I may have done something wrong, maybe a file that should be there..
I started with a fresh NG3dev and applied only the patch from #28
Comment #36
dbeall commentedIf I disable jQuery UI, it goes to table drag, which does work and will save changes.
Comment #37
dbeall commentedI thought something wasn't right.. maybe views code.. not sure
I cleaned out everything in my NG3 install(module,imagecaches,all content,content types,aliases,all views).
did a reinstall with patch from #28 and the drag sorting is working now.
It saves the move(drag)(admin-thumbs trade places), but when I use the 'save' button, it won't save the change.
Comment #38
scroogie commenteddbeall: The patch modifies the install behaviour, so you must install NG3 *after* applying the patch. The filenames should not be visible in the Grid. You can use that as a hint to see if it's the right View that is displayed. There might also be an old view of the same name still in your database.
Can you also clear the cache of your browser please? (in Firefox "clear private data").
If it still doesn't work after that, can you have a look at the source of the page to see if there are elements like this:
<select name="images[4][sort]" class="form-select sort" id="edit-images-4-sort" >These are the hidden form fields where the weight is stored (which is the same mechanism drupal's tabledrag uses).
Comment #39
dbeall commentedThe patch was applied before installation on all testing. because of the install changes.
I had an old view in there that does not get deleted when the node_gallery module is uninstalled.
I cleared firefox.. I use that function 50 times a day..it's great!
The page code has the elements you noted. Looks all normal, acts normal, but not saving. Maybe I should try it on a live server.
Comment #40
scroogie commenteddbeall: can you come to IRC?
Comment #41
kmontyIt would be nice if you patched relative to the /node_gallery/ directory.
contributions/modules/node_gallery/node_gallery.css Locally Modified (Based On 1.4.2.2)Basically I have to move my modules folder under some folder "contributions." Kind of annoying.
Anyways, after moving nodegallery, the patch failed to apply.
Can you reroll it?
Comment #42
kmontyIt is definitely sort of working, but I am having similar problems as dbeall
1) Using Safari... When dragging the images, really odd spacing issues appear (see attached image)
2) Even though I can physically change the locations, it does not save the changes (as dbeall explained)
3) in the code there is a "$output .= '
';" In general, we should not use that sort of code. We should put a class="clearfix" on the wrapper div
Comment #43
justintime commentedI doubt this is the issue, but one of the things new in 3.x is some heavy caching of the images in a gallery, and their order within that gallery. Try clearing your cache and make sure that doesn't fix the problem. If it does, scroogie just needs to clear the cache after saving.
Comment #44
dbeall commentedyes, but.... it never gets that far, just as soon as the save function is 'excited', the admin-thumbs revert instantly to previous sort order.
edit,, unless the cache cleared at save time would hold the new position in the sort page too..??
this stuff is over my level of knowledge.
Comment #45
dbeall commentededited:
Justintime probably has the right idea.. thinkin the sort page 'save' function should do two things,, clear the NG3 db cache first,, then save the sort change after. i have no clue..
The table drag holds a change.. hmmm
**crawling back in my cave now**
Comment #46
kmontyI get the error: "The order of the images was left unchanged."
Clearing the cache didn't do anything.
Comment #47
scroogie commentedkmonty: You can use the -p N parameter. N is the number of levels you want to omit on the patch, e.g. -p 1 would leave out the "contributions" folder. Where the patch was made usually does not matter. The "contributions" is added because the module resides in the "contributions" folder on the Drupal CVS. Anyway, the problem is the new folder that is added through the patch. I'll reroll the patch on sunday!
Comment #48
scroogie commentedWell, I found some time today.
Try this patch with patch -p 0.
Comment #49
scroogie commentedkmonty: About the clearing br, you're right. I did not invest time in the HTML, as I guess that someone needs to style it anyway. It also needs a help message, and some ordering.
The "empty spots" you're seeing happen when there is a javascript error, so something is not right. Probably it was my messed up patch. It would be cool if you could try again. I put quite some work into the patch. :)
Comment #50
scroogie commentedAny feedback?
Comment #51
fuzzy time commentedi tried your patch in post #48 and everything seams to work. I just changed the field_node_gallery_image to display node-gallery-thumbnail in the view, because there were no images displayed at first. the thumbnails are now shown in grid when i go to sort image and they are dregable. its much easier to sort images now.
thank you very much and keep up the good work. its a amazing module!
Comment #52
justintime commented@scroogie - I'm committing this into 3.x HEAD, so that it can get some more exposure and testing.
I created a new issue for the jquery draggable grid issue, as this doesn't really fall under the scope of the manage images tab any longer. I posted some thoughts on the patch on the new issue: #824276: Implement a jQuery Draggable Grid for Image Sorting - please subscribe to that issue if you want to follow the jquery draggable grid issue.
Comment #53
scroogie commentedjustin: Thanks.
Regarding the manage images tab, I'll probably try to propose a patch with some changes after dealing with the other issue.
Comment #54
scroogie commentedkmonty: Can you create a patch with the clearfix patch for the other issue? I'm not good at theming, and a quick try with a wrapper div did not work out for me.
Comment #55
oxford-dev commentedNot sure if this thread is appropriate or whether it should be a new bug report but whenever I click 'manage images' i just get a white screen with not watchdog error and no apache error.
This is with the latest dev version, however the previous version had the same behaviour.
Comment #56
dbeall commented@oxford-dev, I am wondering what the max execution time is set at in your php.ini file..
Most are set at 30 seconds default, 120 to 200 might fix it..
max_execution_time=120;Maximum execution time of each script, in seconds
Comment #57
oxford-dev commentedIt instantly goes to white screen a split second after pressing the button. It isn't a time-out issue, thanks anyway.
Comment #58
igorik commented@Oxford-dev - what is your memory limit? To raise memory limit could fixed the problem.
Comment #59
scroogie commentedDo other Views Bulk Operation screens work for you oxford-dev?
Comment #60
justintime commentedI'm getting ready to take a crack at this. I see two viable options:
Personally, I'm leaning a bit towards Editview - it just feels like the more "Drupalish" way. It relies upon views, and uses AJAX. Instead of performing all edits in clicking a button that sends you into a batch like the 2.x manage images, it presents each node in a concise, editable form with a save and a delete button. Clicking either button performs an AJAX function that performs the necessary node_save() or node_delete() work.
Editview has been around awhile, has about 1,000 users of the 6.x branch, but seems to have idled a bit lately.
No matter what, I think we need to remove the requirement of VBO, but I'd still recommend it's usage for true batch editing (ie assign a vocabulary term to all images).
Thoughts?
Comment #61
scroogie commentedI'd say let's flesh out the hard requirement on VBO, but still provide an action to use with trigger (and possibly VBO if people want). So provide the optional integration, but make nothing required. For mass-assigning we can write some custom glue code. I mean, this is just a call to taxonomy_node_save($nid, $tids). I'm sure we can come up with a better Interface for that than a list of forms.
Comment #62
justintime commentedAgree on everything except that it's just a simple call to a function. There's a lot of different things that can be attached to a node that are not taxo terms, most significantly the huge array of CCK fields. There's also the option to delete nodes, we need to deal with that. We also need to use batch API since there's a good chance this bulk edit form will be used on 10's if not 100's of images. None of it's Drupal rocket science, but it's code that has a lot of nooks and crannies.
I'll just port the current manage images screen over, and we can start tweaking from there.
Comment #63
kmontyI like Editview but I see some potentially critical issues that might force us to not use the module:
#477288: Huge amount of memory used
#640684: Saving edited node causes 100% CPU usage
Also, considering the module hasn't had a commit in over a year and the issue queue is largely ignored, I'd hesitate to suggest relying on this essentially abandoned module unless we're willing to sign on as being a co-maintainer.
Comment #64
scroogie commentedAs far as I know VBO has the memory issue as well, not that this would be an excuse, just to say.
Justin: I was perhaps a bit fast with that, you're right. I didn't think about the other features that are implemented using VBO.
I'm looking forward to the port of the screen. I still think every row should be _much_ more compact though, so the screen is more clearly arranged.
Comment #65
justintime commented@kmonty - there's a taxonomy bug with Editview too where tag-style vocabs don't work right. Maybe when I have free time I'll jump right on that :) I think Editview is off the list until it gets a maintainer.
@scroogie - VBO doesn't have the memory issue because there's no (or at least not much) ajax involved on the client side.
Stay tuned for a commit sometime this week (I hope)
Comment #66
justintime commentedI need someone to take a fresh look at this for me. I'm pretty weak with FAPI, and even worse with theming. If you apply the patch, and visit the Manage Images tab, you'll get two copies of the form, one themed, and one not. Please don't apply this patch if you're not a developer, because the submit functions haven't been tested yet and are likely broken.
If someone can help me over this hump, I can move on and get this thing finished.
Comment #67
scroogie commentedHi justin,
Drupal is very smart when it comes to rendering forms. Everytime you call drupal_render on an element, it "flags" the element. If you call drupal_render on $form after printing a few elements, drupal checks if all elements are flagged as printed. All that are not flagged will be printed with the default theme function.
The problem is that you copy the element in a different variable before rendering it. See
theme.inc line 136:
Then you call drupal_render on $element.
For this to work, you have to make $element a reference.
Greetings
André
Comment #68
justintime commentedAwesome, thanks. FWIW, I copied the code from them_gallery_sort_images_form just below that function, but I see now that $element is never used when calling drupal_render() within that function. The original $form array is used instead. Learn something(s) new every day!
Comment #69
justintime commentedHoly crap that was a lot more work than I thought it would be. There's some black voodoo magick going on in that code. I would commit this straight in, but coming in at over 1,000 lines of patch, I think I need a tester or two to review it for me first.
Comment #70
justintime commentedI have the day off today, and need to commit this so I can commit other changes too.
I'm going to mark this fixed because I hate long issues. If we find bugs/UI issues with this, please start a new issue. The next dev build today will have this code in it.
Comment #71
scroogie commentedAwesome work! Will try to play with it if I find the time.