• Hi,

    I wanted to create an AMP version of my landing page, so first I installed https://wordpress.org/plugins/accelerated-mobile-pages/. But the homepage looked bleak, so I studied AMP advanced features here: https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

    and wanted to add them to my page.

    1. openned up the editor, copied and pasted the carousel AMP code
    2. replaced the image links with my ones, replaced the captions
    3. switched from HTML editor to visual editor
    4. switched back
    5. only what seems to be recognized non AMP html remained:

    <div class="slide">
    <div class="caption">Fashion E-shop with custom design</div>
    </div>
    <div class="slide">
    <div class="caption">Sleek design to present property management services. One page design.</div>
    </div>
    <div class="slide">
    <div class="caption">Blog with extended features - user marketplace, post your own articles, custom ads management and nice article layout.</div>

    This feels like a bug – wordpress editor hasn’t caught up with latest AMP development?

    thanks,
    Lukas

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter lukascech

    (@lukascech)

    verified this on a test page with no clutter (other code).

    1. created a new page in WP
    2. pasted this code straight from amp by example page:

    <amp-carousel class="carousel2"
      layout="responsive"
      height="400"
      width="500"
      type="slides">
      <div class="slide">
        <amp-img src="/img/Border_Collie.jpg"
          layout="fill"
          alt="Border Collie"></amp-img>
        <div class="caption">
          The Border Collie is a working and herding dog breed developed in the Anglo-Scottish border region for herding livestock, especially sheep. It was specifically bred for intelligence and obedience.
        </div>
      </div>
    
      <div class="slide">
        <amp-img src="/img/Shetland_Sheepdog.jpg"
          layout="fill"
          alt="Shetland Sheepdog"></amp-img>
        <div class="caption">
          The Shetland Sheepdog, often known as the Sheltie, is a breed of herding dog. Less favored nicknames are the Toy Collie and the Miniature Collie. They are small dogs, and come in a variety of colors, such as sable, tri-color, and blue merle. They are
          very intelligent, vocal, excitable, energetic dogs who are always willing to please and work hard.
        </div>
      </div>
    
      <div class="slide">
        <amp-img src="/img/Hovawart.jpg"
          layout="fill"
          alt="Hovawart"></amp-img>
        <div class="caption">
          The Hovawart is a medium to large size German dog breed. The name of the breed means "an estate guard dog", which is the original use for the breed. The breed originated in the Black Forest region and was first described in text and paintings in medieval
          times.
        </div>
      </div>
    </amp-carousel>

    3. switched to visual editor
    4. amp html tags are gone, only <divs> remain

    Thread Starter lukascech

    (@lukascech)

    what helped was using Site Origin editor and the HTML widget – this one keeps all the code.

    Still – it’s a workaround involving a 3rd party plugin but it feels that WP editor should allow AMP code by default.

    Thread Starter lukascech

    (@lukascech)

    works fine here (using the site origin HTML widget): https://affordablewebdesign.website/amp-test/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    WordPress will muck with the markup if you’re switching between the Text editor and Visual editor to preview things. This isn’t how it was intended, the editors were meant to be used individually. Pick one and use it for the duration of the page edit. Switching between editors is the way to lose changes. If you want to preview your work you need to use the “Preview” button.

    Thread Starter lukascech

    (@lukascech)

    Hey Andrew,

    tried that too – preview strips it out too, without switching between editor modes.

    1. I created a new page
    2. copied above amp-html and pasted it into HTML editor
    3. clicked preview button
    4. result is just text (the divs, without amp-html tags)

    would this be considered a bug?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘HTML editor strips out / rewrites AMP html code’ is closed to new replies.