用户友好的帖子缩略图裁剪？

32

有没有办法让我的用户定义帖子缩略图的裁剪区域？缩略图始终是现有的帖子附件，我不想为每个缩略图创建额外的附件。

帖子缩略图应为200x100像素，并来自帖子中使用的图像之一。因此，在我理想的世界中，当您单击“设置特色图像”链接时，将获得已包含图像的概述，并且当您单击其中之一时，您可以自己定义裁剪区域（移动或调整其大小，但保持2x1的宽高比）。当您单击“确定”时，新帖子缩略图将与原始附件一起保存（_wp_attachment_metadata['sizes']['post-thumbnail']例如，在元数据字段中），而不是新附件。不允许将已经用作帖子缩略图的图像用于其他帖子，或者至少发出警告。

我相信随附的图片编辑器将无法满足我的需求，因为您可以选择编辑图片的所有版本或常规缩略图，而不仅限于帖子缩略图。我也很难知道我正在编辑哪个版本，所以我认为我的用户在使用它时会遇到更多麻烦。

是否有可以满足我需求的插件，或者可以轻松满足我的需求的插件？

更新：UI示例

我真的很喜欢Mac OS X通讯簿图像选择器的界面：选择图像，然后通过滑块调整固定比例缩略图裁剪器的大小。您还可以拖动基本图像。您可以扩大这个想法告诉了多种图片大小（我有一个post-thumbnail和post-thumbnail-1/2这一半的大小，例如）。让用户使用复选框选择正在编辑的尺寸，然后在屏幕上绘制适当的裁剪矩形。

通讯录图像裁剪器的运行

plugin-recommendation  images  post-thumbnails 
— 扬·法布里
source
1
@Jan Fabry-我的第一个付费WordPress项目是用于裁剪图像的插件，而在WordPress中出现裁剪之前。它与您要求的有很大不同，或者我将其作为答案。但是，如果您有动力，想要写的内容应该不会太难...
— MikeSchinkel 2010年
1
@Mike：我曾经在您的网站上看到它，并且希望它可以在某个地方使用。即使它没有打勾我（广泛）心愿单的所有项目，也可以提供一个良好的开端。
— Jan Fabry
@Mike-我也非常有兴趣查看您可能创建或修改的与图像裁剪有关的任何代码。我一直在拼命地将jcrop添加到自定义metabox中，以允许在仍利用内置wordpress媒体库的同时添加和裁剪图像。
— NetConstructor.com 2010年
嘿@Jan Fabry和@ NetConstructor.com-我刚刚回顾了代码，由于它是我的WP的第一个插件，我很尴尬而无法发布它，那真是太糟糕了。我很想为在这里发布的新解决方案而工作，但是可能需要一段时间...
— MikeSchinkel 2010年
别害羞迈克，在作者看来，旧代码总是不好的。那只是进步:)。@Jan-在您的UI示例中，我认为帖子缩略图的大小是预先定义的。你能说更多吗？
— hakre 2010年

Answers:

11

该代码仍然是一团糟，但即使在IE 8上，它也似乎可以正常工作。我计划在存储库中发布它，但与此同时，您也可以使用当前版本。要访问它，请在添加或编辑图像时单击“编辑图像”，它取代了通常的图像编辑器（它们很难合并）。由于大多数管理区域都使用常规缩略图，而我当前的版本会编辑帖子缩略图，因此代码似乎没有作用，但是请通过显示帖子缩略图来尝试一下，您应该会看到它有所更改。

这个插件需要我的On-Demand Image Resizer（仍然是一团糟）来进行实际的大小调整。

裁剪机中的示例图像

— 扬·法布里
source
代码准备发布了吗？也许是github吗？我渴望这样的功能集成到我的锅炉
— 轻度发子
我也对您的操作方式/方式非常感兴趣！请共享代码。您的代码是否使用默认的wordpress媒体库工作，是否允许您在帖子编辑屏幕上创建一个简单的metabox，您可以在其中调用特定图像并仅按您创建的特定大小复制它，例如“ new_thumb”（已定义）通过类似add_image_size（'new_thumb'，200，100，true）;的东西吗？理想的情况是具有类似于标题图像创建器的功能，该功能可以根据定义的每种尺寸的单个元框更改每种定义的图像尺寸。
— NetConstructor.com 2010年
@JanFabry您是否已将此代码作为插件发布？我很乐意将其推荐给需要此功能的人！
— Chip Bennett
@ jan-fabry这个功能怎么样？有没有成功？
— 2012年
4

最好的选择是使用基于JavaScript的图像裁剪，然后将php与ImageMagick或Image GD结合使用。

它必须写到您的函数中或作为插件，因为我不知道有没有现成的wordpress插件，这令人惊讶。

有一个基于php的保存选项的YUI图像裁剪http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

这是关于如何在php http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/中使用jquery裁剪器的其他教程

第三个选项与上面的链接非常相​​似，使用相同的jquery裁剪器，但代码不同。 http://www.leonkessler.com/blog/?p=132

