The title of this issue should actually read like this:

Popup UI garbled, confused about Styles, emimage thumbnails fail, WYSIWYG vs fields, other quirks /or/ Why i desperately want to use nrembrowser but don't know how

I'm going to do my very best to explain my case as clearly and concisely as possible. To that end, i've attached screen captures with captions to illustrate many of the issues raised herein.

I. My setup

A. Enabled modules (relevant to this post)

B. Content/field/widget types (relevant to this post)

  • content type: "image" / field type: "File" | widget type: "Image"
  • content type: "Flickr Image" / field type: "Embedded Image" | widget type: "3rd Party Image"
  • content type: "Vimeo Video" / field type: "Embedded Video" | widget type: "3rd Party Video"
  • content type: "YouTube Video" / field type: "Embedded Video" | widget type: "3rd Party Video"
  • content type: "Story" / field type: "Node reference" | widget type: "Media browser"

C. Enabled themes (possibly relevant to this post)

From this point on, please consider opening the respective attachments in a new window as they are meant to accompany this post.

II. (Relative) success with a node reference field and template file

So my "Story" content type is presently configured with a node reference field named "Media" that uses nrembrowser to select nodes of my "Image", "Flickr Image", "Vimeo Video" and "YouTube Video" content types. Of course in referencing these nodes, I have no interest in displaying their publish dates, comments, etc., so i've created a node reference field template file to isolate and display only the actual media content of these respective nodes. This template file is called "node-nodereference-field_media.tpl.php" and its code looks like this:

<?php if (empty($hide)): ?>

<?php if ($node->field_image): ?>
  <?php print $node->field_image[0]['view'] ?>
<?php endif; ?>

<?php if ($node->field_third_party_image): ?>
  <?php print $node->field_third_party_image[0]['view'] ?>
<?php endif; ?>

<?php if ($node->field_third_party_video): ?>
  <?php print $node->field_third_party_video[0]['view'] ?>
<?php endif; ?>

<?php endif; ?>

Now then, within the "Display fields" of each of these respective, referenced content types (admin/content/node-type/[my-content-type]/display), i've specified specific Colorbox/ImageCache presets to display in every view (Teaser, Full node, RSS, etc.) This then allows my "Story" content type to display the media content of the referenced nodes dynamically, depending on the view. Viewing my "Story" node as a teaser? Then specifically teaser-formatted node reference media content is displayed. Viewing my "Story" node as a full node? Then specifically full node-formatted node reference media content is displayed. Hopefully you get the idea...

All of this works swimmingly... with only one quirk worthy of mention before i move onto the real difficulty.

When my "Media" node reference field is configured to use nrembrowser as it widget type and i set the "Number of values" to "Unlimited", then for some reason two fields with an "Add another item" button—instead of one field with "Add another item" button—are always displayed during node editing (see attachment).

But now please let me explain where i'm having great trouble.

III. Popup UI failures and quirks

A. Theme-specific styling failure

Firstly, the nrembrowser popup UI is a disaster when used with my administration theme, Rubik (see attachment). Beyond the flawed styling of the popup, the few thumbnails that actually are visible, are not clickable. If i get my cursor directly on the gray outline surrounding the thumbnail, then i can select it. The image itself however, is not a link.

B. Theme-specific styling success

But if i view the nrembrowser popup UI from my development site's default, stripped down Tao sub-theme, it's quite orderly and functional (see attachment).

C. Problems with emimage thumbnails

In either case, however, thumbnails generated from my "Flickr Image"/Embedded Image field content type do not properly display.

  1. Select thumbnail from emimage field

    Specifically, if from Node Reference / Embed Media Browser's "Node type settings" (admin/settings/nrembrowser) i select the browser thumbnail from the emimage field, then the (beach scene) default icon displays. (This puzzles me because for all other referenced content types, i've selected the browser thumbnails from either the filefield or emvideo field with success.)

  2. Select thumbnail from full node

    If from Node Reference / Embed Media Browser's "Node type settings" (admin/settings/nrembrowser) i select the browser thumbnail from the full node, then an actual icon sometimes displays.

D. Refresh popup after node creation?

One more thing, which is less of a support request and more of a feature request...

The "Add [content type]" option available within the popup UI, allowing the user to add a media-containing node within the UI itself, is fantastic. It would be great however, if the popup would do something like a refresh whenever the user creates a new node from within the UI. As it stands now, the only way to see and select the thumbnail of any within-the-UI-created node is to either close and reopen the popup or to click away from and then back to the current tab. While this is no problem for me, clients might not understand.

IV. What is the purpose of Styles/Styles UI/Filefield Styles?

I have to be missing something obvious, but having installed all three of these modules, i have nevertheless found no UI or added configuration options (besides a single permission: "administer styles") anywhere within my site. What functionality are these modules supposed to add and at what path should they be located? How do these modules relate to nrembrowser?

V. Wysiwyg integration: existing functionality VS desired functionality

