Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.One of the issues we're getting a lot of feedback about from clients is the nodereference autocomplete dropdown. We're using it a lot for e.g. attaching image nodes to other nodes (events having photographs, publications having book covers etc.) but currently when it autocompletes it just offers a list of titles. If you've got a lot of images, then node titles aren't always useful in distinguishing between them: what you really want is the thumbnail!
So: I've patched nodereference.module (see attached) to expose the autocomplete HTML to themeing. It doesn't change any default behaviour but it does mean that we can send JSON to the browser with thumbnail images in them! In your theme template.php you could have:
function phptemplate_nodereference_autocomplete_item($label, $nid) {
$image = node_load($nid)->images["thumbnail"];
return "<div class='reference-autocomplete'><span>$label</span>" . theme('image', $image); '</div>';
}
(Multiple node loading would be slow for a lot of autocomplete items: this is just an example and not optimized for speed)
Would really appreciate review of this patch: I think a lot of people could make use of it.
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | cck-333310-nodereference_autocomplete_themeing.patch | 1.54 KB | blakehall |
| #1 | nodereference.module.patch.txt | 1.52 KB | jp.stacey |
| nodereference.module.patch.txt | 1.49 KB | jp.stacey |
Comments
Comment #1
jp.stacey commentedSorry, old patch: doesn't pass the node ID to the theme function. Newer one attached.
Comment #2
yched commentedNot too keen on this. When using the 'views' mode, the displayed items are already the rendered rows of the view (whose content is determined by the view's fields), so theming on top of that looks strange.
What you're looking for could probably be achieved using the 'Views' mode, adjusting the fields of the view to include images, and then styling the autocomplete suggestions through CSS.
Setting as "won't fix" for now, could be reopened if the above suggestion doesn't do the trick.
Comment #3
jp.stacey commentedSorry, "won't fix" makes this disappear off my list of issues, so I've only just been able to find it again through Google!
I've set to "needs more info" and assigned it to me. If the views suggestion works then I'll set it back to "won't fix". Hope that's OK.
Comment #4
jp.stacey commentedThat works OK, yep. Needs a bit of styling but pretty much there. Sample HTML below for whoever needs it, as it's quite hard to get it out of e.g. Firebug when any clicking makes the autocomplete box disappear :) That hyphen's going to be a PITA to style....
<div style="margin-top: 20px; width: 393px;" id="autocomplete">
<ul>
<li>
<div>
<span class="view-item view-item-image_dropdown">
<span class="view-field view-data-node_title">Long image</span>
-
<span class="view-field view-data-image_nid">
<img src="http://.../" alt="Long image" title="Long image" class="image image-thumbnail" height="..." width="...">
</span>
</span>
</div>
</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
That stray hyphen with no markup is going to be a PITA to style....
Comment #5
mcarbone commentedYes, it can be done with views, but I think views support here was supposed to allow more sophisticated filtering, and not be a substitute for drop-down theming. I'm not sure why it would be a problem to change:
'rendered' => check_plain($node->node_title)to something like
'rendered' => theme('nodereference_autocomplete_item', node_load($node->nid))instead. And since this is in _nodereference_potential_references_standard, it wouldn't effect things rendered in nodereference_potential_references_views.
That way, I wouldn't have to create a separate view for each of the various node reference fields I have on my site just so I can theme the dropdown content.
I'm reopening for comment -- if switched back to won't fix, I guess I can deal with using a menu_alter.
Comment #6
jp.stacey commentedNot really up to me to decide whether to fix or not, so I'm bouncing it back to the queue!
Comment #7
markus_petrux commentedAs yched pointed out, it doesn't make much sense to provide a new theme layer for something that can already themed in Views, but...
...when not using Views it might make sense. Switching to "needs work" in case someone wishes to provide a patch that implements a theme function when autocomplete is not configured to use views.
Comment #8
chien_fu commentedDoes anyone know if this patch will work with the NodeReferenceCreate module as well?
http://drupal.org/project/noderefcreate
Comment #9
blakehall commentedHere's a simple patch to add theme_nodereference_autocomplete_item.
(As a side note, one of my projects needs this because of an incompatibility between _nodereference_potential_references_views and Views 3.)