Featured Image is responsible for displaying the featured image on your AMP Post.
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.
Hi, I have a problem trying to hide the featured image programmatically before some date in the single post view, this works in a WP that has AMP standard mode, but I have a WP with AMP pro with Amp layouts and doesn’t work:
add_filter(
‘post_thumbnail_html’,
function ( $html, $post_id ) {
if (
(strtotime(get_post( $post_id )->post_date) < strtotime("2021-02-10"))
&&
is_singular()
) {
$html = '';
}
return $html;
},
100,
2
);
I contacted the support about a week ago in the link you provide in the comments but had no response yet.
Hi Matias,
Will you please contact our technical team from here- https://ampforwp.com/support/ they will help you as soon as possible.
I just installed the amp for wp plugin, all works fine.
The problem is the IMAGE DOES NOT APPEAR when accessed via the Google search engine on a smartphone.
But if using the URL added “/amp”, the image appears normally, including on smartphones.
my site :”https://distributionpemasaran.com”
for example to access the url :”breakdown-target-sales-sales”
so the image does not appear if accessed via a smartphone with: “https://google.com/amp/s/distribumarketing/breakdown-target-penjualan-sales/”
the image appears normal when accessed using :”https://distributionpemasaran/breakdown-target-penjualan-sales/amp”
What’s the solution ?
Hi Agus Octa,
Will you please contact our technical team from here- https://ampforwp.com/support/ they will help you as soon as possible.