{"id":8235,"date":"2019-04-29T08:19:07","date_gmt":"2019-04-29T08:19:07","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=8235"},"modified":"2020-04-21T13:43:39","modified_gmt":"2020-04-21T13:43:39","slug":"how-to-use-amp_loop_image-2","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-use-amp_loop_image-2\/","title":{"rendered":"How to change Thumbnail size in the loop in AMP Theme Framework by using amp_loop_image"},"content":{"rendered":"\n

Description :<\/strong><\/h3>\n\n\n\n

amp_loop_image<\/strong> is a function name in our AMP plugin by using this function we can display featured image in the loop on your homepage, archive pages, and related posts, etc.<\/p>\n\n\n\n

In the amp_loop_image function, we have only one parameter $args like amp_loop_image($args);. in which you need pass an array in the variable like below.<\/p>\n\n\n\n

Source :<\/h3>\n\n\n\n
$args = array(\n                        'tag'='div',\n                        'tag_class'='image-container',\n                        'image_size'='full',\n                        'image_crop'='false',\n                        'image_crop_width'=$width,\n                        'image_crop_height'=$height,\n                        'responsive'= true\n                    );<\/pre>\n\n\n\n
Parameters :<\/h3>\n\n\n\n
tag<\/strong><\/h4>\n\n\n\n
tag is the parameter in the array by using this tag we can set the tag name for example div,  section, and any other tag. in which <a> tag and <amp-img> tag will be wrapped inside that tag. <\/p>\n\n\n\n
tag_class<\/strong><\/h4>\n\n\n\n
tag_class is the parameter in the array by using this tag_class name we can give the class name for that tag.<\/p>\n\n\n\n
image_size<\/h4>\n\n\n\n
image_size is the parameter in the array by using this image_size we can give the full, thumbnail and large, small image size.<\/p>\n\n\n\n
image_crop<\/h4>\n\n\n\n
image_crop is the parameter in the array we can give the value like true or false <\/p>\n\n\n\n
image_crop_width<\/h4>\n\n\n\n
image_crop_width is the parameter in the array we can give the width of the image.<\/p>\n\n\n\n
image_crop_height<\/h4>\n\n\n\n
image_crop_height is the parameter in the array we can get the height of the image. <\/p>\n\n\n\n
responsive<\/h4>\n\n\n\n
responsive is the parameter in the array we can give the value like true or false.  <\/p>\n\n\n\n
Example :<\/h2>\n\n\n\n
 
In the following example, If you want to edit the code of this function and load different size of images then you need to edit the width and height or if you want the default sizes of WP, then you can use the \u201cimage_size\u201d. <\/p>\n\n\n\n
For Example:<\/strong><\/p>\n\n\n\n
<pre>$width \t= 346;\n$height = 188;\n$args = array(\n\t        'tag'=&gt;'div',\n\t\t'tag_class'=&gt;'image-container',\n\t\t'image_size'=&gt;'full',\n\t\t'image_crop'=&gt;'false',\n\t\t'image_crop_width'=&gt;$width,\n\t\t'image_crop_height'=&gt;$height, \n\t\t'responsive'=&gt; 'true'\n\t     ); \n\t\t<div class=\"fsp-img\">\n\t          amp_loop_image($args);\n\t        <\/div><\/pre><\/code><\/pre>\n\n\n\n
 Note:<\/strong>\nIf you want to override loop images then use this function and override height, width, div, etc.<\/p><\/p>\n\n\n\n
<\/p>\n\n\n\n
That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n
\n\t\t\tAsk your Questions Directly!<\/strong>
\n\t\t\t
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