We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
srcset
我当前应用的是WordPress 4.4.2版本,文章中插入的图片,如果编辑过大小,那么WordPress会使用srcset项目来根据缩放大小自动的显示图片。示例如下:
<img class="alignnone wp-image-463" src="http://img.example.com/wp/2016/03/example.jpg" alt="example" width="201" height="201" srcset="http://oss.example.com/wp/2016/03/example-150x150.jpg 150w, http://oss.example.com/wp/2016/03/example-300x300.jpg 300w, http://oss.example.com/wp/2016/03/example-768x768.jpg 768w, http://oss.example.com/wp/2016/03/example-1024x1024.jpg 1024w, http://oss.example.com/wp/2016/03/example-210x210.jpg 210w, http://oss.example.com/wp/2016/03/example.jpg 1280w" sizes="(max-width: 201px) 100vw, 201px">
此代码存在两个问题
oss.example.com
example.jpg@!thumbnail
经过研究代码后发现,此项功能并没有应用wp_get_attachment_url这项功能,而是由函数内部通过wp_calculate_image_srcset_meta和_wp_upload_dir_baseurl获取链接后自行拼接。因此,为了修复这个问题,我同时修改了插件和WordPress源代码来修复这一问题。(由于本人对WordPress并不熟悉,因此修复方案并非最佳解决方案,如果有更好方案请互相交流。)
wp_get_attachment_url
wp_calculate_image_srcset_meta
_wp_upload_dir_baseurl
修改PATH/wp-content/plugins/aliyun-oss-support-master/oss-support.php文件
PATH/wp-content/plugins/aliyun-oss-support-master/oss-support.php
// wp-content/plugins/aliyun-oss-support-master/oss-support.php // 第194行起 if(!$oss_options['img_url'] == "") add_action('wp_delete_file', 'delete_thumb_img', 99);
改为
if(!$oss_options['img_url'] == ""){ add_filter('wp_get_attachment_metadata', 'modefiy_img_meta', 990); add_filter('wp_calculate_image_srcset_meta', 'modefiy_img_meta', 990); //增加此项处理 }
修改 PATH/wp-includes/media.php文件
PATH/wp-includes/media.php
// wp-includes/media.php // 第1048行起(4.4.2版本) $image_baseurl = _wp_upload_dir_baseurl(); $image_baseurl = trailingslashit( $image_baseurl ) . $dirname;
$image_baseurl = _wp_upload_dir_baseurl(); //插入如下部分,借用了插件中替换url的部分代码 $oss_options = get_option('oss_options', TRUE); if(!$oss_options['img_url'] == ""){ $image_baseurl = rtrim($oss_options['img_url'], '/'); if(rtrim($oss_options['path'], '/') != ""){ $image_baseurl = $image_baseurl .'/'. rtrim($oss_options['path'], '/'); } } $image_baseurl = trailingslashit( $image_baseurl ) . $dirname;
运行效果演示(可正常的从oss中获取图片并显示出来)
<img class="alignnone wp-image-463" src="http://img.example.com/wp/2016/03/example.jpg" alt="example" width="201" height="201" srcset="http://img.example.com/wp/2016/03/example.jpg@!thumbnail 150w, http://img.example.com/wp/2016/03/example.jpg@!medium 300w, http://img.example.com/wp/2016/03/example.jpg@!medium_large 768w, http://img.example.com/wp/2016/03/example.jpg@!large 1024w, http://img.example.com/wp/2016/03/example.jpg@!medium 210w, http://img.example.com/wp/2016/03/example.jpg 1280w" sizes="(max-width: 201px) 100vw, 201px">
可以看到,链接被替换成img.example.com,图片名称也正确了。
img.example.com
另外,演示代码中的图片类型数量与原版插件支持的要多一些(如多了medium_large),如果有需要,请自行在oss-support.php文件的modefiy_img_meta函数中添加(请在阿里云OSS后台的图片处理功能中也一并添加,具体教程在插件安装说明中)。
oss-support.php
modefiy_img_meta
安装好插件后,我进行了一次批量的wp-content/uploads上传到OSS服务器的文件传输。
wp-content/uploads
但是,已经上传好的文章中,还是保存着本地的文件链接,修改方法只需要运行一次SQL指令即可,指令如下:
update `wp_posts` set `post_content`=REPLACE(`post_content`,'http://example.com/wp-content/uploads/','http://img.example.com/wp/');
请注意,请先备份数据库,并将上诉SQL语句中的两个链接替换成您自己的地址 http://example.com/wp-content/uploads/ - 之前数据库中保存的链接 http://img.example.com/wp/ - 阿里云OSS的图片链接
http://example.com/wp-content/uploads/
http://img.example.com/wp/
The text was updated successfully, but these errors were encountered:
😄😄😄😄 感谢反馈~~~
其实你可以直接贡献代码 fork 一份,修改后给我提一个 request,有好的建议或改进就可以直接更新到主分支
Sorry, something went wrong.
因为此项修改并不只是修改了插件中的内容,而是同时修改了WordPress的源代码,因此我只能特意撰写此流程来帮助有需要的用户,如果后续还发现有什么问题,我会直接提交request给您。
这个问题主要原因其实是WordPress的内部编码并未调用设计好的功能代码,而是自己实现一份,并非是OSS插件的问题。我目前还发现有一些广泛使用的插件也是类似的处理,自带resizer或者自己实现文件的转储(调用php的文件接口),造成OSS插件无法完美的工作,我在网上搜寻时,国外用户使用Amazon S3也是经常碰到类似的问题。
不过还是非常感谢您贡献的插件,对我帮助非常大。我制作的是一个福利机构的网站,主要发布日常一些活动的照片,因此每个页面的照片都非常多。通过使用此插件,我的页面读取速度和能够提供的访问量提高了非常多。在此表示感谢。
Commit d18cb08 已经修复,不用改系统文件了
No branches or pull requests
修复
srcset
的图片显示我当前应用的是WordPress 4.4.2版本,文章中插入的图片,如果编辑过大小,那么WordPress会使用
srcset
项目来根据缩放大小自动的显示图片。示例如下:此代码存在两个问题
oss.example.com
是附件上传地址,无法使用OSS的图片服务。example.jpg@!thumbnail
等。经过研究代码后发现,此项功能并没有应用
wp_get_attachment_url
这项功能,而是由函数内部通过wp_calculate_image_srcset_meta
和_wp_upload_dir_baseurl
获取链接后自行拼接。因此,为了修复这个问题,我同时修改了插件和WordPress源代码来修复这一问题。(由于本人对WordPress并不熟悉,因此修复方案并非最佳解决方案,如果有更好方案请互相交流。)修改方案
修改
PATH/wp-content/plugins/aliyun-oss-support-master/oss-support.php
文件改为
修改
PATH/wp-includes/media.php
文件改为
运行效果演示(可正常的从oss中获取图片并显示出来)
可以看到,链接被替换成
img.example.com
,图片名称也正确了。另外,演示代码中的图片类型数量与原版插件支持的要多一些(如多了medium_large),如果有需要,请自行在
oss-support.php
文件的modefiy_img_meta
函数中添加(请在阿里云OSS后台的图片处理功能中也一并添加,具体教程在插件安装说明中)。转移已有图片到OSS并修复链接
安装好插件后,我进行了一次批量的
wp-content/uploads
上传到OSS服务器的文件传输。但是,已经上传好的文章中,还是保存着本地的文件链接,修改方法只需要运行一次SQL指令即可,指令如下:
请注意,请先备份数据库,并将上诉SQL语句中的两个链接替换成您自己的地址
http://example.com/wp-content/uploads/
- 之前数据库中保存的链接http://img.example.com/wp/
- 阿里云OSS的图片链接The text was updated successfully, but these errors were encountered: