Linux 软件免费装
Banner图

WP Responsive Data Image

开发者 roman01la
更新时间 2012年7月11日 11:51
PHP版本: 3 及以上
WordPress版本: 3.3
版权: GPLv2 or later
版权网址: 版权信息

标签

responsive images rwd responsive web design responsive img

下载

1.0 1.1 1.1.5

详情介绍:

Plugin detects screen width and let browser render image file which is neccessary to use at the moment. Activate Plugin and upload image files using WordPress Media Uploader. You can use four image variants, each variant name shoud be specifically renamed: Define breakpoints using this script into the <head></head> tag of your header.php template: <script> $(function() { $(".adapted").rdi({ "mobile": 480, "tablet": 1024, "desktop": 1920 }); }) </script> These are standart values replace them with yours. Use RDI button while editing post/page to insert [rdi][/rdi] shortcode. Put standart/normal image path into the shortcode. You can align image with rdi-align attribute (by default image will be centered): That's all! Shortcode will generate markup similar to this: <a href="_path_"> <img class="rdi-adapted" data-src="_path_"> </a> <noscript> <a href="_path_"> <img src="_path_"> </a> </noscript> Attribute data-src contains standart/normal image path. Plugin uses this url for generating appropriate path to the necessary image file which should be used at the moment. If there's no appropriate file, browser will render standart/normal image. In case if JavaScript is disabled browser will use noscript img element which contains standart/normal image. WP Responsive Data Image page (for more info)

安装:

  1. Upload to the /wp-content/plugins/ directory.
  2. Activate through the 'Plugins' menu in WordPress.
  3. Insert code into the <head></head> tag of your header.php template and set values for smartphone, tablet and desktop.

更新日志:

1.1.5 1.1 1.0