Clicky

  1. Home
  2. Theming (AMP Theme Framework)
  3. How to change Thumbnail size in the loop in AMP Theme Framework by using amp_loop_image

How to change Thumbnail size in the loop in AMP Theme Framework by using amp_loop_image

Description :

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.

Source :

$args = array(
                        'tag'='div',
                        'tag_class'='image-container',
                        'image_size'='full',
                        'image_crop'='false',
                        'image_crop_width'=$width,
                        'image_crop_height'=$height,
                        'responsive'= true
                    );

Parameters :

tag

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

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

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

image_crop is the parameter in the array we can give the value like true or false

image_crop_width

image_crop_width is the parameter in the array we can give the width of the image.

image_crop_height

image_crop_height is the parameter in the array we can get the height of the image.

responsive

responsive is the parameter in the array we can give the value like true or false.

Example :


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”.

For Example:

<pre>$width 	= 346;
$height = 188;
$args = array(
	        'tag'=&gt;'div',
		'tag_class'=&gt;'image-container',
		'image_size'=&gt;'full',
		'image_crop'=&gt;'false',
		'image_crop_width'=&gt;$width,
		'image_crop_height'=&gt;$height, 
		'responsive'=&gt; '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.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on April 21, 2020

    Are you still looking for a solution?

    Then fill out the below form and we will reach out to you within a few hours.

    Was this article helpful?

    Related Articles

    Comments

    1. How to change the size of the featured image and do thumbnails for it instead of the original image?

      1. Hi Jonas W Borchgrevink,

        If you want to change the size of the featured image then add this code – Design -> Global ->Custom CSS

        figure.amp-featured-image {
        max-width: 320px;
        margin: 0 auto;
        }

        and if you want to change through filter then let us know

    2. Hello! Images don’t display only on Homepage of my site. What can I do?

      Link: the-warsaw.com/amp

      1. Hi Uladzislau,

        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.

    3. 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)

    Leave a Comment