bloke/smd_thumbnail

Textpattern CMS内任意尺寸的多图缩略图

安装: 39

依赖: 0

建议者: 0

安全: 0

星星: 8

关注者: 4

分支: 4

类型:textpattern-plugin

0.6.1 2020-06-13 21:26 UTC

This package is not auto-updated.

Last update: 2024-09-21 19:12:37 UTC


README

下载 | Packagist

如果你对每张图片只有一个缩略图感到无聊,又不想使用自动调整大小的脚本或依赖浏览器拉伸缩略图,那么 smd_thumbnail 可能就是你的答案!它允许你为Textpattern的任意多个缩略图尺寸创建配置文件,并将自动为你的任意/所有图片创建物理尺寸的缩略图。

请在此GitHub项目的 issues 页面 报告此插件的相关错误和问题。

功能

  • 为Textpattern的图片分配任意数量的缩略图。
  • 批量分配缩略图到现有图片。
  • 设置一个缩略图尺寸作为默认值。
  • 在你的网站上显示任意缩略图尺寸。
  • 如果你愿意,可以将缩略图与Textpattern的缩略图同步。
  • 提供条件缩略图检查。

安装

需要Textpattern 4.7.0+

GitHub软件页面下载插件,将代码粘贴到插件管理面板,安装并启用插件。访问论坛线程获取更多信息或报告插件的成功或失败情况。

注意:当从v0.1x升级到v0.20时,你为“将Textpattern缩略图与默认配置文件同步”设置的偏好设置将被删除。请访问“设置”区域以恢复你希望的行为。

此外,此插件可以使用Composer安装。

$ composer require bloke/smd_thumbnail:*

用法

访问图像面板。在图像列表上方有一个标记为 缩略图配置文件 的区域。点击它以显示控制面板。你可以通过点击标题来打开和关闭此面板。

首先你必须定义至少一个配置文件,因此点击 新建配置文件 按钮。这将显示编辑框,你可以在其中输入

  • 名称:为该缩略图配置文件提供一些描述性的名称。名称中仅限于使用常见的非怪异字符。
  • 描述:对该缩略图配置文件的简要总结,以帮助回忆或通知其他用户其用途。
  • 宽度:缩略图的宽度,以像素为单位。如果留空(或设置为 0)并且指定了高度,则宽度将与高度成比例计算。
  • 高度:缩略图的高度,以像素为单位。如果留空(或设置为 0)并且指定了宽度,则高度将与宽度成比例计算。
  • 质量 (%):结果的缩略图质量。通常仅适用于 JPEG 或 24 位 PNG 图像。值越高,质量越好,文件大小越大。默认:75
  • 裁剪:在创建缩略图时是否裁剪图像,或将其缩放到适合大小。
  • 锐化:在创建缩略图时是否应用锐化滤镜。对于非常小的图像很有用。
  • 启用/禁用:启用/禁用此缩略图大小,以便在下次上传图像时自动生成/不生成。点击复选框以立即切换配置文件的开/关。点击列标题中的“启用”一词以切换所有活动的配置文件状态。请注意,活动状态决定了所有大小下拉条目如何与创建删除按钮交互。
  • 默认:将此缩略图配置文件设置为默认值。默认图像将在“图像”列表中显示,并用作使用<txp:smd_thumbnail/>显示的默认大小。如果启用了与Textpattern缩略图同步的选项,它也将从此点开始成为Textpattern的标准(内置)缩略图大小。

配置您的配置文件后,请点击“保存”以存储它。您可以通过点击其名称再次编辑它。继续创建更多不同大小/参数的缩略图配置文件。如果希望删除配置文件,请点击“x”按钮并确认。将与该配置文件关联的所有缩略图都将被删除。

到目前为止,尚未创建任何缩略图。让我们纠正这一点...

创建缩略图

选择您的图像之一并点击进行编辑。在主图片下方,您将看到一个标记为“创建缩略图”的区域。

此区域包含一个简单的选择列表,其中包含您配置的每个缩略图配置文件的一个条目,以及特殊条目“所有大小”。您可以选择这些条目之一,然后点击“创建”以在选定的大小中创建缩略图,或点击“删除”以删除选定的缩略图。

创建后,缩略图将出现在面板中。

如果您选择“所有大小”并点击“创建”,将为每个活动的配置文件创建一个缩略图。类似地,如果您点击“删除”,则将删除针对当前图像存储的任何活动配置文件的缩略图。通过切换某些缩略图配置文件的开/关,您可以控制哪些缩略图被创建或删除 - 默认情况下

  • 上传新图像时,将为任何活动的配置文件自动创建缩略图。
  • 替换现有图像时,只有当缩略图不存在时,才会为活动配置文件自动创建缩略图。此选项可以通过首选项进行更改。

请注意,如果您使用Textpattern的多编辑工具删除图像,则将删除所选图像(包括非活动图像)的所有相应缩略图。

自定义缩略图

如果您更喜欢在外部程序中制作自己的缩略图,您仍然可以像往常一样设置配置文件,但在“图像编辑”屏幕中点击“创建”而不是点击“创建”按钮,您可以从下拉列表中选择配置文件大小,并使用文件选择器功能“浏览...”从您的硬盘驱动器中选择缩略图。点击“上传”后,图像将被插入到选定的配置文件中。

在任何时候,您都可以点击一个缩略图(或从下拉列表中选择大小)并选择另一张图像替换现有的缩略图 - 即使是自动创建的。关于此功能的一些注意事项

  1. 缩略图必须与原始图像相同的文件类型,否则上传将被忽略。
  2. 您可以通过点击突出显示的图像来取消选择它。
  3. 除非您已选择一个配置文件,否则您不能“浏览...”选择图像(文件上传框变灰)。

批量创建缩略图

您还可以批量创建缩略图。单击smd_thumbnail控制面板右侧的“工具”按钮(如果您有足够的权限,则标记为“设置”)。从那里,您将看到一个区域,允许您为

  1. 仅选择图像(每个图像旁边的复选框)。
  2. 特定类别的所有图像。
  3. 特定用户上传的所有图像。
  4. 所有图像。

选择所需选项(如果您选择类别或作者,从出现的二级列表中选择一个条目),然后单击“创建”。确认您的操作后,插件将为所有符合您标准的图像创建每个活跃配置文件缩略图。这是生成现有图像缩略图的一种快速方法。注意,如果您选择第一个(空)类别条目,则将操作未分配类别的所有图像。

由于此工具的性质——尤其是对于大量的图像池——该过程通过 AJAX 作为后台任务完成。单击“创建”按钮(并确认您确定)后,在首选项面板的右上角将出现一个计数器,显示已处理的图像数量和集合中图像总数的比例。完成后,如果然后刷新您的“图像”选项卡(例如,单击到“配置文件”面板),您将在列表中看到您选择的默认缩略图——假设您已将其设置为默认。

首选项

如果您有足够的权限,在“设置”面板的下半部分有一些选项,用于控制为所有用户创建缩略图的方式。此处没有“保存”操作:复选标记实时存储并始终反映当前状态。

从创建 smd_thumbnails

控制 smd_thumbnails 是否从全尺寸图像或其(Textpattern)缩略图创建。如果您选择了不创建 Textpattern 缩略图,则它可能不会很好地工作!此首选项适用于

  1. 您使用任何批量工具大量生成 smd_thumbnails 时。
  2. 如果您上传新图像。
  3. 如果您重新上传主图像且已勾选“重新上传主图像时重新创建缩略图”。

将 Textpattern 缩略图与默认配置文件保持同步

只有当您已将配置文件设置为默认值时才出现此选项。

通常,smd_thumbnail 独立于 Textpattern 的缩略图工作。如果您禁用插件,您会看到一切都会回到您安装它之前的状态。这很棒,因为如果您上传了自己的缩略图,您的辛勤工作就不会丢失。但是,如果您开始使用插件创建缩略图,您会注意到 Textpattern 内置的标签(如 <txp:article_image thumbnail="1" /><txp:thumbnail />)对于新缩略图将不会工作。这可能会令人困惑,因此您可以选择让 smd_thumbnail 同时更新 Textpattern 的缩略图。

通过勾选任一复选框,插件将跟踪对 默认配置文件 的任何更改,并使用 Textpattern 的缩略图进行模拟。这有一些值得强调的效果...

