bloke / smd_thumbnail
Textpattern CMS内任意尺寸的多图缩略图
Requires
- textpattern/installer: *
- textpattern/lock: >=4.7.0
This package is not auto-updated.
Last update: 2024-09-21 19:12:37 UTC
README
如果你对每张图片只有一个缩略图感到无聊,又不想使用自动调整大小的脚本或依赖浏览器拉伸缩略图,那么 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的多编辑工具删除图像,则将删除所选图像(包括非活动图像)的所有相应缩略图。
自定义缩略图
如果您更喜欢在外部程序中制作自己的缩略图,您仍然可以像往常一样设置配置文件,但在“图像编辑”屏幕中点击“创建”而不是点击“创建”按钮,您可以从下拉列表中选择配置文件大小,并使用文件选择器功能“浏览...”从您的硬盘驱动器中选择缩略图。点击“上传”后,图像将被插入到选定的配置文件中。
在任何时候,您都可以点击一个缩略图(或从下拉列表中选择大小)并选择另一张图像替换现有的缩略图 - 即使是自动创建的。关于此功能的一些注意事项
- 缩略图必须与原始图像相同的文件类型,否则上传将被忽略。
- 您可以通过点击突出显示的图像来取消选择它。
- 除非您已选择一个配置文件,否则您不能“浏览...”选择图像(文件上传框变灰)。
批量创建缩略图
您还可以批量创建缩略图。单击smd_thumbnail控制面板右侧的“工具”按钮(如果您有足够的权限,则标记为“设置”)。从那里,您将看到一个区域,允许您为
- 仅选择图像(每个图像旁边的复选框)。
- 特定类别的所有图像。
- 特定用户上传的所有图像。
- 所有图像。
选择所需选项(如果您选择类别或作者,从出现的二级列表中选择一个条目),然后单击“创建”。确认您的操作后,插件将为所有符合您标准的图像创建每个活跃配置文件缩略图。这是生成现有图像缩略图的一种快速方法。注意,如果您选择第一个(空)类别条目,则将操作未分配类别的所有图像。
由于此工具的性质——尤其是对于大量的图像池——该过程通过 AJAX 作为后台任务完成。单击“创建”按钮(并确认您确定)后,在首选项面板的右上角将出现一个计数器,显示已处理的图像数量和集合中图像总数的比例。完成后,如果然后刷新您的“图像”选项卡(例如,单击到“配置文件”面板),您将在列表中看到您选择的默认缩略图——假设您已将其设置为默认。
首选项
如果您有足够的权限,在“设置”面板的下半部分有一些选项,用于控制为所有用户创建缩略图的方式。此处没有“保存”操作:复选标记实时存储并始终反映当前状态。
从创建 smd_thumbnails
控制 smd_thumbnails 是否从全尺寸图像或其(Textpattern)缩略图创建。如果您选择了不创建 Textpattern 缩略图,则它可能不会很好地工作!此首选项适用于
- 您使用任何批量工具大量生成 smd_thumbnails 时。
- 如果您上传新图像。
- 如果您重新上传主图像且已勾选“重新上传主图像时重新创建缩略图”。
将 Textpattern 缩略图与默认配置文件保持同步
只有当您已将配置文件设置为默认值时才出现此选项。
通常,smd_thumbnail 独立于 Textpattern 的缩略图工作。如果您禁用插件,您会看到一切都会回到您安装它之前的状态。这很棒,因为如果您上传了自己的缩略图,您的辛勤工作就不会丢失。但是,如果您开始使用插件创建缩略图,您会注意到 Textpattern 内置的标签(如 <txp:article_image thumbnail="1" />
和 <txp:thumbnail />
)对于新缩略图将不会工作。这可能会令人困惑,因此您可以选择让 smd_thumbnail 同时更新 Textpattern 的缩略图。
通过勾选任一复选框,插件将跟踪对 默认配置文件 的任何更改,并使用 Textpattern 的缩略图进行模拟。这有一些值得强调的效果...
当勾选“创建”复选框时
- 如果您批量创建缩略图,上传新图像或替换现有图像,将在默认尺寸下创建新的 Textpattern 缩略图。任何现有缩略图将被覆盖。
- 如果您更改默认配置文件,已创建的任何 Textpattern 缩略图将保持之前的尺寸。只有在您开始创建、上传或替换图像时,才会创建新的缩略图尺寸。
当勾选“删除”复选框时
- 如果您删除与默认配置文件相对应的单个缩略图,则配置文件缩略图和 Textpattern 的缩略图都将被删除。
- 如果您删除整个配置文件,则其所有缩略图和所有 Textpattern 的缩略图都将被删除。
进一步
- 如果您没有默认配置文件,复选框将消失,设置将无效果。选择默认配置文件以恢复行为。
- 如果您停用默认配置文件,复选框将无效,除非您删除该配置文件(由于您正在删除它,其状态为“丢失”,因此复选框将正常工作)。如有任何疑问,请首先取消选中“删除”复选框!
在重新上传主图像时重新创建缩略图
当清除此复选框并您用主图像(从“图像编辑”屏幕)替换时,任何已分配给图像的缩略图将保持原样——只有缺少的缩略图将从主图像创建。相反,如果您勾选此复选框,则在上传替换图像时,所有活动配置文件中的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>
标签(缩略图创建时的尺寸),请使用此属性告诉插件。选择一个或两个width
或height
。根据需要以逗号分隔。
: 默认:未设置。
; form="表单名称"
: 您可以使用给定的表单构建自己的<img>
标签。如果没有指定,您可以使用标签作为容器。
; format="值"
: 默认情况下,此标签输出完整的<img>
标签。如果您只需要图像URL以便创建自己的图像标签,请设置format="url"
。
: 默认:thumbnail
。
; quiet="布尔值"
: 使用quiet="1"
来抑制有关缺失图像的警告。
: 默认:0
。
; size="比率"
:仅考虑特定宽高比/大小的图片。选择以下之一:竖向
、横向
或方形
。或者指定自己的宽高比宽度:高度,例如16:9
或4: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>
内部工作,或者可以通过指定id
或name
属性独立使用。如果您将其用作容器或带有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"
HTMLclass
应用于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_h
:HTML格式的height
属性。html_w
:HTML格式的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
的图像:其中id
和ext
与Textpattern数据库中相应的图像ID相匹配。就是这样!
您可以手动从这些目录中的任何一个删除缩略图文件,插件会自动处理一切。但是,可能不建议删除目录本身——使用控制面板中的“删除”按钮来执行此操作。
历史
请参阅GitHub上的变更日志。
作者/致谢
由Stef Dawson编写。感谢所有额外贡献者。还要特别感谢那些提供了功能和流程建议的测试团队,特别是thebombsite、jakob、jstubbs和maniqui。