BrowserThe browser window display is quite different than standard Drupal display. While I don't think we're going to be able to harmonize it completely with the rest of Drupal I do think we can make some progress in that direction. The patch here is intended as a conversation starting point- I do not think this is the complete solution but I think it does move somewhat in that direction:

* tabs are rendered as Drupal primary tabs
* a title is provided for what the browser is supposed to do
* tab content is wrapped more consistently with borders
* media items are rendered as a consistent height

It would be good handle the height of the modal display more dynamically rather than the fixed height that is set- simple_dialog has a good example of how to handle setting the height based on the height of the loaded content that we might want to borrow from. We may also want to consider adjusting the width of the modal so that we can handle smaller displays that 600px which is what is set in Drupal.media.popups.getDialogOptions

Files: 
CommentFileSizeAuthor
#56 media_browser_mediafront_not_working.png11.73 KBjgahunia
#56 media_browser_mediafront_working.png19.14 KBjgahunia
#52 media-browser_cleanup-1881152-52.patch20.54 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#51 media-browser_cleanup-1881152-51.patch17.33 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#50 Screenshot_2_15_13_1_25_PM.jpg62.79 KBarthurf
#50 Screenshot_2_15_13_1_25_PM.jpg65.51 KBarthurf
#50 Screenshot_2_15_13_1_23_PM.jpg75.21 KBarthurf
#50 Screenshot_2_15_13_1_24_PM.jpg49.19 KBarthurf
#50 media-browser_cleanup-1881152-50.patch11.69 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#46 media-browser_cleanup-1881152-46.patch9.59 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#45 Screenshot_2_14_13_11_05_AM.jpg138.65 KBgmclelland
#42 media-browser_cleanup-1881152-42.patch9.57 KBParisLiakos
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#41 media-browser_cleanup-1881152-41.patch9.2 KBParisLiakos
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#39 1881152.39.diff10.57 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#38 1881152.diff11.87 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
#35 media_browser_display_cleanup_1881152_35.diff10.06 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#34 media_browser_display_cleanup_1881152_34.patch5.15 KBaaron
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#32 1881152_wysiwyg.diff4.94 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#30 1881152_insert.diff1.47 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#26 1881152_wysiwyg.7.diff4.53 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#24 1881152_wysiwyg.6.diff4.54 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#23 1881152_wysiwyg.5.diff4.23 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#18 1881152_wysiwyg.4.diff3.4 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#16 1881152_wysiwyg.3.diff3.12 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#13 1881152_wysiwyg.2.diff3.3 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#12 1881152_browser.diff3.07 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#10 1881152_wysiwyg.1.diff3.85 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#6 1881152_wysiwyg.diff3.84 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#3 media_display_cleanup.2.diff4.15 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
#2 media_internet.2.diff3.2 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
browser_display_cleanup.diff3.71 KBarthurf
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]
Screenshot_1_5_13_6_45_PM-2.jpg219.66 KBarthurf

Comments

arthurf’s picture

Status:Active» Needs review
arthurf’s picture

Issue summary:View changes

Add the display of the image

arthurf’s picture

StatusFileSize
new3.2 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Edit: wrong issue. Too many tabs.

arthurf’s picture

StatusFileSize
new4.15 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Slight change to the first patch- opens the media browser with smaller vertical height to render the upload form more cleanly as that one is always displayed on open. I've made the browser narrower to force only 5 media items in a row which makes the display cleaner.

There needs to be a height fix when you use the pager on the media view to prevent the scroll bar from briefly appearing.

ParisLiakos’s picture

+++ b/media.moduleundefined
@@ -701,13 +707,14 @@ function media_library() {
     'css' => array(
+      // @NOTE this file does not exist
       $path . '/css/media.browser.css' => array('group' => CSS_DEFAULT),
     ),

i guess you should remove it:)

