当前位置: Wordpress插件首页 > Wordpress图片插件 > Picture Element Responsive and Retina Images Wordpress图片插件

Picture Element Responsive and Retina Images Wordpress图片插件

Wordpress图片插件
  • 插件图片

Picture Element Responsive and Retina Images Wordpress插件图文教程

Description

WordPress has introduced the srcset feature into core which is great but this plugin goes a step further to help theme developers use the picture element with a fallback to a standard image tag and srcset.

This plugin also offers support for on the fly image generation plugins. In fact it’s hugely encouraged to use one as this plugin can cause image uploads to slow down otherwise.

It also offers support for 2x and 3x images for retina screens so you can serve the best image possible for your visitors.

Define image sizes

First you need to define your image sizes, similar to add_image_size. This particular function is optional but recommended because it also creates 2x and 3x images for retina.
E.G. add_image_size_for_picture(’mobile_images’, 320, 0, true);

Using images in your template

Once your sizes are defined you can call them in your template like so:

generate_picture($some_attachment_id, [
    ’mobile_images’ => ’(max-width: 320px)’
], [
    ’class’ => ’some-class-name’,
    ’data-item’ => 1
]);

The second argument array is in the format of image size name : media query that way you can specify as many different responsive sizes as you need to.
The third argument allows you to add attributes to the source/img tag.

Integrating with on the fly image generation plugins

Adding upload sizes to wordpress and slow down the image upload significantly as we generate three times as many images that you add a size for. This can cause the upload to time out if you are using a server with a low amount of cpu cores.

To solve this we recommend using a plugin that will create these images independent of the upload and not affect users. For this purpose we have three filters available for you to change the functions we call underneath the hood.

responsive_retina_images_add_size_function is the function to call when adding a new size, by default this calls `add_image_size`
’responsive_retina_images_source_function is the function to call when pulling the image from the database, by default this calls `wp_get_attachment_image_src`
responsive_retina_images_source_function_index is the index at which to access the url returned from `responsive_retina_images_source_function`, by default this is `0`

For example if you were to integrate with Fly Dynamic Image Resizer you could add the following to your functions.php.

add_filter(’responsive_retina_images_add_size_function’, function() { return ’fly_add_image_size’; });
add_filter(’responsive_retina_images_source_function’, function() { return ’fly_get_attachment_image_src’; });
add_filter(’responsive_retina_images_source_function_index’, function() { return ’src’; });
查看更多

Picture Element Responsive and Retina Images Wordpress图片插件基本信息

插件名称:Picture Element Responsive and Retina Images 插件作者:Picture Element Responsive and Retina Images 插件语言:English (US) 插件版本:1.0.0 Wordpress最低版本: Wordpress支持版本: PHP版本: 插件唯一标识:wp-responsive-retina-images 官方站点:https://wordpress.org 插件唯一标识:wp-responsive-retina-images

Picture Element Responsive and Retina Images Wordpress插件用户数和评分

下载次数:10 用户评分: (共5分) 参与评分人数: 评分详情:

Picture Element Responsive and Retina Images Wordpress插件文件信息

当前版本:1.0.0 最后更新日期:2017-02-23 文件大小:3KB

Picture Element Responsive and Retina Images Wordpress插件下载地址

进入插件下载页面 已有 10 人成功下载

Picture Element Responsive and Retina Images Wordpress插件近一年下载统计

月份 当月下载量
2017年02月Picture Element Responsive and Retina Images Wordpress插件共 5 次下载
2017年03月Picture Element Responsive and Retina Images Wordpress插件共 4 次下载
2017年04月Picture Element Responsive and Retina Images Wordpress插件共 4 次下载
2017年05月Picture Element Responsive and Retina Images Wordpress插件共 3 次下载
2017年06月Picture Element Responsive and Retina Images Wordpress插件共 4 次下载
2017年07月共 3 次下载
2017年08月共 2 次下载
2017年09月共 4 次下载
2017年10月共 4 次下载
2017年11月共 3 次下载

Picture Element Responsive and Retina Images Wordpress插件同类插件推荐