AMP Tutorials

Featured Image is responsible for displaying the featured image on your AMP Post.

1. Swift Design
2. Other Designs (Design Three, Design Two, Design One)

1. Swift Design

Follow these steps to add a featured image in AMP

1. Featured images are by going to the post editor. Simply create a new post and scroll down a little to see if there is a meta box called featured images on the right-hand side of the screen.

2. First go to the WordPress admin area -> AMP option panel -> Design -> Single.

Scroll down a little to see this option

Featured Image: If you enable this option featured image will be shown in a single post in AMP.

Featured Image Type: In this filed we have two option will display “Full-screen image” or “Image fit above the content” as per your requirement you can select and then click on the “Save Changes” button.

• Full Screen image: Once you select “Full Screen image” option in single page featured image will be displayed in full screen.
• Image fit above the content: If you select this option featured image will be displayed in above the content.

Size: In this field, you can select featured image size like thumbnail, Medium, Medium Large, large and full as per your requirement you can select and then click on the “Save Changes” button.

The output of Featured image:

If you don’t want to set featured images from meta box then you can follow below the steps.

1. First go to the WordPress admin area -> AMP option panel -> Settings -> Advance settings.

Scroll down a little to see these options.

• Featured Image from Custom Fields:  This will allow you to add Featured Image from Custom Fields
• Featured Image from The Content: Show the first image of the content as Featured Image if there is no featured image
• Duplicate Featured Image: Turn On the support if you don’t want to show the Featured Image if it already exists in post content.

2. Other Designs (Design Three, Design Two, Design One)

Follow these steps to add a featured image in AMP

First, you need to go WordPress Dashboard -> Appearance -> Click on the “AMP” option like below the screenshot.

Once you click on the AMP option it will redirect to Customize page you need to click on AMP like below the screenshot.

Click on the Design Option like below the screenshot

If you want to show Featured Images in AMP then you need to check “Featured images” option if you want to hide featured images then you need to uncheck this option and if you want to change the order of the element you can drag and drop this option after that click on the “Publish” button.

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.