这是另一种使用jquery的jcrop的方法，http： //www.talkincode.com/jcrop-extension-implementation-in-php-932.html

谁在寻找新的插件，这肯定会很受欢迎：）

— 威克
source
在wordpress核心中已经有图像裁剪代码（HTML，JS和PHP）。我认为一个好的插件会重新使用它。不必这么说。您是正确的，Jan绘制的示例UI需要这样的事实。
— hakre 2010年
@ hakre，Wyck链接到的最后一个是jcrop，它已在2.8中集成到wp核心中。我记得当时曾读过有关它的信息，但是除了存储库中的一个插件被打破（所有帐户均已损坏）之外，我找不到任何实际上正在使用的信息。
— 马特2010年
@matt：如果它已经集成到核心中（我现在不知道那里的裁剪UI的所有细节），我假定它已用于核心图像UI功能。该功能并非始终可用，只有在某些PHP或系统映像库可用时才可用。很抱歉，我说的不够明确，但这只是到目前为止我还没有进入核心实现。但我知道只有一个；）
— hakre 2010年
1

假设您在谈论“特色图片”选项时已经添加了对缩略图后的支持。

如果是这样，您可以使用一个选项将新的图像大小添加到上传数组中。因此，默认情况下，您有缩略图，中号和大号。在下面的代码中，这将根据您想要的大小将第四张图像添加到该分类中。这部分代码将添加到您的functions.php文件中。

add_image_size( 'new_thumb', 200, 100, true );

“ new-thumb” =新的自定义图像的名称
“ 200” =宽度
“ 100” =高度
“ true” =硬性裁剪选项。这将强制将图像裁切为定义的宽度/高度。没有它，它只是按比例缩放。

现在，要在页面或帖子数组上显示新的缩略图，请将以下内容插入HTML

<?php the_post_thumbnail('new_thumb'); ?>
@cnix：感谢您的回答，但这不是我想要的。我想要一种让最终用户定义应裁剪区域的方法，而不是我作为站点的设计师。因此，该区域可能因图像而异。
— Jan Fabry
1

您可能希望使用CSS来获得更大的灵活性，修复主题中的缩略图（如果需要）并避免文件混乱：

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

请记住，将加载整个图像，因此请勿为此使用3MB的原始图像。

根据1月的请求进行更新： 如果您确实希望动态剪辑，请考虑：

  • 对于user = administrator，通过PHP创建CSS；您可以直接链接到读取适当设置并相应调整裁剪参数的php。
  • 对于user = visitor，请使用JavaScript更改图像的style属性中的剪切参数。
  • 作为一种侵入性较小的解决方案，请考虑创建一个简短代码（通过出色的插件Shortcode Exec PHP），例如[thumb w = ?? h = ??] url [/ thumb]，您可以使用内联CSS将其转换为适当的HTML标记。
— 拉斐尔
source
确实，您可以通过CSS进行裁切以避免使用多个尺寸，但是如何让用户（帖子的作者）定义应显示的裁切区域？
— Jan Fabry
请参阅上面的修改。
— 拉斐尔2010年
感谢您的澄清。假设用户知道所需作物区域的像素位置？我实际上正在寻找一种更加图形化的方式（例如当前的图像编辑器，但目标是发布缩略图而不是常规缩略图）。
— Jan Fabry
我希望您打算让它成为一个插件，而不是一些hack。在大多数情况下，您可以提供一些足以满足需要的默认选项：拐角，中心，边缘居中等（均易于计算）。我将避免提供免费的输入内容，因为如果用户输入垃圾，他们可能会严重破坏网站的流量。我想提供一个图形化的剪辑定义器（有关实现请参见Zenphoto）很好，但是无论如何获得值，如何使用这些值的原理都保持不变。您只需要构建GUI。这我帮不了你。
— 拉斐尔
1

我相信您正在寻找：http : //wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

我没有尝试过，但是它应该为您提供所需的功能。

原始插件页面在这里。http://wordpress.org/extend/plugins/scissors/

我正在从事的项目也需要此功能。

— 雄猫
source
谢谢你的建议。我已经看过剪刀（并且知道有人将其升级到3.0），但是我认为它对于我想要的来说太灵活了：必须将裁切器裁切成预定的尺寸。剪刀可以做得更多，因此可能会使我的最终用户感到困惑。
— Jan Fabry
1

我认为解决此问题的最终方法是从http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/修改插件

并对其进行自定义，以便您要在functions.php文件（使用add_image_size( 'new_thumb', 200, 100, true );）中定义的任何自定义图像大小自动使用，然后在您要修改图像时获取用于替换（或扩展）“编辑”链接的代码。

使用这种方法，wordpress可以像往常一样继续创建其适用的图像大小，但是如果您要专门修改任何特定图像的裁剪区域，则可以这样做，从而可以用该尺寸替换自动生成的图像。嗯...虽然这听起来有点令人困惑，但再次阅读它恰恰是我所缺少的。

目前，我相信该插件会将这些自定义图片尺寸保存到帖子中的自定义字段中，而不是将帖子保存为适用图片。

— NetConstructor.com
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.