作为最近对各种网站进行的改进的一部分，我想让画廊中的图像在悬停时显示放大版本. 用基本的做这个 CSS 相当简单, 但我不只是想扩展原始图像, 我想让浏览器抓取一个新的 (更大) 图也…
所有的图像都已经提供了一个完整的 src-set 所以我需要做的就是使用一点 jQuery (无论如何，它已经被wordpress加载了) 改变目标显示尺寸使浏览器拉出更大的图像. 好消息是 CSS 立即工作，因此您可以使用原始文件获得更大的图像, 然后随着更高分辨率的文件被加载，质量会在一瞬间提高.
该 CSS
该 CSS 我用的是如下. 我只是将它添加到我的主题的 style.css 中 (或者更确切地说是儿童主题——使用一个总是一个好主意)
1 2 3 4 | dt.gallery-icon a img.size-thumbnail:hover { transform: scale(3.0); } |
注 (1) - 以上 CSS 仅适用于画廊图像. 不太可能有人希望为页面上任何位置显示的所有图像提供此功能, 但您可能希望它用于主要内容部分. 您需要检查您的主题如何构建它, 但在我的情况下，主要内容区域是一个“部分”，所以下面的代码可以完成这项工作
1 2 3 4 | section.entry-content p a img.size-thumbnail:hover { transform: scale(3.0); } |
注 (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
1 2 3 4 5 6 7 8 9 10 11 | jQuery(document).ready(function(){ jQuery(“dt.gallery-icon a img.size-thumbnail”).hover(function(){ jQuery(this).attr(“sizes”,”(max-width: 360px) 100vw, 360px”); }, function(){ jQuery(this).attr(“sizes”,”(max-width: 120px) 100vw, 120px”); }); //repeat the above 5 lines here for each different image size you want to modify }); |
上面的代码适用于在任何带有画廊图标类的 dt 中找到的具有缩略图类的图像 - 换句话说 - 仅适用于 wordpress 内置画廊结构中的图像. 悬停时，最大宽度从 120 to 360 (增加 3 倍以匹配我的 CSS!), 然后函数的第二部分恢复原来的 120 悬停停止时的宽度.
与 CSS 以上, 您可以调整数字以更改图像放大的程度, 你可以改变 dt.gallery-icon a img.size-thumbnail 根据您要定位的图像来定位不同元素或类的部分.
入队你自己的脚本
如果您的主题没有脚本文件并且您需要将自己的加入队列，请将以下内容添加到您的 (孩子) 主题的functions.php (假设您调用了脚本文件 image-zoom.js 并将其保存在主题的根文件夹中)
1 2 | wp_register_script( ‘img-zoom’, get_stylesheet_directory_uri() . ‘/image-zoom.js’, array( ‘jquery’ ), ”, true); wp_enqueue_script( ‘img-zoom’ ); |
以上将注册您的脚本, 在页脚, 确保它放在 jquery 之后 (所以jquery在执行时应该已经可用)
添加图像大小
为了完整起见，这里是如何将自定义图像大小添加到 wordpress. 再次, 将此添加到您的 (孩子) 主题的functions.php
1 | add_image_size( ‘quarter-width’, 192, 144, false ); |
上面我添加了一个名为“四分之一宽度”的新图像大小，最大宽度为 192 像素，最大高度为 144 像素. 图像不会被裁剪 (因此最后是假的).
当您上传图像时，WordPress 现在将自动创建此大小的图像 (您将需要使用缩略图重建插件为已上传的图像重新创建缩略图).
虽然这个新的图像大小不会显示在编辑器中插入. 为了使其可用，还将以下代码添加到您的functions.php
1 2 3 4 5 | function my_custom_image_sizes( $sizes ) { return array_merge( $sizes, array( ‘quarter-width’ => __(‘Quarter Width’), ) ); } |
尊重现有设置
你可能想做的另一件事 (确保响应式图像运行良好) 是创造更大的 (即. 高解析度) 尊重的缩略图大小 图形用户界面 是否裁剪缩略图. 要做到这一点，请使用下面的代码，正如您将看到的，从上面更基本的代码稍微修改了一下
1 | add_image_size( ‘resp-thumb-2x’, (get_option( ‘thumbnail_size_w’ ) == 0 ? 0 : ‘240’), 160, get_option( ‘thumbnail_crop’ ) ); |
上面的代码检查 2 事情 - 首先它检查是否设置了裁剪选项, 如果是, 它反映了我们新的响应尺寸. 它还检查宽度是否设置为 0 (即. 没有最大值) 在这种情况下，我们的新图像也没有最大值. 我将新的图像大小称为“resp-thumb-2x”，因为它是缩略图的“响应式”副本，大小是原来的两倍 (用于具有两倍正常像素密度的 hi-dpi 屏幕). 我还创建了许多其他尺寸来制作相当完整的套装.
注意——由于我的原始缩略图是 120×80，我希望我的新缩略图是 240×160，所以这些是我指定的尺寸 (硬编码). 可以同时获得为原始缩略图指定的高度和宽度，并将两者相乘 2 使此功能完全通用, 但我在开发它的时候没有这样做，所以我会把它留给你去弄清楚!
最后一个提示
如果, 像我这样的, 您创建自己的全套新图像尺寸, 你可能不希望 wordpress 创建它自己的额外隐藏尺寸. 除了原图, 和缩略图, 媒介, 和大图, wordpress 还创建了一个“后缩略图”, 一个“大中型”, 一个 1536×1536 和一个 2048×2048. 这些在 2 不同的方式……
要删除 1536 and 2048 图像是直截了当的
1 2 | remove_image_size( ‘1536×1536’ ); //remove the 1536 we dont need it remove_image_size( ‘2048×2048’ ); //remove the 2048 we dont need it |
post-thumb 和中大的稍微复杂一些
1 2 3 4 5 6 7 8 9 | //remove the built-in medium-large add_filter(‘intermediate_image_sizes’, function($sizes) { return array_diff($sizes, [‘medium_large’]); }); //remove the built-in post-thumbnail add_filter(‘intermediate_image_sizes’, function($sizes) { return array_diff($sizes, [‘post-thumbnail’]); }); |
请注意，删除后缩略图似乎有时会对编辑器中的图像库产生奇怪的影响.
最后一个注意事项
决定图像大小时 (对于更大的图像, 不那么缩略图) 理想情况下，您需要一个尺寸，使常见的纵横比图像始终可以很好地调整为. 出于这个原因，我推荐以下尺寸
| 尺寸 | 宽度 | 高度 (4:3) | 高度 (16:9) | 高度 (3:2) |
|---|---|---|---|---|
| 25美分硬币 | 192 | 144 | 108 | 128 |
| 第三 | 288 | 216 | 162 | 192 |
| 一半 | 384 | 288 | 216 | 256 |
| 中 | 576 | 432 | 324 | 384 |
| 满的 | 768 | 576 | 432 | 512 |
| 大 | 1152 | 864 | 648 | 768 |
| 加大码 | 1536 | 1152 | 864 | 1024 |
请注意指定的宽度如何为所有生成整数高度 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 将于近期登陆浏览器, 很多问题都会得到解决.
你怎么看? 请给我们一个评论如下! 如果您想订阅，请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.
罗杰 上 从数码士PVR 9200T的文件复制到电脑: “我正在尝试找到为支持 Windows x64 而创建的软件 mike 的副本 (HumaxPVR.zip)....他的下载链接…”
发表评论