Add AMP Featured Image to WordPress

Share on Facebook0Share on LinkedIn0Share on Google+0Tweet about this on Twitter0

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.

Using the proper featured image syntax

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.

Add featured image to AMP

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.

Related Posts