{"id":11223,"date":"2019-06-18T11:23:36","date_gmt":"2019-06-18T11:23:36","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=11223"},"modified":"2020-05-07T12:01:48","modified_gmt":"2020-05-07T12:01:48","slug":"how-to-modify-the-in-content-related-post-image-loop-by-using-the-filter","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-modify-the-in-content-related-post-image-loop-by-using-the-filter\/","title":{"rendered":"How to modify the In-Content Related Post image loop by using the filter"},"content":{"rendered":"\n<p>If you want to change or modify the width, height and responsive for In-Content Related Post image loop then you need to add below the filter<\/p>\n\n\n\n<p><strong>Example code:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;PHP&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;php&quot;}\">add_filter('ampforwp_modify_inline_rp_loop_image','dummy_function');\nfunction dummy_function($args){\n    $thumb_url_2 = ampforwp_get_post_thumbnail('url');\n    list($width, $height) = getimagesize($thumb_url_2);  \n\n   $custom_img = preg_replace(\n     '\/&lt;amp-img src=(.*?)\\s(.*)width=(.*?)\\s(.*)height=(.*?)\\s(.*)layout=(.*?)\\s&gt;&lt;\\\/amp-img&gt;\/',\n      '&lt;amp-img src='.$thumb_url_2.' width='.$width.' height='.$height.' layout=&quot;responsive&quot; class=&quot;img-cover&quot;&gt;&lt;\/amp-img&gt;', $args);\n    \n\n  $custom_changes .= '&lt;div class=&quot;image-container-rltd&quot;&gt;';\n  $custom_changes .= $custom_img;\n  $custom_changes .= '&lt;\/div&gt;';\n  $args = $custom_changes;\n  return $args;\n}<\/pre><\/div>\n\n\n\n<h4>The Output of In-Content Related Post image loop<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"492\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1-1024x492.png\" alt=\"\" class=\"wp-image-11230\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1-1024x492.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1-300x144.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1-768x369.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1-100x48.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/06\/content-1.png 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>If you want to change or modify the width, height and responsive for In-Content Related Post image loop then you need to add below the filter Example code: The Output of In-Content Related Post image loop That\u2019s it for this tutorial! We hope it helped you. If you have any&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/11223"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=11223"}],"version-history":[{"count":8,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/11223\/revisions"}],"predecessor-version":[{"id":17282,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/11223\/revisions\/17282"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=11223"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=11223"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=11223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}