Hi there.
I’m looking the non-AMP version at https://randomtrip.es/trekking-valle-del-cocora/
And given this image:
<div id="attachment_5546" style="width: 810px" class="wp-caption alignnone">
<img class="size-full wp-image-5546" src="https://randomtrip.es/wp-content/uploads/2019/03/Valle-del-Cocora-Ines-Brazos-Abiertos.jpg" alt="Ines en el valle del Cocora" width="800" height="533" srcset="https://randomtrip.es/wp-content/uploads/2019/03/Valle-del-Cocora-Ines-Brazos-Abiertos.jpg 800w, https://randomtrip.es/wp-content/uploads/2019/03/Valle-del-Cocora-Ines-Brazos-Abiertos-300x200.jpg 300w, https://randomtrip.es/wp-content/uploads/2019/03/Valle-del-Cocora-Ines-Brazos-Abiertos-768x512.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"/>
<p class="wp-caption-text">El impresionante valle del Cocora</p>
</div>
The wrapper div
here is the problem and the width
it defines. That width
is carried over to the AMP version. If I open DevTools and remove that width
the image again fits properly.
Where is that div
with the width
coming from?
Can you share the underlying post_content
of that post?
The problem would be resolved if your AMP template included this style rule:
.content .wp-caption {
max-width: 100%;
}
It seems your theme’s custom template doesn’t wrap the content in an element that has the expected amp-wp-article-content
class:
https://github.com/ampproject/amp-wp/blob/1bac4d525c37c8f0d6ae4d4987741d445251297a/templates/single.php#L27-L29
So this rule is not applying:
https://github.com/ampproject/amp-wp/blob/7c009be24a3484864557f734235d011fded7bc77/templates/style.php#L256-L258
Actually, your theme custom stylesheet doesn’t include this rule either.
So I think it is a problem with your theme.
You should be able to fix it with this code in your theme’s functions.php
or custom plugin:
add_action( 'amp_post_template_css', function() {
echo ".content .wp-caption { max-width: 100%; }";
} );
You may want to contact PageFrog about the problem.
@westonruter thanks so much for your fast and detailed response!
This solved the problem:
.content .wp-caption {
max-width: 100%;
}
I managed to include it with this plugin: https://wordpress.org/plugins/amp-custom-css/. It would be nice if the official AMP plugin would allow to include custom CSS directly.
Regarding PageFrog, tried deactivating it but no effect on the issue, so it does not seem related to that.
@christianoliveira87 Glad it is fixed.
In regards to being able to set Custom CSS in the AMP plugin directly: the ideal is that you can eventually switch to Transitional mode so that your active theme’s templates can be re-used in AMP. This would mean the AMP version would look no different than the non-AMP version, and any custom CSS could be added via Additional CSS in the Customizer, or via any other standard means.
Your theme may not be compatible with Transitional mode (or Native mode) for that matter, however.
Yes, I hope I can move to an “AMP only” site configuration but right now it’s a bit difficult; I tried it on my personal blog, https://www.christianoliveira.com/blog/, using one of the recommended themes here, but plugins cause issues and the AMP pages won’t validate.
@christianoliveira87 Out of curiosity, which plugins were causing problems specifically?
I use official amp plugin and native mode but my website Google webmaster tools amp error issue this “The tag ‘meta charset=utf-8’ appears more than once in the document”
My website http://www.freshersexam.com
How do solve this problem?
@westonruter sorry, I forgot to reply to you!
I use several, but the one which seems to be causing most (if not all) of the errors reported by the AMP plugin is Jetpack.
The website seems to work perfectly fine in AMP mode (which is awesome!), but it does not allow me to go full AMP (I suppose because of this errors reported).
Let me know if you need any other info
@christianoliveira87 Yes, not all Jetpack modules are compatible yet.
You can go Native AMP if you pick a subset of modules.
You can find a list of the modules that are known to be compatible here: https://github.com/Automattic/jetpack/issues/9730#issuecomment-467683259
We’re working with the Jetpack team to improve compatibility across the modules. So you can subscribe to that issue for updates.
@westonruter thanks, will try that!
@westonruter tried to deactivate Jetpack, but I see no option to go Native AMP. I’m using the Astra Theme (one of the listed here: https://amp-wp.org/ecosystem/themes/ ) but here is no option to choose, it just shows the “Transitional Mode”:
https://www.evernote.com/l/ACDpYZQF2qpI4paUiq0lRq5N6Hq64nPrDlw
(sorry it’s in spanish)
@christianoliveira87 Actually, Jetpack is not what is blocking you from going Native AMP. The issue is the theme declares itself as Transitional. We have an issue logged specifically for always allowing you to switch from Transitional to Native: https://github.com/ampproject/amp-wp/issues/2312
In the mean time, you can force the theme to allow switching by using this plugin code: https://gist.github.com/westonruter/bf848ed3c8c922f192b6e2e39598e86c
@westonruter cool, thanks! Just installed, running it in Native Mode now 🙂