当勾选“创建”复选框时

  1. 如果您批量创建缩略图,上传新图像或替换现有图像,将在默认尺寸下创建新的 Textpattern 缩略图。任何现有缩略图将被覆盖。
  2. 如果您更改默认配置文件,已创建的任何 Textpattern 缩略图将保持之前的尺寸。只有在您开始创建、上传或替换图像时,才会创建新的缩略图尺寸。

当勾选“删除”复选框时

  1. 如果您删除与默认配置文件相对应的单个缩略图,则配置文件缩略图和 Textpattern 的缩略图都将被删除。
  2. 如果您删除整个配置文件,则其所有缩略图和所有 Textpattern 的缩略图都将被删除。

进一步

  1. 如果您没有默认配置文件,复选框将消失,设置将无效果。选择默认配置文件以恢复行为。
  2. 如果您停用默认配置文件,复选框将无效,除非您删除该配置文件(由于您正在删除它,其状态为“丢失”,因此复选框将正常工作)。如有任何疑问,请首先取消选中“删除”复选框!

在重新上传主图像时重新创建缩略图

当清除此复选框并您用主图像(从“图像编辑”屏幕)替换时,任何已分配给图像的缩略图将保持原样——只有缺少的缩略图将从主图像创建。相反,如果您勾选此复选框,则在上传替换图像时,所有活动配置文件中的ALL smd_thumbnails将(重新)从主图像创建。

注意一个重要例外:Textpattern缩略图不受此选项影响——它们由“保持Textpattern缩略图同步”的“创建”复选框控制。因此,如果您上传替换图像且“创建”复选框处于开启状态,无论“重新创建缩略图...”选项的设置如何,都会替换Textpattern的缩略图。

标签

smd_thumbnail 标签

<txp:smd_thumbnail />

是内置 txp:thumbnail 标签的直接替换,具有完全相同的功能和属性,除了以下列出的附加属性。

属性(除标准 txp:thumbnail 标签属性外)

; add_stamp="布尔值"
: 将图像文件修改时间添加到缩略图URL的末尾。使用 add_stamp="1" 启用此功能。这有助于防止过时的图像,但可能会阻止浏览器正确缓存缩略图,从而增加带宽使用。
: 默认:0
; break="标签"
: 在遍历缩略图时应用于每个缩略图的HTML标签。
: 默认:未设置。
; breakclass="类名"
: 应用到break>标签的HTML class
: 默认:未设置。
; class="类名"
: 应用到<img>属性值的HTML class
: 如果省略,将使用配置文件名称作为<img>标签的class名称。
: 如果指定了wraptag并省略了class,则配置文件名称将用作容器和<img>标签的class
; force_size="值"
: 通常,当您在配置文件中将宽度/高度之一设置为0时,浏览器会自动缩放缺失的维度。它通过在img标签中省略width=height=属性来实现。这可能会在页面渲染和浏览器计算尺寸时导致视觉上的瑕疵。如果您希望插件将实际维度添加到<img>标签(缩略图创建时的尺寸),请使用此属性告诉插件。选择一个或两个widthheight。根据需要以逗号分隔。
: 默认:未设置。
; form="表单名称"
: 您可以使用给定的表单构建自己的<img>标签。如果没有指定,您可以使用标签作为容器。
; format="值"
: 默认情况下,此标签输出完整的<img>标签。如果您只需要图像URL以便创建自己的图像标签,请设置format="url"
: 默认:thumbnail
; quiet="布尔值"
: 使用quiet="1"来抑制有关缺失图像的警告。
: 默认:0
; size="比率"
:仅考虑特定宽高比/大小的图片。选择以下之一:竖向横向方形。或者指定自己的宽高比宽度:高度,例如16:94:3,或者数值比例,如size="1.33"size="0.8"。您还可以仅指定宽度或高度,例如 @size="300:"(仅考虑宽度正好为300px的图片)或size=":800"(仅考虑高度正好为800px的图片)。
: 默认:未设置。
; sort="col dir, col dir, ..."
:按给定的列和排序方向对图片进行排序。
:默认:width DESC, height DESC
; type="value"
:使用此属性显示给定配置文件名称的缩略图(例如,type="large")。您可以以逗号分隔多个配置文件名称以遍历它们。
:type=“SMD_ALL”将遍历所有定义的配置文件。
:type=“SMD_ACTIVE”将遍历所有活动配置文件。
:如果您未指定此属性,则将使用默认配置文件。如果没有默认配置文件,您将看到警告消息。

