Distorted carousel images and missing featured images

Hey @raeph

Thank you so much for using the plugin!

1. I wanted to make this responsive/fluid size, but due to a bug in AMP-carousel, we had to make it fixed width.

2. I just checked the URL, it’s showing the images.

3. We already have this ticket in the queue, we are planning to add the excerpt into the single post in the upcoming updates. But if are technical enough, then please use https://ampforwp.com/extend-amp-plugin/

I hope it helps,

Regards,
Ahmed

Thanks Ahmed.

1) Would you be able to point me to the CSS tag where I can change the aspect ratio?
2) Featured Image is supposed to show above the post title. It is not showing if you compare amp and non-amp versions.
3) Thanks will give extended amp a try!

Hey @raeph

1. It looks like you found CSS Tag and changed the aspect ratio. Did I get it right?
2. yes, you can move featured image to show above the post title. For that

Go to > AMP settings > Getting Started > Design > Click on Launch Post Builder > AMP > In that you can drag Featured Image to the Top of the page.

Please refer to this screenshot https://take.ms/pjPi1

3. All the best

Let me know if you have any more questions.

Hey!

1. Yes, had to change the aspect ratio on line 80 in design-3/index.php.

2. I’m aware of that. My problem is that my featured images are not appearing in the single post. Checking the source shows that no image is loaded:

<div class="amp-wp-article-featured-image amp-wp-content featured-image-content">
<div class="post-featured-img">
<figure class="amp-wp-article-featured-image wp-caption">
				<p class="wp-caption-text">
			CF8F26 Saint Helena island RMS St Helena moored at Jamestown South Atlantic Ocean. Source: Alamy</p>
	</figure>
</div></div><header class="amp-wp-content amp-wp-article-header ampforwp-title">
	<h1 class="amp-wp-title">10 of the World’s Most Remote Inhabited Islands</h1>
</header>

So, here’s my very amateur work around, which I’ve applied to /design-3/elements/featured-image.php:

<div class="amp-wp-article-featured-image amp-wp-content featured-image-content">
<?php if ( has_post_thumbnail() ) { ?>
		<?php
		$thumb_id = get_post_thumbnail_id();
		$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'medium_large', true);
		$thumb_url = $thumb_url_array[0];
		?>
		 <amp-img src=<?php echo $thumb_url ?> width=450 height=338></amp-img>
		<?php } ?>
        <a href="<?php the_permalink(); ?>/amp">
        
        </div>

Of course, this looks crap on larger mobile devices (width > 450px) and I’m wondering if there is a responsive work around.

3. Custom plugin created. Works like a charm!

Also purchased Advanced AMP ADS plugin. You guys rule!

Ha! Solved responsiveness in featured image, the layout=”responsive” attribute was missing. Updated featured-image.php code looks like this:

<div class="amp-wp-article-featured-image amp-wp-content featured-image-content">
<?php if ( has_post_thumbnail() ) { ?>
		<?php
		$thumb_id = get_post_thumbnail_id();
		$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'medium_large', true);
		$thumb_url = $thumb_url_array[0];
		?>
		 <amp-img src=<?php echo $thumb_url ?> width=450 height=338 layout="responsive"></amp-img>
		<?php } ?>
        <a href="<?php the_permalink(); ?>/amp">
        </div>