Amp plugin disrupts image caption alignment

  • Resolved shawsje

    (@shawsje)


    3 years, 11 months ago

    Dear Support,

    I’m presently building a straightforward WP site that will ultimately be a series of long read / reference articles, all designed to be 100% AMP.

    The issue I’ve encountered with the AMP for WP plugin is that when activated and in standard mode, it disrupts the image block caption (figccaption) text alignment vertically. N.B. No problems horizontally. No page builders, I’m just using the standard WP block builder.

    I’ve deactivated all plugins and rolled back to the default 2021 theme and still have the issue with only the AMP plugin activated. If I deactivate it, the issue goes away. Thus I am pretty sure it’s a consequence of the AMP plugin being active.

    There are two straightforward additional css entries to dress the figcaption, these have been removed and ruled out as the problem still manifests itself.

    The figcaption misalignment issue usually appears on captions when viewing on a mobile device and can be resolved by forcing a change of view to landscape mode and then back to portrait mode.

    Occasionally the problem also is encountered when viewing the website on desktop with the wordpress bar active at the top of the browser.

    The main URL for testing is https://undiscoveredberchtesgaden.com/the-story-behind-lake-konigssee/ but all posts on this site exhibit the same misalignment of the figcaption, albeit quite randomly!

    I’ve been chasing my tail over this for quite some time now, having even tried the AMP2.1 beta plugin just to see if that made any difference. Alas no luck.

    Any toughts/ideas would be extremely welcome.

    Thanks,

    Stephen

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 27 total)
  • Thread Starter shawsje

    (@shawsje)

    Some mobile/desktop screenshots to illustrate the issue:

    https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help1-scaled.jpg
    https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help2-scaled.jpg
    https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help3.png
    https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help4.png

    Thanks for reaching out and providing all this context. Great also to hear you’ve tested out the 2.1 beta.

    I’ve tried to recreate the same figcaption misplacement you mentioned using the Twenty Twenty One theme although I’m unable to encounter the same issue. I’m also on your site now on that specific URL on both mobile and desktop and from my side the figcaption looks fine. While you did say it occurs randomly it seems from your screenshots that in the editor itself the captions seem to be off, which is particularly unusual.

    As the issue occurs randomly on your site and I’ve been unable to encounter this from my side I’m curious to know if you keep the AMP plugin active while in transitional mode do you encounter the same misplacement when checking your canonical (non AMP) URLs? While performing this check I’d also be happy to check your current setup if you want to share your Site Health information privately via this form.

    Thread Starter shawsje

    (@shawsje)

    Hi James,

    Using transitional mode I’ve tested the canonical URLs of all 4 long read pages and there are no image caption formatting errors.

    If I go to the AMP versions the image caption vertical alignment errors are still there (sporadically).

    I’ll linkn an example from the https://undiscoveredberchtesgaden.com/the-story-behind-lake-konigssee/ post when viewing the AMP version.

    I’ll also submit the site health report to you as requested.

    Does this shed any light on the root cause? Thanks for looking into this for me.

    Thread Starter shawsje

    (@shawsje)

    Transitional mode produces the error on the AMP pages but not canonical.

    https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Help5-scaled.jpg

    Thanks for the update. While I’m unable to see the same issue on my side (with the same theme and from checking your site) please do share your Site Health information and I’ll see if I can spot anything unusual. I suspect there could be specific styling or formatting from another third party plugin resulting in this behavior. The Google fonts applied don’t seem to be applicable to your theme.

    One troubleshooting step you can perform on your side is to utilize the Health Check and Troubleshooting plugin. This can rule out any third party plugin conflicts. Here’s a quick video I created showing you the steps to follow, while also demonstrating the same experience using AMP standard mode with the same theme on my side.

    Please let me know how you get on from testing with that plugin.

    Thread Starter shawsje

    (@shawsje)

    Hi James, site health information posted via the link you provided.

    Thanks for the suggestions, I’ve give the troubleshooting plugin a go and can confirm that using the default 2021 theme and disabling all plugins bar AMP and Health check produces the alignment errors. This is then resolved by disabling the AMP plugin.

    Could you please elaborate on “The Google fonts applied don’t seem to be applicable to your theme”?

    Thank you,

    Stephen

    Could you please elaborate on “The Google fonts applied don’t seem to be applicable to your theme”?

    Apologies, I was looking at the fonts on your theme and assuming you manually applied Google fonts to your Twenty Twenty One theme which you referenced earlier. I can see your using the Neve theme now and that was only for testing.

    I’ve also tested the same Neve theme with the same fonts applied without being able to reproduce the issue. Please do share any findings on your side using the Health Check & Troubleshooting plugin.

    Thread Starter shawsje

    (@shawsje)

    Hi James,

    After some further elimination of causes (total reinstall of WP, installing only the Neve theme plus AMP and required posts & images) I can report that this figure caption alignment problem arises when using certain image alignment options in the default blocks page builder with the AMP plugin active.

    If I select either wide or full width alignment there is no caption misalignment across mobile, tablet and desktop with the AMP plugin active. Perfect! except I’m after a long-read contained look… Left, right, centre or no alignment produce the alignment error across all platforms.

    AMP image options are kept consistently at default and AMP lightbox enabled.

    Any ideas as to what differentiates wide and full with to the other alignment options? Does the AMP plugin treat these differently?

    I must admit I haven’t’ been able to find much in the way of documentation discussing the AMP image ‘AMP layout’ options…can you point me in the right direction? Responsive seems the best selection for an AMP only site, but I wonder if this setting might also have some bearing on the caption alignment issue here? Hence leaving this at default.

    Looking forward to your thoughts,

    Stephen

    Thanks for providing an update, nice troubleshooting. See below:

    If I select either wide or full width alignment there is no caption misalignment across mobile, tablet and desktop with the AMP plugin active. Perfect! except I’m after a long-read contained look… Left, right, centre or no alignment produce the alignment error across all platforms.

    Does this also occur with a default theme also, and not just Neve? I’m performing some tests on my side trying to reproduce with the same theme although unsuccessful so far.

    Any ideas as to what differentiates wide and full with to the other alignment options? Does the AMP plugin treat these differently?

    There shouldn’t be any differences as far as I’m aware. The AMP plugin uses the same styling rules, while removing any rules no applicable. In some cases if a document have more than the permitted 75Kbs of CSS rules can be automatically removed to ensure AMP valid URLs.

    I must admit I haven’t’ been able to find much in the way of documentation discussing the AMP image ‘AMP layout’ options…can you point me in the right direction?

    Did you checkout the amp-image documentation on amp.dev? You’ll find various examples on there. The default layout will be responsive.

    Thread Starter shawsje

    (@shawsje)

    Hi James,

    Yes, with 2021 theme the same behaviour is exhibited. Wide & full image width give no caption alignment issues, whereas centre/no alignment do.

    I’m tempted to see if there’s a way of simply limiting the image wide width to the post container width as a workaround for now…but even if possible, it’d be nice to figure out what’s going on.

    Regarding replicating the issue…perhaps its related to the image dimensions I’m using? Feel free to scrape the images from the page we’re working on https://undiscoveredberchtesgaden.com/self-guided-tour-of-lake-konigssee/ to test. (hope you’re interested in alpine lakes…)

    Thanks to the link, leaving things set to default seems the best option then.

    Thread Starter shawsje

    (@shawsje)

    Hi James,

    An interesting observation: if I put the same image with the same formatting into a 100% column, the image caption behaves as expected (with AMP enabled).

    I’ve duplicated all images in the same way (first a 100% column, second the image with no container) on https://undiscoveredberchtesgaden.com/self-guided-tour-of-lake-konigssee/ and there’s a screenshot showing the glitch here:

    https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/04/Help-6.png

    Stephen

    Thanks for the update, great that you also made a page with all the image variations. I’ve performed some additional checks on your site using different browsers and emulators although I don’t encounter the same misplaced captions (example with the same image you referenced).

    while I’d like to open a GitHub issue for this we’ll need some more insights unfortunately. Firstly can you share the full markup after switching to a code editor view (just for that image).

    Secondly can you share whether the same occurs on your side when using another browser or device?

    Thread Starter shawsje

    (@shawsje)

    Hi James,

    Yes I’ve tested using another iPhone and laptop (windows) and seen similar behaviour.

    Here is the non-visual editor code for two of the images showing this behaviour:

    <figure class="wp-block-image size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure>

    <div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure></div>

    Thread Starter shawsje

    (@shawsje)

    <figure class="wp-block-image size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure>

<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://undiscoveredberchtesgaden.com/wp-content/uploads/2021/03/Lake-Konigssee-Echowand.jpg" alt="" /><figcaption>Despite the introduction of electric boats in the early 20th century to minimise noise pollution, the use of the black powder pistols continued up until the 1930s</figcaption></figure></div>

    Thanks for providing the additional insights. I’ve used the same code snippets although so far I’ve been unsuccessful in trying to recreate the same misplacement on my side. I’ll get a colleague to take a look, while also reviewing a URL you highlighted where the issue occurs from your testing.

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘Amp plugin disrupts image caption alignment’ is closed to new replies.