如何使用通用API实现响应式图片处理

在这篇文章里,我们要一起探索WordPress里的响应式图像API。我们会提到响应式图像是什么,为什么要用它们,WordPress是怎么让这些图像工作的,以及如果你想自定义这些图像,该怎么做。

如何使用通用API实现响应式图片处理

什么是响应式图像?

响应式图像是可以适应正在查看的设备的屏幕尺寸的图像。这很重要,因为这意味着无论在什么设备上查看图像,图像总是看起来不错。

让我们看一个例子

大多数现代浏览器都有一种特殊的模式,用于在移动设备上查看网页布局。在基于 Chrome 的浏览器中,它称为设备模式,在 Firefox 和 Safari 中,它称为响应式设计模式。您通常可以从浏览器的开发人员工具访问它。启用此模式后,您可以看到网页在不同设备上的外观。

如果您查看此示例中的标题图像,您会发现当您在移动设备上查看它时它会被裁剪。然而,内容区域中的图像却没有,它只是以较小的尺寸显示图像。

因此,您可能希望能够在移动设备上显示该图像的裁剪版本,并在桌面设备上显示完整图像。这就是响应式图像的用武之地。

正如您在此响应式图像示例中所看到的,当您切换到移动设备时,标题图像和主要内容图像都会被裁剪。

虽然响应式图像如何工作的知识超出了本教程的范围,但您可以在MDN Web 文档中阅读有关如何实现响应式图像的更多信息。

如何使用通用API实现响应式图片处理

WordPress 响应式图像 API

srcset自 WordPress 4.4 起,通过包含和属性函数sizes生成的图像标记,WordPress 原生支持响应式图像。这意味着它默认处于启用状态,并且 WordPress 生成的任何图像都会自动响应。wp_get_attachment_image()

为了理解它是如何工作的,让我们看一个简单的例子。

首先,将图像添加到 WordPress 站点的媒体库中。

如果您随后浏览到上传目录并查看图像的存储位置,您将看到该图像有多个版本。

这是因为 WordPress 会自动生成不同尺寸的多个版本的图像,然后可以在不同的上下文中使用它们。

在响应式图像出现之前,开发人员会尝试根据设备类型向浏览器动态提供不同的图像。服务器将检查正在使用的设备大小,然后提供适当的图像。

这可以通过使用用户代理字符串来实现,该字符串是浏览器发送到服务器的字符串,包含有关所使用的浏览器和设备的信息。

// check the $_SERVER["HTTP_USER_AGENT"] variable to see if this is a mobile device request
$isMob = is_numeric(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]), "mobile")); 

if($isMob){ 
    echo 'Using Mobile Device...'; 
}else{ 
    echo 'Using Desktop...'; 
}

但是,这使得测试变得困难,因为您需要在物理设备上进行测试,使用BrowserStack等服务,或者在测试环境中设置用户代理字符串。

响应式设计使用媒体查询等内容来渲染单个页面,该页面将根据视口宽度和显示密度等内容在浏览器中做出响应。响应式图像遵循此策略,并将所有信息预先发送到浏览器,让浏览器负责加载适当的图像,而不是在页面加载之前在服务器上做出这些决定。

让我们通过将图像添加到帖子中并在编辑器中将其大小设置为完整大小来查看此操作的实际效果。

当您预览图像时,您会发现图像标记不仅仅包含图像 URL。它还包含一个srcset属性和一个sizes属性。

<img decoding="async" fetchpriority="high" width="799" height="533" src="https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg" alt="" class="wp-image-9" 
     srcset="
     https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg 799w, 
     https://learnpress.test/wp-content/uploads/2023/09/water-4-300x200.jpeg 300w, 
     https://learnpress.test/wp-content/uploads/2023/09/water-4-768x512.jpeg 768w" 
     sizes="(max-width: 799px) 100vw, 799px">

让我们仔细看看这个图像标签,以了解这些属性的作用。

srcset属性包含 WordPress 生成的图像的所有不同版本的列表,以及该图像的宽度(以像素为单位)。

在本例中,图像有 3 个不同版本,宽度分别为799769300

sizes属性指定每个媒体条件列表的图像布局宽度。在此示例中,媒体条件为(max-width: 799px),并且有两个布局宽度100vw799px100vw表示图像将以视口宽度的 100% 显示,799px表示图像将以 799px 显示。

因此,在本例中,如果视口宽度小于 799px,则图像将以视口宽度的 100% 显示,否则将以 799px 的宽度显示图像。

然后,浏览器可以使用此信息来根据正在查看图像的设备(由其视口宽度确定)来确定要加载哪个图像。不再需要服务器端逻辑,从而加快页面请求时间。由于图像是静态提供的,因此浏览器可以缓存它们,从而进一步加快页面加载时间。

新功能和挂钩

WordPress 4.4 引入了许多新函数和挂钩,使使用响应式图像变得更加容易。

为了防止向srcset属性添加非常大的图像,添加了一个max_srcset_image_width 过滤器,它允许主题为列表中包含的图像设置最大图像宽度srcset。默认值为 2048 像素。

