amp_loop_image 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.
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.
$args = array( 'tag'='div', 'tag_class'='image-container', 'image_size'='full', 'image_crop'='false', 'image_crop_width'=$width, 'image_crop_height'=$height, 'responsive'= true );
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.
tag_class is the parameter in the array by using this tag_class name we can give the class name for that tag.
image_size is the parameter in the array by using this image_size we can give the full, thumbnail and large, small image size.
image_crop is the parameter in the array we can give the value like true or false
image_crop_width is the parameter in the array we can give the width of the image.
image_crop_height is the parameter in the array we can get the height of the image.
responsive is the parameter in the array we can give the value like true or false.
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 “image_size”.
<pre>$width = 346; $height = 188; $args = array( 'tag'=>'div', 'tag_class'=>'image-container', 'image_size'=>'full', 'image_crop'=>'false', 'image_crop_width'=>$width, 'image_crop_height'=>$height, 'responsive'=> 'true' ); <div class="fsp-img"> amp_loop_image($args); </div></pre>
Note: If you want to override loop images then use this function and override height, width, div, etc.
That’s it for this tutorial!
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.
How to change the size of the featured image and do thumbnails for it instead of the original image?
Hi Jonas W Borchgrevink,
If you want to change the size of the featured image then add this code – Design -> Global ->Custom CSS
margin: 0 auto;
and if you want to change through filter then let us know
Hello! Images don’t display only on Homepage of my site. What can I do?
We have just checked your AMP homepage and it seems that images are showing – the-warsaw.com/amp please check that and let us know.
In the mobile version, my thumbnails are stretched how can I modify these so that the actual whole image is displayed without stretching. Thanks in advance.
URL: https://learnmechanical.com/?amp=1&s=lathe (In desktop it is okay, but in mobile, it is stretched)
Hi Saswata Baksi,
Will you please contact our technical team from here- https://ampforwp.com/support/ and they will help you to fix the issue.