External event handlers for theme options choose media.

templates/2k11/admin/plugin_config_item.tpl

@@ -62,11 +62,11 @@
         {if $cdesc != ''}<span>{$cdesc}</span>{/if}
         </label>
         
-        <input id="serendipity[{$postKey}][{$config_item}]" name="serendipity[{$postKey}][{$config_item}]" type="text" value="{$value}" onchange="change_preview('{$config_item}')">{* This should be input[type=file] … *}
+        <input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" value="{$value}">{* This should be input[type=file] … *}
 
-        <a class="button_link" href="#" title="{$CONST.MEDIA_LIBRARY}" onclick="choose_media('serendipity[{$postKey}][{$config_item}]')"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></a>
+        <a class="button_link choose_media" href="#serendipity[{$postKey}][{$config_item}]" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></a>
 
-        <div id="{$config_item}_preview" style="background-image: url({$value}); width: {$preview_width}; height: {$preview_height}; background-repeat: no-repeat;"></div>
+        <div id="{$config_item}_preview" class="preview" style="background-image: url({$value}); min-width: {$preview_width}; min-height: {$preview_height};"></div>
     </div>
 {elseif $ctype == 'sequence'}
     {if !$sequencejs_output}

templates/2k11/admin/serendipity_editor.js.tpl

@@ -165,7 +165,6 @@ function change_preview(id) {
     var filename = text_box.value;
 
     image_box.style.backgroundImage = 'url(' + filename + ')';
-    image_box.style.backgroundRepeat = 'no-repeat';
 }
 
 // Opens media db image selection in new window
@@ -758,6 +757,17 @@ function highlightComment(id, checkvalue) {
         });
     }
 
+    // Config option add media
+    $('.change_preview').change(function(e) {
+        change_preview($(this).attr('data-configitem'));
+    });
+
+    $('.choose_media').click(function(e) {
+        var configitem = $(this).parent().find('.change_preview').attr('id');
+        choose_media(configitem);
+        e.preventDefault();
+    });
+
     // Comments
     $('.comments_delete').click(function(e) {
         var $msg = $(this).attr('data-delmsg');

templates/2k11/admin/style.css

@@ -902,7 +902,7 @@ input[type=checkbox] {
 .serendipity_commentDirection,
 .entry_info,
 .pagination,
-.media_choose > div {
+.media_choose .preview {
     clear: both;
 }
 
@@ -1161,6 +1161,13 @@ main {
     width: 90%;
 }
 
+.media_choose .preview {
+    background-repeat: no-repeat;
+    height: auto;
+    margin: .75em 0;
+    max-width: 100%;
+}
+
 #serendipity_category .form_multiselect label {
     width: auto;
 }