Add AMP Featured Image to WordPress
You have probably noticed by now that the AMP (Accelerated Mobile Page) plugin for WordPress is very simplistic in nature and doesn’t contain any significant features for customization. Well….you are correct. But the intent for this plugin is to minimize the headache of load speeds; hence accelerated.
But have no fear, there are solutions that exist. I am a visual person myself and I wanted to make sure that my featured image on posts showed up in mobile search as well as on page. So I made an effort in finding/creating a solution to bringing AMP featured images to the forefront of necessary application.
Besides, its all about the bass….I mean the user experience. Isn’t it?
Calling the right image?
Well you can’t rightly use the common core of WordPress to display a new age recipe. Especially one that of a mobile device. Below are the most commonly used calls for featured images on WordPress.
Before we begin we must first create a function that can be called on. This can typically be done by modifying the default functins.php file, but we would like to avoid doing this due to potential changes to this file if you are utilizing a theme that receives routine updates. So, we will create a secondary file called custom-functions.php.
This is where you can keep any additional functions beyond the standard theme functions. Side note: make sure to utilize an ftp program such as Filezilla to manage your files.
Excellent! So now we have a new, but yet empty, file called custom-functions.php. Now we must add our custom function to the file that will add the amp-img element (copy code below). Remember to add this code right after the <?php syntax.
/** Template tag to show featured image on AMP */
function isa_amp_featured_img( $size = ‘medium’ ) {
global $post;
if ( has_post_thumbnail( $post->ID ) ) {
$thumb_id = get_post_thumbnail_id( $post->ID );
$img = wp_get_attachment_image_src( $thumb_id, $size );
$img_src = $img[0];
$w = $img[1];
$h = $img[2];
$alt = get_post_meta($post->ID, ‘_wp_attachment_image_alt’, true);
if(empty($alt)) {
$attachment = get_post( $thumb_id );
$alt = trim(strip_tags( $attachment->post_title ) );
} ?>
<amp-img id=”feat-img” src=”<?php echo esc_url( $img_src ); ?>” <?php if ( $img_srcset = wp_get_attachment_image_srcset( $thumb_id, $size ) ) { ?> srcset=”<?php echo esc_attr( $img_srcset ); ?>” <?php } ?> alt=”<?php echo esc_attr( $alt ); ?>” width=”<?php echo $w; ?>” height=”<?php echo $h; ?>”>
</amp-img>
<?php
}
}
Make sure to save this file in your theme directory where the functions.php file exists for the theme you are using. If the custom-functions.php isn’t being called then add the above code to the very end of your functions.php in the theme directory you are using. But remember, these files do change when you update your theme and you may loose the featured image from your posts.
Modifying the AMP Plugin File for Single Posts
Lets log into our WordPress site and head on over to Plugins > Editor. From the “Select plugin to edit:” drop down select the “AMP” plugin. Once you have a list of these plugin scroll through the sidebar with the list of files associated with this plugin. Here is where you want to find the file called “amp/templates/single.php”. This is the file you will be updating, in WordPress, that will call to the custom-functions.php file.
Add the code <?php isa_amp_featured_img( ‘medium’ ); ?> (illustrated below) to the proper section of the file to showcase the amp-img element to the AMP WordPress plugin.
On a side note, you can modify the template tags to best illustrate the size of the image on the AMP mobile side. Below are a list of official WordPress sizes:
‘thumbnail’
‘medium’
‘large’
‘full’
If this post on adding an AMP featured image to your site has helped you in any way, please feel free to comment below or share this post with your friends or colleagues on social media.
April 21, 2016 @ 9:21 am
Hey this method doesn’t work. When i did the as per your instruction and open my link. It did not show any content except only header of the page.
April 21, 2016 @ 1:37 pm
Hello Muhammad,
Could you provide me with a link to example of your issue? I know this method works, but I want to see where my instructions went wrong. Thanks,
April 23, 2016 @ 4:31 pm
Still not.
April 25, 2016 @ 4:59 pm
Hello Muhammad, I went through this process on a fresh install with Twenty Sixteen and it worked for fine. Could you provide me with some of the pages you are working on?
April 25, 2016 @ 5:28 pm
Hey @MegaMikeJr:disqus Thanks for replying. Here is the link of the blog post which i am trying to add featured image. http://infotainworld.com/women-universities-in-pakistan/amp/
April 25, 2016 @ 5:56 pm
I didn’t see any call from the single.php file located in /amp/templates/single.php. Do you have the amp-img formatting in your functions.php located in your Bimber theme directory?
April 25, 2016 @ 6:01 pm
I did that previously and followed all of the instruction but my article content got vanished by doing that.only header was showing. So i removed that file and all the codes.
April 25, 2016 @ 6:11 pm
Try adding the code to your themes functions.php at the very end of the file. Do not create a custom-functions.php file. There is nothing in there that would break your page unless you put the code in the wrong place of your functions.php or forgot to add the ” Editor > Select “AMP” > And choose the file “amp/templates/single.php”. This should work for you.
August 13, 2016 @ 1:00 pm
Hi, I was facing the same problem and I discovered the solution…
When you cut and paste the code, came with this: ‘ that is different of ‘
Try to replace the quotation marks, worked fine to me.
May 21, 2016 @ 6:47 am
Hi Michael,
Great (y), its work for me. I have tried a lot, but finally your tutorial works very well. thumbs up.
I have a little issue in feature images, can you help me out?
Feature image now displaying, but the size is small (150 X 150) even the size is set to the ‘full’ ($size = ‘full’).
Can you sort out that where i am going to wrong?
Thanks
May 24, 2016 @ 1:42 pm
You can adjust the code in the plugin file called “amp/templates/single.php” to represent dimensions
You have to be careful setting the pixels to high otherwise it would be counter-productive. Let me know if this works for you or not.
August 5, 2016 @ 12:09 pm
Hi Michael,
Yes i have put all code in “amp/templates/single.php”, it looks good. But again facing a problem, i.e. sometime feature image appears large and sometimes as thumbnail, even i have place the code like this. “isa_amp_featured_img(‘large’)”.
Thanks
August 8, 2016 @ 9:05 am
How do you then get this working in responsive terms?
August 14, 2016 @ 3:09 am
Hi Kasey,
AMP is mobile focused. The images are intended to be mobile first. Hope this answers your question.
November 20, 2016 @ 7:36 pm
*** IMPORTANT!
Please change the “smart quotes” in your code to plain quotes. AMP chokes on the curly/unicode quotes.
For e.g.: look very carefully above at:
(or better yet, copy all the code into Word and increase the font size 🙂
Thanks for posting the code though — makes the pages much more interesting to read!
Santa