{"id":18779,"date":"2012-06-26T01:12:01","date_gmt":"2012-06-26T01:12:01","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/wp-responsive-data-image\/"},"modified":"2012-07-11T03:51:29","modified_gmt":"2012-07-11T03:51:29","slug":"wp-responsive-data-image","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/wp-responsive-data-image\/","author":9717058,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.1.5","stable_tag":"1.1.5","tested":"3.3.2","requires":"3","requires_php":"","requires_plugins":"","header_name":"WP Responsive Data Image","header_author":"Roman Liutikov","header_description":"","assets_banners_color":"7bb2d9","last_updated":"2012-07-11 03:51:29","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"http:\/\/wordpress.org\/extend\/plugins\/wp-responsive-data-image\/","header_author_uri":"http:\/\/romanliutikov.com\/","rating":0,"author_block_rating":0,"active_installs":10,"downloads":1850,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":0},"assets_icons":[],"assets_banners":{"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":"563848","resolution":"772x250","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0","1.1","1.1.5"],"block_files":[],"assets_screenshots":[],"screenshots":[]},"plugin_section":[],"plugin_tags":[2698,70551,70550],"plugin_category":[],"plugin_contributors":[91510],"plugin_business_model":[],"class_list":["post-18779","plugin","type-plugin","status-closed","hentry","plugin_tags-responsive-images","plugin_tags-responsive-img","plugin_tags-rwd-responsive-web-design","plugin_contributors-roman01la","plugin_committers-roman01la"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/wp-responsive-data-image_7bb2d9.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"<!--section=description-->\n<p>Plugin detects screen width and let browser render image file which is neccessary to use at the moment.<\/p>\n\n<p>Activate Plugin and upload image files using <strong>WordPress Media Uploader<\/strong>. You can use four image variants, each variant name shoud be specifically renamed:<\/p>\n\n<ul>\n<li><code>_image name_-small<\/code> - for low-res screens ( for smartphones );<\/li>\n<li><code>_image name_-med<\/code>- for med-res screens ( for tablets );<\/li>\n<li><code>_image name_<\/code> - for standart\/normal resolution screens (nothing changed) ( for desktops );<\/li>\n<li><code>_image name_-large<\/code> - for high-res screens ( for high-res screens );<\/li>\n<\/ul>\n\n<p>Define breakpoints using this script into the <code>&lt;head&gt;&lt;\/head&gt;<\/code> tag of your <code>header.php<\/code> template:<\/p>\n\n<pre><code>&lt;script&gt;\n    $(function() {\n        $(\".adapted\").rdi({\n            \"mobile\": 480,\n            \"tablet\": 1024,\n            \"desktop\": 1920\n        });\n    })\n&lt;\/script&gt;\n<\/code><\/pre>\n\n<p>These are standart values replace them with yours.<\/p>\n\n<p>Use <code>RDI<\/code> button while editing post\/page to insert <code>[rdi][\/rdi]<\/code> shortcode. Put <code>standart\/normal<\/code> image path into the shortcode. You can align image with <code>rdi-align<\/code> attribute (by default image will be centered):<\/p>\n\n<ul>\n<li><code>[rdi align=\"rdi-left\"][\/rdi]<\/code> - align to the left;<\/li>\n<li><code>[rdi align=\"rdi-right\"][\/rdi]<\/code> - alight to the right.<\/li>\n<\/ul>\n\n<p>That's all!<\/p>\n\n<p>Shortcode will generate markup similar to this:<\/p>\n\n<pre><code>&lt;a href=\"_path_\"&gt;\n    &lt;img class=\"rdi-adapted\" data-src=\"_path_\"&gt;\n&lt;\/a&gt;\n&lt;noscript&gt;\n    &lt;a href=\"_path_\"&gt;\n        &lt;img src=\"_path_\"&gt;\n    &lt;\/a&gt;\n&lt;\/noscript&gt;\n<\/code><\/pre>\n\n<p>Attribute <code>data-src<\/code> contains <code>standart\/normal<\/code> 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 <code>standart\/normal<\/code> image. In case if JavaScript is disabled browser will use <code>noscript img<\/code> element which contains <code>standart\/normal<\/code> image.<\/p>\n\n<p><a href=\"http:\/\/romanliutikov.com\/responsive-data-image\/\">WP Responsive Data Image page (for more info)<\/a><\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Activate through the 'Plugins' menu in WordPress.<\/li>\n<li>Insert code into the <code>&lt;head&gt;&lt;\/head&gt;<\/code> tag of your <code>header.php<\/code> template and set values for <code>smartphone<\/code>, <code>tablet<\/code> and <code>desktop<\/code>.<\/li>\n<\/ol>\n\n<!--section=changelog-->\n<h4>1.1.5<\/h4>\n\n<ul>\n<li>Minor bugs fixed<\/li>\n<\/ul>\n\n<h4>1.1<\/h4>\n\n<ul>\n<li>Added custom breakpoints<\/li>\n<\/ul>\n\n<h4>1.0<\/h4>\n\n<ul>\n<li>Plugin Released.<\/li>\n<\/ul>","raw_excerpt":"Plugin allows using of responsive images ( &lt;img&gt; element ) for different screen resolutions. Save bandwidth of your mobile users!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/18779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=18779"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/roman01la"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=18779"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=18779"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=18779"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=18779"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=18779"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=18779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}