0WordPress的标志在wordpress中悬停时显示放大的图像

作为最近对各种网站进行的改进的一部分,我想让画廊中的图像在悬停时显示放大版本. 用基本的做这个 CSS 相当简单, 但我不只是想扩展原始图像, 我想让浏览器抓取一个新的 (更大) 图也…

所有的图像都已经提供了一个完整的 src-set 所以我需要做的就是使用一点 jQuery (无论如何,它已经被wordpress加载了) 改变目标显示尺寸使浏览器拉出更大的图像. 好消息是 CSS 立即工作,因此您可以使用原始文件获得更大的图像, 然后随着更高分辨率的文件被加载,质量会在一瞬间提高.

CSS

CSS 我用的是如下. 我只是将它添加到我的主题的 style.css 中 (或者更确切地说是儿童主题——使用一个总是一个好主意)

注 (1) - 以上 CSS 仅适用于画廊图像. 不太可能有人希望为页面上任何位置显示的所有图像提供此功能, 但您可能希望它用于主要内容部分. 您需要检查您的主题如何构建它, 但在我的情况下,主要内容区域是一个“部分”,所以下面的代码可以完成这项工作

注 (2) — 此代码仅适用于缩略图. 对于中等图像,您可以将“size-thumbnail”替换为“size-medium”, 和“size-large”大.

注 (3) — 因为我的缩略图是 120x80 像素,所以我想将它们增加到原始大小的 3 倍. 我已经有一个 wordpress 为我创建的 360×240 自定义图像大小,它包含在 src-set 中. 对于 hi-dpi 屏幕,我还有更大的图像尺寸 (e.g. 720×480). 在 wordpress 中创建额外的图像大小很容易——如果你需要这样做,网上有很多很好的指南.

如果您想缩放到 1.5 倍或 2.0 倍,只需更改 3.0 如预期的

jQuery

将以下内容添加到您的 (孩子) 主题的脚本文件 (假设它有一个). 如果没有, 创建你自己的, 并使用自定义函数将其“入队” (孩子) 主题的functions.php

上面的代码适用于在任何带有画廊图标类的 dt 中找到的具有缩略图类的图像 - 换句话说 - 仅适用于 wordpress 内置画廊结构中的图像. 悬停时,最大宽度从 120 to 360 (增加 3 倍以匹配我的 CSS!), 然后函数的第二部分恢复原来的 120 悬停停止时的宽度.

CSS 以上, 您可以调整数字以更改图像放大的程度, 你可以改变 dt.gallery-icon a img.size-thumbnail 根据您要定位的图像来定位不同元素或类的部分.

入队你自己的脚本

如果您的主题没有脚本文件并且您需要将自己的加入队列,请将以下内容添加到您的 (孩子) 主题的functions.php (假设您调用了脚本文件 image-zoom.js 并将其保存在主题的根文件夹中)

以上将注册您的脚本, 在页脚, 确保它放在 jquery 之后 (所以jquery在执行时应该已经可用)

添加图像大小

为了完整起见,这里是如何将自定义图像大小添加到 wordpress. 再次, 将此添加到您的 (孩子) 主题的functions.php

上面我添加了一个名为“四分之一宽度”的新图像大小,最大宽度为 192 像素,最大高度为 144 像素. 图像不会被裁剪 (因此最后是假的).

当您上传图像时,WordPress 现在将自动创建此大小的图像 (您将需要使用缩略图重建插件为已上传的图像重新创建缩略图).

虽然这个新的图像大小不会显示在编辑器中插入. 为了使其可用,还将以下代码添加到您的functions.php

尊重现有设置

你可能想做的另一件事 (确保响应式图像运行良好) 是创造更大的 (即. 高解析度) 尊重的缩略图大小 图形用户界面 是否裁剪缩略图. 要做到这一点,请使用下面的代码,正如您将看到的,从上面更基本的代码稍微修改了一下

上面的代码检查 2 事情 - 首先它检查是否设置了裁剪选项, 如果是, 它反映了我们新的响应尺寸. 它还检查宽度是否设置为 0 (即. 没有最大值) 在这种情况下,我们的新图像也没有最大值. 我将新的图像大小称为“resp-thumb-2x”,因为它是缩略图的“响应式”副本,大小是原来的两倍 (用于具有两倍正常像素密度的 hi-dpi 屏幕). 我还创建了许多其他尺寸来制作相当完整的套装.

注意——由于我的原始缩略图是 120×80,我希望我的新缩略图是 240×160,所以这些是我指定的尺寸 (硬编码). 可以同时获得为原始缩略图指定的高度和宽度,并将两者相乘 2 使此功能完全通用, 但我在开发它的时候没有这样做,所以我会把它留给你去弄清楚!

最后一个提示

如果, 像我这样的, 您创建自己的全套新图像尺寸, 你可能不希望 wordpress 创建它自己的额外隐藏尺寸. 除了原图, 和缩略图, 媒介, 和大图, wordpress 还创建了一个“后缩略图”, 一个“大中型”, 一个 1536×1536 和一个 2048×2048. 这些在 2 不同的方式……

要删除 1536 and 2048 图像是直截了当的

post-thumb 和中大的稍微复杂一些

请注意,删除后缩略图似乎有时会对编辑器中的图像库产生奇怪的影响.

最后一个注意事项

决定图像大小时 (对于更大的图像, 不那么缩略图) 理想情况下,您需要一个尺寸,使常见的纵横比图像始终可以很好地调整为. 出于这个原因,我推荐以下尺寸

尺寸宽度高度 (4:3)高度 (16:9)高度 (3:2)
25美分硬币192144108128
第三288216162192
一半384288216256
576432324384
满的768576432512
1152864648768
加大码153611528641024

请注意指定的宽度如何为所有生成整数高度 3 最常见的纵横比. 你不会得到像这样的宽度 150 或 200.

还要注意增加的模式. 跳 2 表中的行和大小加倍! 偶数行 (288,576,1152 and 1535) 也是之前尺寸的 1.5 倍,因此它们在使用 50% dpi 增加. 通过使用这组 7 对于大多数视口,你有很多可用的选项和一组很好的响应图像,wordpress 会自动添加到 src-set 中,因为它们将具有一致的纵横比,没有会导致质量损失或裁剪的分数.

目前对于缩略图,我倾向于允许无限宽度或我硬裁剪到固定 3:2 比例,所以我使用整数大小的缩略图,但我最终可能会调整我的主题,并通过设置 48px 和 96px 宽的选项来向后扩展上述系统 (请注意,这些之间没有价值 2 不幸的是,这会起作用——因为我使用 60px 宽的迷你缩略图,所以我没有选择向后扩展). 72px 对两者都适用 4:3 and 3:2 (和 64px 可以使用 4:3 and 16:9). 由于我的大部分图像都是在我的 dSLR 上拍摄的,因此这些图像通常是 3:2 (与传统35mm胶片的纵横比相同) 所以我也可以使用这个尺寸, 然后可以一直使用大尺寸, 但是较大的尺寸没有被裁剪而我的缩略图是 - 我很高兴更大的图像既是横向又是纵向, 但我希望缩略图通常是横向的,只适合我的设计, 所以这就是为什么我没有向后延伸. 希望随着越来越多的徽标可用 SVG的的, 还有一次 JPEG-XL 将于近期登陆浏览器, 很多问题都会得到解决.

请通过下面的评论给我们你的想法! 如果您想订阅,请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.

发表评论