此标签在<txp:images>内部工作,或者可以通过指定idname属性独立使用。如果您将其用作容器或带有form属性,则可以使用<txp:smd_thumbnail_info>标签显示各种缩略图信息。

示例

示例 1
<txp:images>
    <txp:smd_thumbnail type="big-size" />
</txp:images>

显示所有使用“big-size”smd_thumbnail配置文件生成的图片。

示例 2:响应式图片

请参阅Textpattern论坛中的响应式图片帖子

smd_thumbnail_info 标签

<txp:smd_thumbnail_info />

显示来自当前<txp:smd_thumbnail>标签(无论其形式或容器)的多种信息。

属性

  • class="class name" HTML class应用于wraptag属性值。
  • break="value" 其中value是HTML元素,指定时无需括号(例如,break="li"),以分隔列表项。
  • item="item value" 您希望显示的内容列表。选择以下之一
    • alt:图片alt文本。
    • author:图片作者。
    • category:图片分类名称。
    • category_title:图片分类标题。
    • class:应用于缩略图的class(如果未提供,则与type相同)。
    • date:图片上传时的原始日期。
    • ext:缩略图文件扩展名。
    • h:缩略图高度(像素)。请注意,此值直接取自您的配置文件设置,因此如果您将配置文件高度设置为0(可变高度),则此值将错误地显示为0
    • html_hHTML格式的height属性。
    • html_wHTML格式的width属性。
    • id:缩略图ID。
    • name:图片名称。
    • title:图片标题/字幕。
    • type:缩略图配置文件名称。
    • url:缩略图的完整图像URL。
    • w:缩略图宽度(像素)。请注意,此值直接取自您的配置文件设置,因此如果您将配置文件宽度设置为0(可变宽度),则此值将错误地显示为0
  • wraptag="element" HTML元素,用于包装(标记)列表块,指定时无需括号(例如,wraptag="ul")。
  • escape="transform"将核心转义转换(如trim、tidy、html、textile等)应用于项。
示例
<txp:images>
    <txp:smd_thumbnail type="big-size">
        <meta itemprop="image" content="<txp:smd_thumbnail_info item="url" />">
        <meta itemprop="width" content="<txp:smd_thumbnail_info item="w" />">
        <meta itemprop="height" content="<txp:smd_thumbnail_info item="h" />">
    </txp:smd_thumbnail>
</txp:images>

smd_if_thumbnail 标签

<txp:smd_if_thumbnail>

是内置<txp:if_thumbnail />标签的直接替代品,具有完全相同的功能。

属性

  • type:使用此属性检查给定配置文件名称的缩略图(例如,type="Medium")。如果您不指定此属性,则将测试默认配置文件。如果没有默认配置文件,则标签将始终渲染<txp:else />部分。
示例
<txp:images>
    <txp:smd_if_thumbnail type="640w">
        <img alt="<txp:image_info type='alt' />"
            src="<txp:smd_thumbnail type='640w' format='url' />"
            srcset="<txp:image_url link='0' /> 2x, <txp:smd_thumbnail type='640w' format='url' /> 1x">
    <txp:else />
        <img alt="<txp:image_info type='alt' />" src="<txp:image_url link='0' />">
    </txp:smd_if_thumbnail>
</txp:images>

工作原理

作为参考,当您创建配置文件时,将在您的Textpattern images文件夹内创建一个同名目录。在这个文件夹中,您将找到格式为id.ext的图像:其中idext与Textpattern数据库中相应的图像ID相匹配。就是这样!

您可以手动从这些目录中的任何一个删除缩略图文件,插件会自动处理一切。但是,可能不建议删除目录本身——使用控制面板中的“删除”按钮来执行此操作。

历史

请参阅GitHub上的变更日志

作者/致谢

Stef Dawson编写。感谢所有额外贡献者。还要特别感谢那些提供了功能和流程建议的测试团队,特别是thebombsite、jakob、jstubbs和maniqui。