自定义响应式图像标记

如果需要,还可以自定义响应式图像标记。

您可以使用过滤器过滤器来修改默认值srcsetsizes属性,或者使用 wp_get_attachment_image_attributes 过滤器覆盖未嵌入帖子内容中的图像的或属性(例如帖子缩略图、图库等) ,类似于其他图像属性被修改。wp_calculate_image_srcset wp_calculate_image_sizes srcsetsizes

如果您正在开发主题,您还可以使用 函数 创建您自己的自定义标记wp_get_attachment_image_srcset 模式

让我们看一个例子。

假设您想要生成一个输出img该图像的标签的函数,但您只想渲染中等大小的图像,并设置一个自定义sizes属性。

默认情况下,在视口宽度小于 799 像素的情况下以 100% 的视口显示图像,在更宽的视口上以 799 像素的宽度显示图像,而您希望将尺寸属性设置为使用 768 像素的中等图像宽度。

这意味着您需要将 size 属性设置为(max-width: 768px) 100vw, 768px

function get_custom_responsive_image( $attachment_id ) {
	$img_src    = wp_get_attachment_image_url( $attachment_id, 'medium' );
	$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
	echo '<img src="' . $img_src . '" srcset="' . $img_srcset . '" sizes="(max-width: 768w) 100vw, 768px" alt="Our custom responsive image">';
}

然后,您可以在任何支持 PHP 的主题文件中调用此函数,例如经典主题中的模板和模板部分,或块主题中的块模式。

在此示例中,它被添加到“二十二十三”主题的页脚默认模式中,位于该模式顶部的组块内。图像 ID 是 9,您可以将其传递给函数:

	<!-- wp:group {"align":"wide"} -->
	<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40)">
		<?php get_custom_responsive_image( 9 ); ?>
	</div>
	<!-- /wp:group -->

如果您在前端查看此内容,您可以看到自定义尺寸属性已用于该特定图像。

如果您在设备模式下对此进行测试,您将看到在设备尺寸低于 768 像素时,图像以视口宽度的 100% 显示,而在尺寸高于 768 像素时,图像以 768 像素的宽度显示。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/6649/

(0)
上一篇 2024年 3月 29日 下午2:55
下一篇 2024年 3月 29日 下午3:30

相关推荐

  • WordPress安全分析:究竟有多安全?

    WordPress是否安全?很多新用户都会问这个问题,特别是当他们知道WordPress是一个开源平台时,心中中难免会有顾虑。那么,我们今天用数据来回答这个问题。 我会从WordPress核心、主题和插件的安全,登录信息的保护,以及托管服务的安全性等方面的统计信息和报告来进行探讨。 我的目标是让你不仅能了解到WordPress的整体安全状况,还能明白潜在的风…

    2024年 4月 1日 WordPress自学建站
    0041
  • WordPress 绑定多个域名教程,使多个域名可访问同一个WordPress站点

    教程思路:需要绑定的域名,我们先在宝塔建立一个新的网站,然后让这个网站使用A站的WordPress程序文件,最后把在程序文件里添加相应的代码达到,多域名访问同一站点的效果。 说明:以下例子: www.123.com 为初始网站 需要增加绑定的域名为 www.a.com www.b.com www.c.com等等 1,建立需要绑定的域名为新网站 首先,把需要绑…

    2024年 4月 16日 WordPress
    0012
  • 初学者指南:比较Magento、WordPress、Shopify和中国建站工具的优劣势

    下面是关于Magento、WordPress、Shopify和其他中国建站工具的一些主要区别和优劣势的表格: 项目 Magento WordPress Shopify 其他中国建站工具 使用难度 非常难用 简单易用 简单易用 不同工具难易程度不一 适用对象 大型电商企业 中小型电商和个人博客 小型电商企业和新手 以本地语言和市场为主 功能丰富度 功能非常丰富…

    2023年 3月 16日
    00496
  • wordprees网站的页面链接过长,怎么自定义链接内容?

    WordPress 是一个非常流行的网站建设平台,其具有非常强大的功能和灵活性,可以帮助用户快速创建高效的网站。在使用 WordPress 建站的过程中,如果网站的页面链接过长,这不仅不利于用户体验,还会降低网站的搜索引擎优化效果。因此,自定义链接内容和设置伪静态是非常重要的。下面是一个详细的教程,帮助您完成这些操作。 在 WordPress 中,自定义链接…

    2023年 3月 7日
    00477
  • 在WordPress网站上添加社交媒体图标的简易指南

    在网站上添加社交媒体图标很重要,因为它能帮助访客轻松地在他们常用的社交平台上找到并关注您。如果您的网站没有这些图标,比如在页脚或页眉,访客可能就找不到它们,这就好比您没有提供一种方法让人们在社交媒体上联系您一样,实在是不可思议! 在这篇文章里,我们会简单介绍社交媒体图标的重要性,并指导您如何把它们加到您的网站侧边栏、页眉或页脚。 在 WordPress 网站…

    2024年 3月 25日 WordPress自学建站
    0036

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信