+++ b/media.moduleundefined
@@ -701,13 +707,14 @@ function media_library() {
-      array('media', 'media_base'),
       array('system', 'ui.tabs'),
       array('system', 'ui.draggable'),
       array('system', 'ui.dialog'),
+      array('media', 'media_base'),

dont understand the reordering here

not much i can say about css

arthurf’s picture

As per the order change- the libraries are loaded in order so if you want to override some of the default CSS from the jquery libraries it is much easier to have your library load after the others.

arthurf’s picture

StatusFileSize
new3.84 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Rerolled patch without reference to missing CSS file.

ParisLiakos’s picture

+++ b/includes/media.theme.incundefined
@@ -134,3 +134,22 @@ function theme_media_formatter_large_icon($variables) {
+  $html = "<div id="media-dialog-tabs-wrapper">\n";
...
+  $html .= "<h2 id="media-dialog-title">" . t('Select a file') . "</h2>\n";

thats hard to read. why not wrap in single quotes, so there are no backslashes?

arthurf’s picture

The double quotes are so that \n can be used for line breaks. I can add a . "\n"; if you don't like the escaped code but I do prefer that the resulting markup has line breaks.

ParisLiakos’s picture

Then
+  $html = "<div id="media-dialog-tabs-wrapper">\n";
could be
+  $html = "<div id='media-dialog-tabs-wrapper'>\n";

and

$html .= "<h2 id="media-dialog-title">" . t('Select a file') . "</h2>\n";
to
$html .= '<h2 id="media-dialog-title">' . t('Select a file') . "</h2>\n";

arthurf’s picture

StatusFileSize
new3.85 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Reroll

ParisLiakos’s picture

I know you probably gonna hate me now..but:
theme_item_list accepts a title argument.
Why dont we pass t('Select a file') as a title in theme_item_list instead of adding theme_media_dialog_tabs? And along with that pass some class or #prefix #suffix for styling?

arthurf’s picture

StatusFileSize
new3.07 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Makes tonnes of sense to me- less code is less code. Rerolled with just using item_list and a tweak to the css file, theme functions removed.

I should probably address the formatting of the views thumbnails so that they center and don't stretch.

arthurf’s picture

StatusFileSize
new3.3 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

This patch has a few tweaks to how the thumbnails are displayed in the browser. This needs to be checked against the admin view at admin/content/file/thumbnails.

bbinkovitz’s picture

This looks great, arthur. It doesn't necessarily look like the user's theme if they're not using Seven as their admin theme, or not using admin theme on add/edit pages, but it still looks nice and is very usable.

ParisLiakos’s picture

Status:Needs review» Needs work

Further optimization!

+++ b/includes/media.browser.incundefined
@@ -137,8 +137,19 @@ function media_browser($selected = NULL) {
+  $tab_display = theme('item_list', array(
+    'items' => $tabs,
+    'title' => t('Select a file'),
+    'attributes' => array(
+      'class' => 'tabs primary',
+      ),
+  ));
+
   $output['tabset']['list'] = array(
-    '#markup' => theme('item_list', array('items' => $tabs)),
+    '#markup' => $tab_display, //theme('media_dialog_tabs', array('tabs' => $tabs)),
+    '#prefix' => '<div id="media-dialog-tabs-wrapper">' . "\n",
+    '#suffix' => "</div>\n",
   );

Could be

<?php
 
$output
['tabset']['list'] = array(
 
'#theme' => 'item_list',
 
'#items' => $tabs,
 
'#title' => t('Select a file'),
 
'#attributes' => array(
   
'class' => array('tabs', 'primary'),
  ),
 
'#prefix' => '<div id="media-dialog-tabs-wrapper">' . "\n",
 
'#suffix' => "</div>\n",
);
?>
arthurf’s picture

StatusFileSize
new3.12 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Good point, patch is rerolled with these suggestions.

In looking over some of this code, I think one issue with the CSS could be addressed by changing the dimensions in media_image_default_styles() to reflect what actually gets displayed. We could reduce the complexity of the code by making the display of the images just use the image dimensions rather that using CSS to size the image.

Also it seems like theme_media_admin_thumbnail() is never being called- media_preview_ajax() is the only function that I see that references it but I couldn't find any reference to that function either. Though removing these are probably beyond the scope of this issue they are connected to the display of the thumbnails so it's worth noting.

ParisLiakos’s picture

+++ b/includes/media.browser.incundefined
@@ -154,7 +154,12 @@ function media_browser($selected = NULL) {
+    '#attributes' => array('class' => 'tabs primary'),

class should be an array too..
thanks

In looking over some of this code, I think one issue with the CSS could be addressed by changing the dimensions in media_image_default_styles() to reflect what actually gets displayed. We could reduce the complexity of the code by making the display of the images just use the image dimensions rather that using CSS to size the image.

agreed

arthurf’s picture

StatusFileSize
new3.4 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Rerolled the CSS to not be height/width specific. Note that this will now show all the media thumbnails at the size specified by square_thumbnail. We may want to consider changing the dimensions in the image style.

arthurf’s picture

Status:Needs work» Needs review
ParisLiakos’s picture

yeah, we should make it 100x100..i have no clue why it is 180x180 now

arthurf’s picture

That last diff does set it 100x100- forgot to set it back after testing. If we do include it at this size we should consider running an image style flush. It is somewhat of an issue because somebody may have used this image style elsewhere. We could also write an update function that has code similar to media_update_7206 to create a new style. I'm not sure of what the best route to go is here.

Even if the image style has be reused elsewhere the admin could just go and reset the configuration and flush the image style again. We could make a upgrade note about this and leave it at that. Though it'd be nice to rename "square_thumbnail" to "media_preview" or something that is a bit more specific for what it is used for.

ParisLiakos’s picture

Ugh, sorry didnt see the patch and checked the style without clearing cache after applying and was @180.
Well i dont see the need to do anything more than adding just a cache clear for image styles in an update function and right after that returning a message stating that the image style has its dimensions changed to make admins aware of the change

EDIT: btw found this in @todo of API.txt:
rename image style square_thumbnail to use the media_ namespace

arthurf’s picture

StatusFileSize
new4.23 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Here's a reroll with an update to flush the old square_thumbnail and changing the db name to media_thumbnail if it is in the db because it has been overridden.

arthurf’s picture

StatusFileSize
new4.54 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Woops- here's a reroll with the name change in the install function.

ParisLiakos’s picture

Maybe the update function docblock could include the dimension information..eg Flush image styles cache to use the new

+++ b/media.installundefined
@@ -958,6 +958,19 @@ function media_update_7210() {
+        ->condition('name', 'media_thumnail')

forgot a b ^^

arthurf’s picture

StatusFileSize
new4.53 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Ugh. Reroll

aaron’s picture

Status:Needs review» Needs work

When I apply this patch, on an existing system, the icons for pictures are enlarged to 1024x768, although the derivatives are correct (square_thumbnail). This is after clearing the cache, by the way.

arthurf’s picture

@aaron- does the markup itself show the size this way? Does media_thumbnail show up in the list of image styles and is it set to 100x100?

aaron’s picture

<img width="2160" height="1440" title="" alt="" src="http://localhost/drupal/sites/default/files/styles/square_thumbnail/public/field/image/100_6177.JPG" typeof="foaf:Image">

The media_thumbnail preset is at 100x100, but is not being pulled into the browser, as you can see above.

arthurf’s picture

StatusFileSize
new1.47 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

removed

arthurf’s picture

Status:Needs work» Needs review

UGH wrong issue, please excuse

arthurf’s picture

StatusFileSize
new4.94 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

@aaron so I think this was because your display style had the square_image in its setting. I'm not clear as to why mine didn't- I tested a clean install and an upgraded install- but I think this new patch fixes it.

aaron’s picture

Status:Needs review» Needs work

this looks like it will work. I was trying to something similarly last night. A possible issue that I see is if people are using square_thumbnail with other display modes. I will try to take a look later today.

aaron’s picture

Status:Needs work» Needs review
StatusFileSize
new5.15 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

Here, this will solve that specific issue.

arthurf’s picture

StatusFileSize
new10.06 KB
PASSED: [[SimpleTest]]: [MySQL] 5 pass(es).
[ View ]

The issue now is that non-image content in the browser does not have height and width settings. My approach is to look at elements that are not using the image_style theme function, extract the current height/width settings for the media_thumbnail image style and try to apply those to the non-image content. I'm also trying to use the icons that are provided with media to render those instead of the core icons. This is a bit ugly, but it provides a better UX I think. We'd probably want to make an icon for pdfs or figure out a nicer way to decide what file we want to display. My code is really proof of concept.

This patch takes the changes from #34 and takes the patch from #1743040: "You have not selected anything!" error message, when a selection has clearly been made. The main difference here is a significant refactor of theme_media_thumbnail().

Dave Reid’s picture

Note, the 180x180 size rather than using what's actually displayed with 100x100 comes from there was the intent to be able to have a slider to enlarge or shrink the thumbnails in the library tab. See #1024844: Media thumbnails are shrunk from 180px to 100px.

arthurf’s picture

I defer to others on this but it seems to me like zoom functionality (while awesome!) is a feature maybe beyond the core functionality of media. A module implementing zoom functionality could use hook_image_styles_alter() to change the default size and then apply the JS.

If people feel otherwise we should probably then increase the dimensions and set the js slide code to start at a lower res. Alternatively, we could provide a second style with larger dimensions and add an image_style url as a data attribute to the thumbnail. When the zoom action starts we can swap the the src value on the image with the larger image style.

arthurf’s picture

StatusFileSize
new11.87 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]

I cleaned up this patch a bit. I'm still not thrilled about how theme_media_thumbnail() is working but I think it's cleaner than it was. I've moved the resizing code into theme_media_formatter_large_icon() which will then match the sizing that media_thumbnail specifies. Maybe this is overkill at this point- at worst this patch improves the markup and label handling in theme_media_thumbnail()

arthurf’s picture

StatusFileSize
new10.57 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]

Reroll against head

aaron’s picture

Status:Needs review» Reviewed & tested by the community

This works great now!

ParisLiakos’s picture

Status:Reviewed & tested by the community» Needs review
StatusFileSize
new9.2 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]

Well those statics inside the theme functions is pretty ugly..so i tried to find a better way..in the process i found 2 functions that are not being used
media_file_type_info_alter
media_file_type_media_default_view

Also: no need for static in theme_media_formatter_large_icon.image_style_load() takes care of it, so there is no performance hit, with just an extra function call.
For other files that do not display as images, we cant do anything. Settings of all file types under the preview mode, should only have Large filetype icon checked..If the site builder changes that (he/she gets a nice big warning when visits admin/structure/file-types/manage/*/file-display/preview, then he/she is on his/her own).

For undefined file types i added media_file_displays_alter() which forces them to go through theme_media_formatter_large_icon()

ParisLiakos’s picture

StatusFileSize
new9.57 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]

even better. moved image_style_load() over at media_field_formatter_view()

aaron’s picture

Status:Needs review» Reviewed & tested by the community

It looks great. Thanks a lot!

gmclelland’s picture

Just tested this on simplytest.me. Here is a quick review:

I think #1898090: Modal iframe is off by a few pixels needs to be committed before this gets in to fix the centering (it's subtle).

It seems like the tabs and the text inside the tabs change size when you click on them.

When I change the media browser theme to Bartik, it looks messed up for some reason. (See attached) Will other themes need to accomodate to these changes? ex. Rubik, Bartik, etc?

Great job with what you have done so far.

gmclelland’s picture

StatusFileSize
new138.65 KB

Forgot the attachment.

arthurf’s picture

StatusFileSize
new9.59 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]

@gmclelland - yes- clicking the tabs does make them shift- the active tab's text wasn't bold. Attached patch fixes that. As per other themes, wow, looks like there is some work to do.

arthurf’s picture

I've been messing around with support for multiple themes and I think this is a larger issue than I'd hoped. My original approach was simply adding some classes to the tabs so that they render out the same way the theme does. This works for some themes, though not for bartik because the jquey.ui.tabs.css adds css which ends up overriding/altering the display of the core theme styles. I don't really see a way around this except for only including the the jquery.ui.tabs.min.js and not the css. Doing this improves the situation but the theming still isn't quite right because the structure of the elements is different than what the theme expects.

So I tried to get around this by trying to emulate the display of theme_menu_local_tasks() to render the tabs which definitely improves things but it is likely the case that unless we really try to create the output of the media browser to approximate the standard page elements it's not going to fare well cross theme.

I see three approaches to move forward:
* only officially support the seven admin theme, continue our semi-integrated/semi-custom approach
* try to replace as many elements in the media browser with standard drupal elements and override the jquery.ui.tabs.css or get rid of it all together
* abandon jquery tabs all together and use standard drupal page elements with custom JS to handle the tabs. This actually turns out to be quite simple to do- I added some data attributes to the existing markup and wrote this JS as a proof of concept.

      // Ensure that there is an active pane when the browser opens.
      if (! $('.media-browser-pane .active').length) {
        $('.media-browser-pane').first().addClass('active');
      }

      // Hide all the non-active panes on page load.
      $('.media-browser-pane').not('.active').hide();

      // Set the correct tab to active based on the currently active pane.
      var tabid = $('.media-browser-pane.active').attr('data-tab-id');
      $('.media-browser.tab[data-tabid=' + tabid + ']').addClass('active');

      // Switch tabs with clicks.
      $('a.media-browser-tab').bind('click', function () {
        // Ignore clicks on already active tabs.
        if (! $(this).hasClass('active')) {
          // Make all tabs inactive.
          $('a.media-browser-tab.active').removeClass('active');
          // Make this tab active.
          $(this).addClass('active');
          // Make all panes inactive
          $('.media-browser-pane.active').removeClass('active').hide();
          // Activate the correct pane.
          var tabid = $(this).attr('data-tabid');
          $('.media-browser-pane[data-tabid=' + tabid + ']').addClass('active').show();
        }
        return false;
      });

There would need to be some cleanup in terms of error handling but it does work. I'm not sure if it is a viable way forward, I'm just trying to figure out how to improve the sustainability of display inside the browser.

Thoughts?

ParisLiakos’s picture

Status:Reviewed & tested by the community» Needs work

in my opinion, we should not ditch jquery ui tabs..i prefer relying on it, than have to maintain our own custom code..
and for css, it is, we either

  1. just override jquery ui css, to make them appear a bit prettier than the defaults. this will work on all the themes. or
  2. make it be close to seven admin menu

i think thats what we should decide here..solution 1 is what we were doing till now, solution 2 is what this issue try to achieve...
and seems that solution 2 sucks for other admin themes..so lets just stick to what we have now, with the applied cleanup we already did

arthurf’s picture

Unfortunately option 1 doesn't really work with all themes because of different kinds of assumptions about markup. I'm going to take another shot at rendering the tabs through media_local_tasks and overriding the jquery.ui css where I can. It is also worth considering removing some of the classes when the tabs are triggered.

arthurf’s picture

StatusFileSize
new11.69 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]
new49.19 KB
new75.21 KB
new65.51 KB
new62.79 KB

I've done a bunch of cleanup here that I think is a starting point for improving things further. The stuff in media_browser() adds a degree of complication but I was trying to make it easier to get things into Drupal elements. I'm still privileging the Seven theme but Bartik is no longer terrible.

I think it might be worth considering breaking some of this work out into templates so that it is easier for other themes to override- that maybe the simplest solution for theme maintainers.

Screenshot_2_15_13_1_25_PM.jpgScreenshot_2_15_13_1_25_PM.jpgScreenshot_2_15_13_1_25_PM.jpgScreenshot_2_15_13_1_25_PM.jpg

arthurf’s picture

StatusFileSize
new17.33 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]

Ok, here's another crack at this. Moves some of the display code into the browser template, cleans up some JS. Spruces up the display type screen as well.

arthurf’s picture

Status:Needs work» Needs review
StatusFileSize
new20.54 KB
PASSED: [[SimpleTest]]: [MySQL] 56 pass(es).
[ View ]

Here is a slight cleanup of the above.

aaron’s picture

Status:Needs review» Reviewed & tested by the community

This looks great to me.

ParisLiakos’s picture

Status:Reviewed & tested by the community» Fixed

I removed check_plain from attributes (drupal_attributes pass everything through it already so no need) and committed it
Congrats and thanks arthurf for pushing this, seems a lot nicer!
http://drupalcode.org/project/media.git/blobdiff/b433b278d7e0ab7420f5a87...

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

jgahunia’s picture

Hi All,

New to the community so forgive any miscommunication's.

This particular fix seems to break the mediafront preview display in the media browser.

See attached files:
media_browser_mediafront_not_working.png (git commit 188b2e9)
media_browser_mediafront_working.png (git commit b433b27)

Regards.

arthurf’s picture

@jgahunia I'm unclear on what in particular is broken for media front here? Is it that the preview for the media front item is constrained by the width of the preview size? While I really like that media front is providing a preview, the intent of the display in the media browser is thumbnails- perhaps a opening a modal with a preview would be a better bet?

arthurf’s picture

Issue summary:View changes

Fixed broken image link