Change Media modal image size

时间：2015-02-08 作者：Sillo

当我创建一个页面，并单击TinyMCE编辑器上方的“添加媒体”按钮时，会显示媒体模式。

问题：如何编辑模式中显示的图像的大小？

当前图像为全尺寸，导致浏览器加载速度非常慢，在某些情况下浏览器崩溃（Mac上Safari除外的大多数浏览器）。。

谢谢

2 个回复

SO网友:Privateer

我不知道有什么好的方法可以做到这一点，因为问题很可能是图像太大了。

然而，您可以做一些事情来解决这个问题。

第一re-size your images before uploading them if at all possible.

对于大多数应用程序，没有理由将5MB以上的文件上载到网站，尤其是因为大多数用户无论如何都看不到任何大于1200px的文件

这说起来容易做起来难，但如果你能体面地编写代码，或者你认识能写代码的人，那么编写这样的脚本并不需要太多时间，而且可以节省很多时间

SO网友:birgire

我写了另一个站点可能的解决方法，但让我在这里重复其中的一部分，并对您的问题进行一些调整：

媒体库网格视图使用主干微模板，并通过ajax获取数据。

在imageSize() 方法，在media-view.js 文件，我们可以看到medium 使用大小，如果该大小不存在，则使用实际/完整大小：

size = size || \'medium\';

要使用thumbnail 相反，您可以尝试以下操作：

/**
 *  Use a custom fallback image size, if medium size doesn\'t exists.
 *
 * @see http://wordpress.stackexchange.com/a/177571/26350
 */

add_filter( \'wp_prepare_attachment_for_js\', function( $response, $attachment, $meta )
{
    // Fallback image size, if medium size doesn\'t exists.
    $fallback_size = \'thumbnail\'; // Edit this to your needs.

    // If medium size image doesn\'t exist:
    if(  \'image\' === $response[\'type\'] && ! isset( $response[\'sizes\'][\'medium\'] ) )     
    {
       // Use the fallback size instead:
       if( isset( $response[\'sizes\'][$fallback_size] ) )
           $response[\'sizes\'][\'medium\'] = $response[\'sizes\'][$fallback_size];                  
   }
   return $response;
}, 10, 3 );

如果要使用默认图像以外的其他自定义回退图像大小，可以通过image_size_names_choose 筛选或将其添加到上述检查中：

$response[\'sizes\'][\'medium\'] =  wp_get_attachment_image_src( 
    $response[\'id\'], 
    $fallback_size 
);

Note 将不存在的中等图像大小插入帖子内容编辑器时，此方法将其替换为备用大小，而不是全尺寸。

另一种激进的方法是（从插件代码中，无需修改核心文件）覆盖主干微模板以满足您的需要，例如：

 <# if ( data.sizes.medium ) { #>
     <img src="{{ data.sizes.medium.url  }}" draggable="false" alt="" />
<# } else if ( data.sizes.fallback_image_size) { #>
     <img src="{{ data.sizes.fallback_image_size.url  }}" draggable="false" alt="" />
 <# } else { #>
    <img src="{{ data.size.url }}" draggable="false" alt="" />
 <# } #>

我们更换的地方fallback_image_size 使用回退映像大小，例如。thumbnail.

但我不确定这些微模板在WordPress版本之间的变化频率，所以我暂时不推荐；-）

结束

小码农CODE

Change Media modal image size

相关推荐