As i mentioned in subheading II, nrembrowser paired with a node reference field works relatively well. Pairing nrembrowser with Wysiwyg (CKEditor) to embed inline media within my referencing node's body, however, is sort of bewildering me.

A. Existing functionality

Here's my process so far:

From CKEditor i click the nrembrowser button which opens the popup. I select the thumbnail of the node i want to reference and then i'm prompted with three "Style" options: "<none>", "Thumbnail" and "Teaser".

  1. The "<none>" style

    The "<none>" style outputs different content depending on the field that is being referenced...

  • If the referenced field is of type "File" or type "Embedded Video", then the "<none>" style outputs a raw image (no ImageCache settings applied) of my referenced node field. No link to the node or any further content is included.
  • If the referenced field is of type "Embedded Image", then the "<none>" style outputs an ImageCache-formatted image of my referenced node field. Specifically, the output is the "Full node" setting i've specified in the "Display fields" of this node type (admin/content/node-type/[my-content-type]/display).
  • The "Thumbnail" style

    The "Thumbnail" style is without surprises. It outputs a 100px by 100px thumbnail of the referenced node field with a link to the original node, no matter what the referenced node type or field type.

  • The "Teaser" style

    The "Teaser" style actually outputs a full node view of my referenced node, instead of displaying a true "Teaser" view.

    This is obvious in that the "Display fields" (admin/content/node-type/[my-content-type]/display) ImageCache setting applied to the referenced node field (which i specified in its respective content type) is that of a full node, not a teaser.

    Is nrembrowser's "Teaser" style, then, not a true "Teaser", but rather a "style" that shares the same name? Once again, i don't really understand how or even if the Styles/Styles UI/Filefield Styles modules fit into all of this...

    • Colorbox side note

    Using "Display fields" (admin/content/node-type/[my-content-type]/display) i've applied a Colorbox/ImageCache setting to my emvideo fields for both my "YouTube Video" and "Vimeo Video" content types. By default, a play button is overlaid on the video image, which, when clicked, opens the video in a Colorbox overlay.

    When my emvideo field is referenced by my "Media" node reference field, the play button is seen atop the video image whether I'm viewing the referencing node as a teaser or a full node. When my emvideo field is referenced from within Wysiwyg however, the play button is seen atop the video image only when the referencing node is viewed as teaser. When viewed as full node within its own page, the play button is not visible.

    B. Desired functionality

    Finally, i'd like to explain what kind of functionality i hope to achieve.

    Just as i created a node reference field template file for my "Media" node reference field which allows me to isolate and display true "Teaser" and "Full node" sizes of my referenced node field, i'd like to be able to display true "Teaser" and "Full node" sizes of my referenced node while using nrembrowser within Wysiwyg. This way, if the referencing node ("Story") is displayed as a teaser, then the referenced fields (from my "Image", "Flickr Image", "YouTube Video" or "Vimeo Video" content types) will display in a teaser size that i determine. If the referencing node ("Story") is displayed as a full node, then the referenced fields (from my "Image", "Flickr Image", "YouTube Video" or "Vimeo Video" content types) will display in a full node size that i determine.

    V. Conclusion

    I had no intention of writing this much and i hope you'll forgive me for it. I'd like for nrembrowser to become THE media solution for all my future Drupal 6 sites and therefore, though i'm no developer, i'm willing to do whatever i can (God knows i can write documentation...) to make it function consistently and predictably. I imagine it's much the same for other Drupal users who've encountered this very promising module.

    Thanks for any and all help.

    CommentFileSizeAuthor
    III. Popup UI failures and quirks867.45 KBstephen Piscura
    II. (Relative) success with a node reference field and template file1.18 MBstephen Piscura

    Comments

    stephen Piscura’s picture

    stephen Piscura commented

    Ha. Seems absurd to add anything more after such a long post, but i'd be glad to post screen captures illustrating the issues i've raised in roman numeral V if anyone actually cares to read (and maybe even respond! to this post). For the moment, i just can't spare any more time.

    harcher’s picture

    harcher commented

    Thanks for taking the time in sharing your experience with this module. Was an excellent read :) I'll be setting up this module for my website build and might report back.

    stephen Piscura’s picture

    stephen Piscura commented

    Thanks hga77. I hope to hear how your experience compares and what you might discover that i haven't... I'd love to use this module to its fullest.

    drscales’s picture

    drscales commented

    I added the following to nrembrowser.styles.css as a start for sorting out most of the problems relating to Rubik's core.css

    .nrembrowser-styles-float-left {
  float: left;
}
.nrembrowser-styles-float-right {
  float: right;
}

#nrembrowser-add-media-page-form .form-item {
  padding : 0px;	
  position:inherit;
  border-style:none;
}

#nrembrowser-add-media-page-form .item-list ul {
  clear:left;
}

#nrembrowser-dialog .item-list,
#nrembrowser-dialog .form-item {
    background:none;
    margin:0px 0px 0px;
    border-width:0px;
    border-style:solid;
    border-color:#ccc #ddd #eee;
  }

#nrembrowser-dialog .form-item {
    position:relative;
    padding:0px;
    }